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

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

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

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

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

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

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

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

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

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

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