`
ylinn
  • 浏览: 61350 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

js图片滚动

J# 
阅读更多
<script >
var imgc = 1;//图片序列开始
var imgm = 5;//图片序列结束
var flag = 1;//标记鼠标移动
var tm;//定时器
//自动循环播放图片


function cgimg(){
if(flag==0)return;
var mimg = document.getElementById("mimg");
mimg.src = ""+imgc+".jpg";
imgc++;
if(imgc>imgm)imgc=1;
tm = window.setTimeout("cgimg()",1000);
}
//鼠标移动到图片上
function imgstop(){
flag = 0;
window.clearTimeout(tm);
}
//鼠标移动到图片外
function imgstart(){
flag = 1;
tm = window.setTimeout("cgimg()",1000);
}
//单击按钮时
function moimg(imgurl){
window.clearTimeout(tm);
var mimg = document.getElementById("mimg");
mimg.src = imgurl;
}
//初始化按钮
function initbtn(){
var mimg = document.getElementById("imgdiv");
var divtop = parseInt(mimg.style.top);
var divhei = parseInt(mimg.style.height);
var mdivtop= divtop+divhei-30;


var divleft = parseInt(mimg.style.left);
var divwid = parseInt(mimg.style.width);
var mdivleft = divleft+divwid-(imgm-imgc)*25;

var btndiv = document.getElementById("btndiv");
for(i=imgc,j=1;i<=imgm;i++,j++){

btndiv.innerHTML = btndiv.innerHTML + " <a style=\"cursor:hand\" onmouseover=\"moimg('"+i+".jpg')\" onmouseout=\"imgstart()\">"+j+"</a> | ";
}

}

function showdiv(){
var mydiv = document.getElementById("mydiv");
mydiv.style.height=200;
}
function dispdiv(){
var mydiv = document.getElementById("mydiv");
mydiv.style.height=30;

}
function initdiv(){
var mydiv = document.getElementById("mydiv");
var winwidth = window.document.body.clientWidth;
var winheight = window.document.body.clientHeight;
var dheight =  parseInt(mydiv.style.height);
var dwidth =  parseInt(mydiv.style.width);
mydiv.style.top = winheight - dheight;
mydiv.style.left = winwidth - dwidth;

removediv();
}
function removediv(){
var mydiv = document.getElementById("mydiv");
var sheight = window.document.body.scrollTop;
var winheight = window.document.body.clientHeight;
var swidth = window.document.body.scrollLeft;
var winwidth = window.document.body.clientWidth;

var divh = sheight+winheight-parseInt(mydiv.style.height);
mydiv.style.top = divh;
var divw = swidth+winwidth-parseInt(mydiv.style.width);
mydiv.style.left = divw;

window.setTimeout("removediv()",20);
}

</script>
分享到:
评论

相关推荐

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    JavaScript 图片滚动插件是一种广泛应用于网页设计中的动态效果工具,它使得图片展示更加生动有趣。在网页设计中,图片滚动通常用于展示多张图片,尤其是对于产品展示、新闻更新或者图片滑块等场景,能有效提升用户...

    原生js图片滚动插件新浪电影大片首页焦点图片滚动切换效果代码

    在IT行业中,JavaScript(简称JS)是一种广泛使用的...在提供的压缩包文件`texiao7720_1560680894`中,应该包含了实现这一效果的源代码,你可以通过学习和调试这些代码,进一步加深对JavaScript图片滚动插件的理解。

    JavaScript 图片滚动

    超酷的JavaScript图片横向滚动,Js滚动类已经封装,为了设置方便,单独摘出了控制程序。

    JS图片滚动效果,走马灯

    在网页设计中,JS实现的图片滚动效果可以增加用户体验,吸引用户注意力,同时节省网页空间。 本项目提供两种不同的图片滚动效果,它们都是基于JS编写的,无需额外的服务器端语言支持,只需在HTML中嵌入相应的JS代码...

    JS图片滚动

    JS图片滚动,顾名思义,是指通过JavaScript编程语言来控制网页中的图片进行自动滚动展示的技术。这种技术不仅能够增强网页的动态感,还能有效地利用有限的网页空间展示更多的图片信息,适用于各种场景,如产品展示、...

    js图片滚动效果(mootools)

    综上所述,"js图片滚动效果(mootools)"涉及到了JavaScript编程、MooTools库的使用、DOM操作、事件处理、动画效果以及用户体验优化等多个知识点。通过深入理解和实践这些内容,可以创建出更加高效、易用的图片滚动...

    超炫JavaScript图片滚动

    JavaScript图片滚动,也被称为图片轮播或滑动展示,是一种常见的网页动态效果,它通过JavaScript技术来实现图片的自动切换,以吸引用户注意力并提供视觉上的吸引力。这种效果在网站的首页、产品展示或者相册模块中...

    常用JS图片滚动

    本文将深入探讨“常用JS图片滚动”的实现方法,包括无缝、平滑以及上下左右滚动等特性。 首先,我们理解“无缝”滚动的概念。在图片滚动中,“无缝”意味着当一张图片滚动出去时,下一张图片会立即无缝接续,不会...

    js 图片滚动js 图片滚动

    JavaScript图片滚动是一种常见的网页动态效果,它通过JS脚本实现图片在页面上的自动滚动或轮播,提升用户体验,尤其在展示多张图片时效果显著。本文将深入探讨JavaScript图片滚动的相关知识点,包括基本原理、实现...

    javascript图片滚动

    JavaScript图片滚动是一种常见的网页动态效果,它通过编程方式实现图片的自动切换,为网站增添视觉吸引力。这种技术在网页设计中被广泛应用,特别是在新闻、产品展示或者轮播图等场景下。JavaScript作为客户端脚本...

    javascript图片滚动集合

    以上是关于JavaScript图片滚动的基本实现和扩展功能的介绍。在实际项目中,可以结合CSS3的动画属性,如`translateX`和`translateY`,以及现代浏览器的`requestAnimationFrame`来优化滚动性能和动画平滑度。同时,...

    js实现图片滚动

    总结来说,实现JavaScript图片滚动涉及的主要知识点有: 1. HTML结构设计 2. CSS样式布局与动画 3. JavaScript事件处理与定时器 4. DOM操作(获取元素、修改属性) 5. 可能涉及的CSS3动画和触摸事件处理 6. 使用...

    js图片滚动 阶段性

    图片滚动 js图片滚动 js图片滚动 js图片滚动 js图片滚动 js

    JS 图片滚动,带箭头控制方向左右滚动

    【标题】"JS 图片滚动,带箭头控制方向左右滚动"所涉及的知识点主要集中在JavaScript编程语言的应用上,特别是关于图片轮播效果的实现。在这个项目中,开发者使用JavaScript来创建一个动态的图片滚动展示,用户可以...

    js图片滚动效果简单实用

    js 图片滚动 效果 function toleft(demo,demo1,demo2,speed,flag) { demo=$(demo); demo1=$(demo1); demo2=$(demo2) demo2[removed]=demo1[removed] function Marquee() { if(demo2.offsetWidth-demo....

    JS图片滚动代码.循环滚动

    ### JS图片滚动代码:循环滚动 #### 知识点概览 1. **HTML与CSS基础** - 基本HTML结构 - CSS样式设置 2. **JavaScript实现图片滚动** - DOM操作 - JavaScript定时器 - 事件监听 3. **动态内容加载** - 使用...

Global site tag (gtag.js) - Google Analytics