该循环播放用到了jquery,所以在head标签里边应该加入：
<script type="text/JavaScript" src="js/jQuery-3.2.1.min.js"></script>
以下是详细代码：
- html代码
1 <div id="lunbobox"> 2 <div class="lunbo"> 3 <a href="#"><img src="images/1.jpg"></a> 4 <a href="#"><img src="images/2.jpg"></a> 5 <a href="#"><img src="images/3.jpg"></a> 6 </div> 7 <ul> 8 <li></li> 9 <li></li> 10 <li></li> 11 </ul> 12 <span></span> 13 </div>
- css代码
1 #lunbobox { 2 720px; 3 height:260px; 4 position:relative; 5 } 6 .lunbo { 7 720px; 8 height:260px; 9 margin-top: 4px; 10 } 11 .lunbo img { 12 720px; 13 height:270px; 14 position:absolute; 15 top:0px; 16 left:0px; 17 } 18 #lunbobox ul { 19 285px; 20 position:absolute; 21 bottom:1px; 22 right:100px; 23 } 24 #lunbobox ul li { 25 cursor:pointer; 26 10px; 27 height:10px; 28 border-radius: 10px; 29 border:1px solid #cccccc; 30 float:left; 31 list-style:none; 32 background:transparent; 33 text-align:center; 34 margin:0px 5px 0px 0px; 35 }
- js代码
1 var t; 2 var index = 0; 3 /////自动播放 4 t = setInterval(play, 3500) 5 function play() { 6 index++; 7 if (index > 2) { 8 index = 0 9 } 10 // console.log(index) 11 $("#lunbobox ul li").eq(index).css({ 12 "background": "#ffffff", 13 "border": "1px solid #ffffff" 14 }).siblings().css({ 15 "background": "transparent", 16 }) 17 $(".lunbo a ").eq(index).fadeIn(850).siblings().fadeOut(850); 18 }; 19 20 ///点击鼠标 图片切换 21 $("#lunbobox ul li").click(function() { 22 $(this).css({ 23 "background": "#ffffff", 24 "border": "1px solid #ffffff" 25 }).siblings().css({ 26 "background": "transparent" 27 }) 28 var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的 29 $(".lunbo a ").eq(index).fadeIn(850).siblings().fadeOut(850); // siblings 找到 兄弟节点(不包括自己） 30 }); 31 32 //鼠标移进 移出 33 $("#lunbobox ul li,.lunbo a img").hover( 34 ////////鼠标移进 35 function() { 36 clearInterval(t); 37 }, 38 //鼠标移开 39 function() { 40 t = setInterval(play, 3500) 41 function play() { 42 index++; 43 if (index > 2) { 44 index = 0 45 } 46 $("#lunbobox ul li").eq(index).css({ 47 "background": "#ffffff", 48 "border": "1px solid #ffffff" 49 }).siblings().css({ 50 "background": "transparent" 51 }) 52 $(".lunbo a ").eq(index).fadeIn(850).siblings().fadeOut(850); 53 } 54 })