问答详情
源自:4-1 焦点轮播图效果

完成啦!

哈哈,虽然我比计较笨,但是还是靠自己百度和理解解决问题啦!

提问者:Daniel_ 2014-11-27 22:10

个回答

  • michael_sofield
    2014-12-12 18:08:23

    var wrap = document.getElementById('wrap'),
    		pic = document.getElementById('pic'),
    		list = document.getElementById('list').getElementsByTagName('li'),
    		index = 0,
    		timer = null;
    	var alength = list.length;
    	var piclist = pic.getElementsByTagName('li');
    	timer = setInterval(autoplay, 1000);
    	for (var i = 0; i < alength; i++) {
    		list[i].aa = i;
    		list[i].onmouseover = function() {
    			clearInterval(timer);
    			var thisid = this.aa;
    			showpic(thisid);
    		};
    		list[i].onmouseout = function() {
    			timer = setInterval(autoplay, 1000);
    		}
    
    	}
    
    	function autoplay() {
    		index++;
    		if (index >= alength) {
    			index = 0;
    		}
    		showpic(index);
    	}
    
    	function showpic(curindex) {
    			if (curindex > alength) {
    				curindex = 0;
    			}
    			for (var i = 0; i < alength; i++) {
    				list[i].className = " ";
    				piclist[i].style.display = "none";
    			}
    			list[curindex].className = "on";
    			piclist[curindex].style.display = "block";
    			index = curindex;
    	}