---恢复内容开始---
- 效果图说明：当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上，并且按钮会以高亮显示
- 项目目录结构
- 用到的js封装的animate()动画
function animate(element, target) { clearInterval(element.timeId); //定时器的id值存储到对象的一个属性中 element.timeId = setInterval(function () { //获取元素的当前的位置,数字类型 var current = element.offsetLeft; //每次移动的距离 var step = 10; step = current < target ? step : -step; //当前移动到位置 current += step; if (Math.abs(current - target) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定时器 clearInterval(element.timeId); //直接到达目标 element.style.left = target + "px"; } }, 20); }
- 简单轮播图代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</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="animate.js"type="text/javascript"></script> <script> /*我们需要操作： 当点击右下角按钮时对应的图片移动 1.需要获取ul的宽度 2.需要获取每个li的宽度 3.获取相框的宽度 4.获取右下角的span，并且为每个span注册鼠标移入和移除 */ //获取最外面的div var oDiv=document.getElementById('box'); //获取inner由于inner没有用id所有我们用children的方式 var inner=oDiv.children[0]; //获取ul以及他的宽度 var oUl=inner.children[0]; //获取相框的宽度 var imgWidth=inner.offsetWidth; var oLi=oUl.children; //获取sapn var oSpan=inner.children[1].children; /*为每个span注册鼠标进入的事件,并且鼠标进入时，对应的地方会显示高亮，这里用排他 排他功能：就是先将全部的属性移除，然后在某个上面加上特有的current属性 */ for(var i=0;i<oSpan.length;i++){ //由于每循环一次i就会变，所以先保存下来 //循环的时候把索引值保存在每个span的自定义属性中 oSpan[i].setAttribute("index",i); oSpan[i].onmouseover=function(){ for(var j=0;j<oSpan.length;j++){ //先去掉其他属性 oSpan[j].removeAttribute('class'); } this.className="current"; //移动ul:不管是向左移动还是向右移动ul的left总负的，最大也只可能为0, //获取当前鼠标进入的span的索引 var index=this.getAttribute("index"); animate(oUl,-index*imgWidth); } } </script> </body> </html>
- 轮播图的基本实现（排他功能，用相框的宽度求出移动的距离）
思路理解：
当鼠标放到按钮上的时候，ul移出去的距离为=相框宽度*按钮的下标
根据上面接下来获取需要用到的元素对象：
//获取最外面的div
var oDiv=document.getElementById('box');
//获取inner由于inner没有用id所有我们用children的方式
var inner=oDiv.children[0];
//获取ul以及他的宽度
var oUl=inner.children[0];
//获取相框的宽度
var imgWidth=inner.offsetWidth;
var oLi=oUl.children;
//获取sapn
var oSpan=inner.children[1].children;
遍历每个li,并且做排他功能功能
for(var i=0;i<oSpan.length;i++){ //由于每循环一次i就会变，所以先保存下来 //循环的时候把索引值保存在每个span的自定义属性中， oSpan[i].setAttribute("index",i); oSpan[i].onmouseover=function(){ for(var j=0;j<oSpan.length;j++){ //先去掉其他属性 oSpan[j].removeAttribute('class'); } this.className="current"; //移动ul:不管是向左移动还是向右移动ul的left总负的，最大也只可能为0, //获取当前鼠标进入的span的索引 var index=this.getAttribute("index"); animate(oUl,-index*imgWidth); } }
---恢复内容结束---