div带图片定时切换详解

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

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

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

4 小时前 上传

下载附件 (11.06 KB)

   先看页面div的代码：

1. <div id="show1"><img src="${article.logo!}" width="342" height="228" /><div>
   
2. 
   
3. <div id="show2"><img src="${article.logo!}" width="342" height="228" /><div>
   
4. 
   
5. <div id="show3"><img src="${article.logo!}" width="342" height="228" /><div>
   
6. 
   
7. <div id="show4"><img src="${article.logo!}" width="342" height="228" /><div>

复制代码

在看序号的代码：

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

复制代码

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

1. ......
   
2. NowFrame = num;
   
3. clearInterval(test_interval);

复制代码

在看startInterval方法的代码：

1. function startInterval(){
   
2. clearInterval(test_interval);
   
3. test_interval= setInterval('fnToggle()', 3000);
   
4. 
   
5. 
   
6. }

复制代码

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

1. var NowFrame = 0;
   
2. var MaxFrame = 5;
   
3. var bStart = 0;
   
4. // show1_1 ss1
   
5. function fnToggle() {
   
6. NowFrame = NowFrame+1 ;
   
7. if(NowFrame == 6){
   
8. NowFrame=1;
   
9. }
   
10. 
    
11. document.getElementById('ss' + NowFrame).style.background = "#970204";
    
12. document.getElementById('ss' + NowFrame).style.color = "#fff";
    
13. document.getElementById('show'+NowFrame).style.display = "";
    
14. document.getElementById('show'+NowFrame+'_'+NowFrame).style.display = "";
    
15. 
    
16. for(var i=1;i<=MaxFrame;i++){
    
17. if(i!= NowFrame) {
    
18. document.getElementById('ss' + i).style.background = "#e8e8e8";
    
19. document.getElementById('ss' + i).style.border = "1px #9d9d9d solid" ;
    
20. document.getElementById('ss' + i).style.color = "#000" ;
    
21. document.getElementById('show'+i).style.display = "none";
    
22. document.getElementById('show'+i+'_'+i).style.display = "none";
    
23. }
    
24. }
    
25. }
    
26. 
    
27. 
    
28. 
    
29. 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