js图片轮换效果（一）

常常在各大网站上看到如下图所示的图片轮换效果，有的是用flash做的，有的是用js做的。

我就google一下，发现用js写的图片轮换效果例子是不少，可惜要么太繁琐，要么连页面都打不开

于是自己试了试，写了一个，代码很少。



js如下：

$(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]);
}

鼠标停留版（参考malk的js改写的）：

$(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);	
			}); 
	});
})  

评论

18 楼 zhouky4665 2009-01-09  

我刚弄了一个，跟楼主的差不多！

17 楼 ice-cream 2009-01-08  

myyate 写道

提个建议：一般我随机点击某个button，后面自动变换应该是刚刚点击button后一个。
比如，我点击了【4】，那么自动跳转应该从【5】开始，而你这个是各变各的。

你看的是以前的版本，而你要的效果是应该看我修改后的"display_imgs_鼠标停留版_.zip"这个文件，或者看楼上ninecat同学的

16 楼 myyate 2009-01-08  

提个建议：一般我随机点击某个button，后面自动变换应该是刚刚点击button后一个。
比如，我点击了【4】，那么自动跳转应该从【5】开始，而你这个是各变各的。

15 楼 InnocentBoy 2009-01-08  

这么勤学的MM，支持下。

14 楼 wazhyu 2009-01-08  

正好需要。谢谢楼主和大家的分享。

13 楼 srdrm 2009-01-08  

哇塞,太佩服大家了! 赞一个!

大家可以做一个插件出来吗?? jquery 插件哦. 这样不是更模块化吗

有空我弄一个, 看今天的工作完成情况

12 楼 ninecat 2009-01-08  

<p>在ice-cream 的基础上修改了下，鼠标悬停在图片上停止轮换</p>
<pre name='code' class='Javascript'>&lt;script language="JavaScript" type="text/javascript"&gt;
$(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);
$(".imgs img").hover(
function(){
clearInterval(interval);
},
function(){
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);
});
});
}) 
&lt;/script&gt;
</pre>
<p> </p>

11 楼 ice-cream 2009-01-07  

把malk的js实现改写成jquery了，见主贴。

10 楼 ice-cream 2009-01-03  

hanjs 写道

event = event ? event : window.event
这个是什么意思啊？

这样写是为了兼容浏览器，看看网上的解释
http://www.iteye.com/topic/47917?page=1
http://topic.csdn.net/u/20070725/10/38ecd6ed-9245-470e-9682-1f5ef3a5b037.html

9 楼 hanjs 2008-12-30  

还是ls的代码能看的懂，其他的看起来很费力。

event = event ? event : window.event
这个是什么意思啊？

8 楼 malk 2008-12-26  

焦点在数字上面图片还会轮换，我写了个纯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>

7 楼 lndalian2000 2008-12-17  

太厉害了啊.

学习一下.

6 楼 aficbl 2008-12-17  

可以再扩展一下，鼠标放上去后停止轮换。

5 楼 上一站，火星 2008-12-17  

以前在网上找的一种比较恶的实现

http://www.iteye.com/problems/6898

4 楼 QuakeWang 2008-12-16  

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;
    }

3 楼 ice-cream 2008-12-16  

fins 写道

ice啊 你真厉害啊 像你这么勤思考爱动手的mm程序员太少了
难怪 马丁叔叔那么欣赏你 

你太抬举我了，不用每次都夸奖我，呵呵。
我也是处在学习的阶段

2 楼 fins 2008-12-16  

ice啊 你真厉害啊 像你这么勤思考爱动手的mm程序员太少了
难怪 马丁叔叔那么欣赏你 

1 楼 xuyao 2008-12-16  

不错，不过那个js要放到后面，否在在ie8中要报错。可能是ie8加载的时候没有等到document加载后再ready。具体会包“return flase”在函数之外的错误。。。