JS---案例：简单轮播图
Posted jane_panyiyun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS---案例：简单轮播图相关的知识，希望对你有一定的参考价值。
案例：简单轮播图
div叫盒子，里面包了2个小盒子，一个是inner，一个是square
inner的div是放ul，里面有li，a，和图片
square的div里面放span，是轮播图的小点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: top } .box { width: 730px; height: 454px; margin: 100px auto; padding: 5px; border: 1px solid #ccc; } .inner { width: 730px; height: 454px; background-color: pink; overflow: hidden; position: relative; } .inner ul { width: 1000%; position: absolute; top: 0; left: 0; } .inner li { float: left; } .square { position: absolute; right: 10px; bottom: 10px; } .square span { display: inline-block; width: 16px; height: 16px; background-color: #fff; text-align: center; line-height: 16px; cursor: pointer; } .square span.current { background-color: orangered; color: #fff; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <!--相框--> <ul> <li><a href="#"><img src="images/1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/6.jpg" alt="" /></a></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </div> </div> <script src="common.js"></script> <script> //获取最外的div var box = my$("box"); //获取相框 var inner = box.children[0]; //获取相框的宽度 var imgWidth = inner.offsetWidth; //获取ul var ulObj = inner.children[0]; //获取所有span标签 var spanObjs = inner.children[1].children; //循环遍历所有的span标签，注册鼠标进入的事件 for (var i = 0; i < spanObjs.length; i++) { //循环的时候把索引值保存在每个span的自定义属性中 spanObjs[i].setAttribute("index", i); //注册鼠标进入事件 spanObjs[i].onmouseover = function () { //先干掉所有span的背景颜色 for (var j = 0; j < spanObjs.length; j++) { //移除每个span的类样式 spanObjs[j].removeAttribute("class"); } //设置当前额span背景颜色 this.className = "current"; //移动ul,每个图片的宽*鼠标放在此的按钮索引值 //获取当前鼠标进入的索引 var index = this.getAttribute("index"); animate(ulObj, -index * imgWidth); }; } </script> </body> </html>
以上是关于JS---案例：简单轮播图的主要内容，如果未能解决你的问题，请参考以下文章