序

轮播图片出现在各大网站。基本上，人们进入任何一个网站，首先看到的都是轮播图片，三两张，有的数量更多。这些就是网站建设中所谓的横幅广告轮播图，而这些信息往往是浏览网页时的第一眼，所以这些轮播广告图可以作为网站建设中至关重要的元素。首页banner广告轮播的存在不仅起到了装饰网站的作用，它带来的网络营销效果才是真正的存在价值。

淘宝转盘图

JD.COM旋转木马地图

天猫转盘图

所以在网站建设过程中，网站的横幅图一定要精心设计，不能敷衍了事。横幅图的数量和轮播的交互方式要慎重考虑。美观固然重要，但用户体验和广告图带来的营销效果也要考虑进去。我们一直认为首页轮播广告图在整个网站建设中的重要性是不可忽视的。

我给你提供一个纯Js轮播图的样本代码，你可以在此基础上进行改进，包括指示器样式，容器大小，按钮样式，轮播时间等等。代码通俗易懂，Js部分逻辑清晰。朋友们，赶快行动起来，创造自己的风格吧！！

我给你举一个转盘图的例子。

01 CSS代码

<style> *{ list-style: none; } #wrap { width: 590px; height: 470px; ***rgin: 150px auto; position: relative; cursor: pointer; } #pic li { display: none; position: absolute; top: 0; left: 0; z-index: 1; } #num { position: absolute; z-index: 2; bottom: 20px; left: 46px; } #num li { float: left; width: 8px; height: 8px; ***rgin: 5px; border-radius: 50%; border: 1px solid #FFFFFF; line-height: 20px; background: transparent; text-align: center; } #num li.active { background: #fefefe; } .arrow { z-index: 3; height: 40px; width: 30px; position: absolute; top: 45%; line-height: 40px; background: rgba(0, 0, 0, 0.3); text-align: center; display: none; } #wrap:hover .arrow { display: block; } .arrow:hover { background: rgba(0, 0, 0, 0.7); } #left { left: 0; } #right { right: 0; } </style>

02 HTML代码

<!--轮播图开始注意这里的图片路径，要使用自己的图片路径哦--> <div id="wrap"> <ul id="pic"> <li style="display: none;"><img src="i***ges/f7a4711ce9487466.jpg" alt=""></li> <li style="display: none;"><img src="i***ges/ecc8690ae254c16f.jpg" alt=""></li> <li style="display: block;"><img src="i***ges/46cdcd636c8608e2.jpg" alt=""></li> <li style="display: none;"><img src="i***ges/79dd3ce6165857f7.jpg" alt=""></li> <li style="display: none;"><img src="i***ges/b31ec8402a42fbb3.jpg" alt=""></li> <li style="display: none;"><img src="i***ges/93c8a83baeaa7f49.jpg" alt=""></li> <li style="display: none;"><img src="i***ges/cf5237***98ccd27.jpg" alt=""></li> </ul> <ul id="num"> <li class="active"></li> <li class=""></li> <li class=""></li> <li class=""></li> <li class=""></li> <li class=""></li> <li class=""></li> </ul> <a href="javascript:;" class="arrow" id="left"><</a> <a href="javascript:;" class="arrow" id="right">></a> </div>

0js代码

<script type="text/javascript"> function $(id) { return document.getElementById(id); } window.onload = function() { var oLeft = $("left"); var oRight = $("right"); var index = 0; var timer = null; var pic = $("pic").getElementsByTagName("li"); var num = $("num").getElementsByTagName("li"); var oDiv = $("wrap"); oRight.onclick = function() { index++; if (index >= pic.length) { index = 0; } change(index); } oLeft.onclick = function() { index--; if (index < 0) { index = pic.length - 1; } change(index); } oDiv.onmouseover = function() { clearInterval(timer); } oDiv.onmouseout = function() { timer = setInterval(run, 2000); //鼠标移出后重新开始定时器 } timer = setInterval(run, 4000); //定时器 function run() { //用于定时器的函数 index++; if (index >= pic.length) { index = 0; } change(index); } for (var i = 0; i < num.length; i++) { num[i].index = i; //把索引值存起来 num[i].onmouseover = function() { change(this.index); } } function change(curindex) { //用于切换图片的函数 for (var i = 0; i < pic.length; i++) { pic[i].style.display = "none"; num[i].className = ""; } pic[curindex].style.display = "block"; num[curindex].className = "active"; index = curindex; } } </script>