?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不久，自己做的一些小特效。有什么不足，望大神指点 。
----- ?想成为大牛的菜鸟
JS -- 轮播图
原文地址：https://www.cnblogs.com/qbhgy/p/9594096.html