js 图片幻灯轮换

我在网站搜几种轮换图片效果总结：

方案如下：

1.鼠标放上去进行切换：

代码：(document).ready(function(){     

    $(".clickButton a").attr("href","javascript:return false;");  

    $(".clickButton a").each(function(index){             

        $(this).click(function(){  

            changeImage(this,index);      

       });           

    });   

    autoChangeImage();        

});  

 

function autoChangeImage(){  

    for(var i = 0; i<=10000;i++){  

        window.setTimeout("clickButton("+(i%5+1)+")",i*3000);             

   }  

}  

 

function clickButton(index){  

    $(".clickButton a:nth-child("+index+")").click();  

}  

 

function changeImage(element,index){  

    var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  

    $(".clickButton a").removeClass("active");  

    $(element).addClass("active");  

   $(".imgs img").attr("src",arryImgs[index]);  

} 

$(document).ready(function(){        

         $(".clickButton a").attr("href","javascript:return false;");

         $(".clickButton a").each(function(index){                          

                   $(this).click(function(){

                            changeImage(this,index);       

                   });                       

         });    

         autoChangeImage();                

});

 

function autoChangeImage(){

         for(var i = 0; i<=10000;i++){

                   window.setTimeout("clickButton("+(i%5+1)+")",i*3000);                        

         }

}

 

function clickButton(index){

         $(".clickButton a:nth-child("+index+")").click();

}

 

function changeImage(element,index){

         var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];

         $(".clickButton a").removeClass("active");

         $(element).addClass("active");

         $(".imgs img").attr("src",arryImgs[index]);

}

2. 鼠标停留：

$(document).ready(function(){  

 Var arryImgs= ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  

    $(".clickButton a").attr("href","javascript:return false;");   

    var times = 1;  

    function changeImage(){  

        if (times == 6) {  

           times = 1;  

        }  

        $(".clickButton a").removeClass("active");  

       $(".clickButton a:nth-child(" + times + ")").addClass("active");  

       $(".imgs img").attr("src",arryImgs[times-1]);  

       times++;  

   }  

   var interval = window.setInterval(function(){  

        changeImage();  

    }, 1500);  

    $(".clickButton a").each(function(index){  

       $(this).hover(  

            function(){  

               $(".clickButton a").removeClass("active");  

               $(this).addClass("active");  

                clearInterval(interval);  

               $(".imgs img").attr("src",arryImgs[index]);  

                times = index+1;      

            },  

            function(){  

                interval = window.setInterval(function(){  

                   changeImage();  

                }, 1500);     

            });   

    });  

})

3. javaeye论坛首页左上角也有类似效果，是我自己基于prototype js土制的，直接用很暴力的方法set innerHTML了，抛砖一下，要考虑到重用的话，需要将这些var和function用面向对象的方式封装一下:  

         var current_index = 0;  

         var s_adverts = []; #html array here  

          

         Event.observe(window,'load',function() {  

           show_slide(0);  

           new PeriodicalExecuter(show_slide, 10);  

         });  

          

         function show_slide(s_index) {  

           if(typeof(s_index) != 'number') s_index = current_index + 1;  

           if(s_index >= s_adverts.length) s_index = 0;  

             

           $("slides").innerHTML = s_adverts[s_index];  

           var s_pagination = s_adverts.inject("<span class='pagination'>", function(memo, value, i) {  

             return memo + (s_index == i ? "<span class='current'>" + (i + 1) + "</span>" : "<a href='#' onclick='show_slide(" + i + ");return false;'>" + (i + 1) + "</a>");  

           }) + "</span>";  

          

          

           $("slides").insert(s_pagination);  

          

           current_index = s_index;  

         } 

 

4.焦点在数字上面图片还会轮换，我写了个纯JS版的,鼠标放上去后停止轮换。

<script language="JavaScript" type="text/javascript">  

   window.onload = function(){  

        var array = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"];  

        var times = 1;  

        function changeIMG(){  

            if (times == 5) {  

              times = 0;  

           }  

           for (i = 0; i < document.getElementById("links").getElementsByTagName("A").length; i++) {  

                document.getElementById("links").getElementsByTagName("A")[i].className = "";  

            }  

            document.getElementById("links").getElementsByTagName("A")[times].className = "active";  

            document.getElementById("pic").src = array[times];  

            times++;  

       }  

          

        var interval = window.setInterval(function(){  

            changeIMG();  

        }, 1500);  

       document.getElementById("links").onmouseover = function(event){  

            event = event ? event : window.event  

            var obj = event.srcElement ? event.srcElement : event.target;  

            if (obj.tagName == "A") {  

                for (i = 0; i < document.getElementById("links").getElementsByTagName("A").length; i++) {  

                    document.getElementById("links").getElementsByTagName("A")[i].className = "";  

                }  

               obj.className = "active";  

                clearInterval(interval);  

                document.getElementById("pic").src = array[Number(obj.innerHTML) - 1];  

            }  

      }  

        document.getElementById("links").onmouseout = function(event){  

            event = event ? event : window.event  

            var obj = event.srcElement ? event.srcElement : event.target;  

            if (obj.tagName == "A") {  

                interval = window.setInterval(function(){  

                    changeIMG();  

                }, 1500);  

            }  

        }  

    }  

 

</script>   

原文：http://www.iteye.com/topic/294668 地址有相关的示例，可以下载查看