js编写简单轮播图

╰+攻爆jí腚メ 2022-06-09 12:56 180阅读 0赞

效果如下

![Center][]

分4步去实现，我代码图片的名字是数字，有规律的的（1,2,3,4,5,6,7,8）

第一步：先让图片按着顺序开始切换,到最后一张（8）跳回第一张（1）

第二步：让 li 标签的数字跟着对应图片一起切换

第三步：当鼠标移入、移出图片时的事件

第四部：当鼠标移入、移出 li 标签时的事件

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>轮播图</title>
    	<style>
    		*{margin: 0;padding: 0}
    		#main{width: 490px;margin:100px auto;}
    		#main img{width: 100%; height: 300px;}
    		#main li{list-style: none;float: left;width:47px;border:1px solid orange;text-align: center;padding:6px;}
    	</style>
    	<script>
    		window.onload = function(){
    			//1、 自动轮播
    			var oImg = document.getElementsByTagName("img")[0];
    			//4.1、手动控制li
    			var oLis = document.getElementsByTagName("li");
    
    			var count = 1;
    			var changePic = function(){
    				//2、数字跟着图片一起
    				for(var i=0; i<oLis.length; i++){
    					oLis[i].style.background = '';
    				}
    				oLis[count-1].style.background = 'orange';
    				//图片自动
    				oImg.src = 'img/'+ count + '.jpg';
    				count++;
    				if(count==9){
    					count = 1;
    				}
    			};
    			var timer = setInterval(changePic, 1000);
    			//3、 鼠标移入到图片，清除计时器，鼠标离开时继续
    			oImg.onmouseover = function(){
    				clearInterval(timer);
    			}
    			oImg.onmouseout = function(){
    				clearInterval(timer);
    				timer = setInterval(changePic, 1000);//这里注意闭包
    			}
    			//4、监视每一个li标签
     			for(var i=0; i<oLis.length; i++){
     				// 给li标签加一个oindex属性
    				oLis[i].oindex = i;
     				oLis[i].onmouseover = function(){
     					clearInterval(timer);
     					count = this.oindex +1;
     					changePic();
     				}
    
     				oLis[i].onmouseout = function(){
     					clearInterval(timer);
    					timer = setInterval(changePic, 1000);
     				}
     			}
    		};
    	</script>
    </head>
    <body>
    	<div id="main">
    		<img src="imgs/1.jpg" alt="跑车">
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    			<li>6</li>
    			<li>7</li>
    			<li>8</li>
    		</ul>
    	</div>
    </body>
    </html>

[Center]: /images/20220609/1478dbc27c9b4316874a2975dfba68dd.png