div带图片定时切换详解

最新推荐文章于 2021-05-30 23:06:41 发布

全栈独立开发者

最新推荐文章于 2021-05-30 23:06:41 发布

阅读量2.6k

点赞数

我们在页面，有4个div，分别都带图片，我想实现定时切换，下面我来描述下需求。

总共4个div，每个div带一个图片，div下面是序号，我要实现的效果是定时的到下一个图片，显示下一个图，然后我鼠标点击上去，div不动，然后我鼠标拿走，div在继续执行。。。

下面我们来看看，我是怎么样实现的。
先看一个效果图，看你自己怎么切图了：

4 小时前上传

下载附件 (11.06 KB)

先看页面div的代码：

<div id="show1"><img src="${article.logo!}" width="342" height="228" /><div>
<div id="show2"><img src="${article.logo!}" width="342" height="228" /><div>
<div id="show3"><img src="${article.logo!}" width="342" height="228" /><div>
<div id="show4"><img src="${article.logo!}" width="342" height="228" /><div>

复制代码

在看序号的代码：

<div class="huandeng01_bt03">
<ul>
<li><div id="ss1" class="huandeng02" οnmοuseοut="startInterval()" οnmοuseοver="showChange(1,'ss',5)" >1</div>
</li>
<li><div id="ss2" class="huandeng02" οnmοuseοut="startInterval()" οnmοuseοver="showChange(2,'ss',5)" >2</div></li>
<li><div id="ss3" class="huandeng02" οnmοuseοut="startInterval()" οnmοuseοver="showChange(3,'ss',5)" >3</div></li>
<li><div id="ss4" class="huandeng02" οnmοuseοut="startInterval()" οnmοuseοver="showChange(4,'ss',5)" >4</div></li>
<li><div id="ss5" class="huandeng02" οnmοuseοut="startInterval()" οnmοuseοver="showChange(5,'ss',5)" >5</div></li>
</ul>
</div>

复制代码

下面看js代码：
我们来看showChange方法的部分代码：

......
NowFrame = num;
clearInterval(test_interval);

复制代码

在看startInterval方法的代码：

function startInterval(){
clearInterval(test_interval);
test_interval= setInterval('fnToggle()', 3000);
}

复制代码

在看看页面设置定时器的方法：

var NowFrame = 0;
var MaxFrame = 5;
var bStart = 0;
// show1_1 ss1
function fnToggle() {
NowFrame = NowFrame+1 ;
if(NowFrame == 6){
NowFrame=1;
}
document.getElementById('ss' + NowFrame).style.background = "#970204";
document.getElementById('ss' + NowFrame).style.color = "#fff";
document.getElementById('show'+NowFrame).style.display = "";
document.getElementById('show'+NowFrame+'_'+NowFrame).style.display = "";
for(var i=1;i<=MaxFrame;i++){
if(i!= NowFrame) {
document.getElementById('ss' + i).style.background = "#e8e8e8";
document.getElementById('ss' + i).style.border = "1px #9d9d9d solid" ;
document.getElementById('ss' + i).style.color = "#000" ;
document.getElementById('show'+i).style.display = "none";
document.getElementById('show'+i+'_'+i).style.display = "none";
}
}
}
var test_interval= setInterval('fnToggle()', 3000);

复制代码

   好了，下面我来稍微的解释一下代码。首页加载，首执行setInterval 方法，设置定时器，然后赋值给test_interval这个变量，
之后会每隔3000毫秒，执行fnToggle方法，fnToggle方法就是说显示序号为几的图片，然后把其他的图片不显示。。

   但是这样会遇到一个问题，当我们鼠标点击的某一个图片，过了3000毫秒，还是会自动的切换图片，这个时候，我给div加了一个onmouseout事件，当失去了焦点，我清空定时器，在执行定时器，NowFrame是定义当前第几个序号，我们要在我们鼠标移到的那个div 赋值值，保持一致，这样当我们鼠标拿开的时候，还是会自动的切换，不会打乱顺序了。

  好了，大家赶紧试试哈。

转载自：http://www.csdnjava.com/forum.php?mod=viewthread&tid=739