JS“轮播图” - 爱码网

轮播图其实不难
主要运用了定时器、循环语句及鼠标事件
下面来看一下代码

<body>
	<div id="main">
		<ul id="pic">
			<li><img src="img/1.jpg" alt="dnf1"/></li>
			<li><img src="img/2.jpg" alt="dnf2"/></li>
			<li><img src="img/3.jpg" alt="dnf3"/></li>
			<li><img src="img/4.jpg" alt="dnf4"/></li>
			<li><img src="img/5.jpg" alt="dnf5"/></li>
			<li><img src="img/6.jpg" alt="dnf6"/></li>
			<li><img src="img/7.jpg" alt="dnf7"/></li>
		</ul>

//首先，在无序列表中插入图片，在css中设置好样式和初始化

		<ol id="tic">
			<li class="on">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ol>

//在有序列表中写入序号，以便后面鼠标事件的执行，同样需要设置初始化

	</div>
	<script>
		var pic=document.getElementById("pic");     
		var tic=document.getElementById("tic").getElementsByTagName("li");
		var main=document.getElementById("main")        //声明函数获取值
		var i=0;      //设置  i 的初始值为0
		var timer;    // 创建一个timer
		timer=setInterval(play,1000);  //**给timer加上定时器的属性，这里为每1000毫秒执行一次play事件**
		function play (){
			i++;
			if(i>=tic.length){
				i=0;
			}
			change(i);
		}
		function change (num){
			pic.style.marginLeft= -450*num+"px";       //**每次执行时，图片移动的距离**
			for(var j=0;j<tic.length;j++){
				tic[j].className="";
			}
			tic[num].className="on";				//**给有序列表赋上样式“on”**
		}
		main.onmouseover=function(){				//**鼠标移入事件**
			clearInterval(timer); 					//**清楚定时器**
		}
		main.onmouseout=function(){				//**鼠标移出事件**
			timer=setInterval(play,1000);			//**启动定时器**
		}
		for(let k=0;k<tic.length;k++){
			tic[k].onmouseover=function(){
				change(k);
			    i=k;
			}
		}
		
	</script>
</body>

JS“轮播图”

附上源代码：

轮播图

这些你看懂了吗？