---恢复内容开始---
- 效果图说明：当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上，并且按钮会以高亮显示
- 项目目录结构
- 用到的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);
}
animate.js
- 简单轮播图代码
<!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="data:images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""/></a></li>
<li><a href="#"><img src="data: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>
简单轮播图.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);
}
}
---恢复内容结束---