1 <!DOCTYPE html> 2 <html lang="cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 #banner{ 13 width: 300px; 14 height: 600px; 15 margin: 0 auto; 16 } 17 #play{ 18 width: 300px; 19 height: 600px; 20 z-index: 999; 21 position: relative; 22 } 23 #imglist img{ 24 width: 400px; 25 height: 600px; 26 } 27 #iconlist{ 28 position: absolute; 29 right: 0px; 30 bottom: 10px; 31 } 32 #iconlist li{ 33 float: left; 34 width: 30px; 35 height: 30px; 36 margin-right: 15px; 37 background-color: rgba(0,0,0,0.5); 38 text-align: center; 39 line-height: 30px; 40 border-radius: 50%; 41 color: #fff; 42 cursor: pointer; 43 } 44 </style> 45 </head> 46 <body> 47 <div id="banner"> 48 <div id="play"> 49 <div id="imglist"> 50 <a href="#"><img src="./imgs/1.jpg" style="display:block;"></a> 51 <a href="#"><img src="./imgs/2.jpg" style="display:none;"></a> 52 <a href="#"><img src="./imgs/3.jpg" style="display:none;"></a> 53 <a href="#"><img src="./imgs/4.jpg" style="display:none;"></a> 54 <a href="#"><img src="./imgs/5.jpg" style="display:none;"></a> 55 </div> 56 <div id="iconlist"> 57 <ul> 58 <li style="background-color: #f00;">1</li> 59 <li>2</li> 60 <li>3</li> 61 <li>4</li> 62 <li>5</li> 63 </ul> 64 </div> 65 </div> 66 </div> 67 68 <script> 69 70 // 获取 71 var play = document.getElementById(‘play‘); 72 var imglist = play.getElementsByTagName(‘img‘); 73 var iconlist = play.getElementsByTagName(‘li‘); 74 75 // 设置循环 76 var m = 1; 77 function run() { 78 if (m > 4) { 79 m = 0; 80 } 81 img(m); 82 icon(m); 83 m++; 84 } 85 86 // 1秒 87 var timer = setInterval(run, 1000); 88 89 // 图片的 90 function img(m) { 91 for (var i = 0; i < imglist.length; i++) { 92 imglist[i].style.display = ‘none‘; 93 } 94 imglist[m].style.display = ‘block‘; 95 } 96 97 // 数字的 98 function icon(m) { 99 for (var i = 0; i < iconlist.length; i++) { 100 iconlist[i].style.backgroundColor = ‘rgba(0,0,0,0.5)‘; 101 } 102 iconlist[m].style.backgroundColor = ‘#f00‘; 103 } 104 105 // 鼠标移入时清除定时 106 play.onmouseover = function () { 107 clearInterval(timer); 108 } 109 110 鼠标移走时调用定时，并且是执行当前页面的下一页 111 play.onmouseout = function () { 112 timer = setInterval(run, 3000); 113 } 114 115 // 循环绑定事件 116 for (var i = 0; i < iconlist.length; i++) { 117 (function(i){ 118 iconlist[i].onmouseover = function() { 119 img(i); 120 icon(i); 121 m = i + 1; 122 } 123 })(i); 124 } 125 126 </script> 127 </body> 128 </html>
这是一个用js做的一个带有对应数字图片的轮播图，img的 src 自己导入一下即可， 刚学js不久，自己做的一些小特效。有什么不足，望大神指点 。
----- 想成为大牛的菜鸟
原文：https://www.cnblogs.com/qbhgy/p/9594096.html