码迷,mamicode.com
首页 > 其他好文 > 详细

图片轮播

时间:2015-06-08 18:44:54      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:

var viwepager = document.getElementById("viwepager");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
	var arr=new Array();
	arr[0]="../pic/viwepager1.png";//放图片地址
	arr[1]="../pic/icon.png";
	arr[2]="../pic/id.png";
	arr[3]="../pic/search.png"
	var num=0;
	var timer = null;
	timer = setInterval(turnpic,2000); //每隔4秒转换图片
	function turnpic(){
   		var viwepager = document.getElementById("viwepager");
   		if(num==arr.length-1)
        	num=0;
   		else
        	num+=1;
   		viwepager.src=arr[num];
	}
var lis = document.getElementById("viwepager_icon").childNodes;
lis[num].onmouseover = function (){
	clearTimeout( timer );
};
lis[num].onmouseout = timer;
function start_lis() {
	viwepager.src = arr[num];


}
start_lis();
for(var i=0;i<lis.length;i++){
	lis[i].index = i;
	lis[i].onmouseover=function(){
		num = this.index;
		start_lis();
	};
}
prev.onclick= function(){
	num --;
	if(num == -1){
		num = arr.length-1
	}
	start_lis();
};

next.onclick = function(){
	num ++;
	if(num == arr.length){
		num = 0;
	}
	start_lis();
};

  

图片轮播

标签:

原文地址:http://www.cnblogs.com/hugh0510/p/4561386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!