offset家族:
* offsetWidth/offsetHeight:检测盒子的宽高:width+padding+border;
* offsetLeft/offsetTop:检测盒子距离有定位的父元素的距离
* offsetParent:盒子的有定位的父元素
先封装一个移动的函数:
function animate(obj,target) {
clearInterval(obj.timer);
//匀速动画原理:物体当前位置 = 物体原来的位置+步长(leader = obj.offsetLeft+speed)
obj.timer = setInterval(function () {
//一次走10px
//到target就停下来
//我是希望不管obj原来在哪里都能到达target
// if(obj.offsetLeft>target){
// var speed = -10;
// }else{
// var speed = 10;
// }
var speed = (obj.offsetLeft>target?-20:20);
if(Math.abs(obj.offsetLeft-target)<20){
//就是物体原来位置距离目标不到一步,直接一步到target
obj.style.left = target+"px";
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft+speed+"px";
}
},20)
}
具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 730px;
height: 454px;
margin: 100px auto;
position: relative;
box-shadow: 0 0 10px 2px #ccc;
overflow: hidden;
}
ul.img {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
ul.img li {
list-style: none;
float: left;
}
ul.point {
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -75px;
}
ul.point li {
float: left;
margin: 0 5px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background: pink;
list-style: none;
cursor: pointer;
border-radius: 50%;
}
ul.point li.now {
background: red;
color: #fff;
}
.arrow {
position: absolute;
left: 0;
width: 100%;
top: 50%;
margin-top: -25px;
color: white;
}
.arrow li {
list-style: none;
width: 35px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
background: rgba(0, 0, 0, .2);
cursor: pointer;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
<script src="myjq.js"></script>
</head>
<body>
<div>
<ul class="img">
<li><img src="img/22.jpg"></li>
<li><img src="img/33.jpg"></li>
<li><img src="img/44.jpg"></li>
<li><img src="img/55.jpg"></li>
<li><img src="img/66.jpg"></li>
</ul>
<ul class="point">
</ul>
<ul class="arrow">
<li class="left"><</li>
<li class="right">></li>
</ul>
</div>
<script type="text/javascript">
//需求分析:
//1、在最后一幅图后面添加第一幅图
//2、我们必须动态添加小圆点,同时点亮第一个
//3、点击小圆点,ul移动到相应的图片
//4、同时点亮小圆点
//5、左右箭头切换图片
//6、添加自动轮播功能
var box=document.getElementsByTagName("div")[0];
var imgul=box.children[0];//图片ul
var point=box.children[1];//小圆点ul
var arrow=box.children[2];//左右键ul
var previous=arrow.getElementsByTagName("li")[0];//上一张
var next=arrow.getElementsByTagName("li")[1];//下一张
var index=0;
//1、在最后一幅图后面添加第一幅图
var lastli=imgul.children[0].cloneNode(true);
imgul.appendChild(lastli);
var imglis=imgul.children;
//2、我们必须动态添加小圆点,同时点亮第一个
for(var i=1;i<imgul.children.length;i++){
var li=document.createElement("li");
li.innerHTML=i;
point.appendChild(li);
}
var points = point.children;//小圆点的集合
points[0].className="now";
//3、点击小圆点,ul移动到相应的图片
//4、同时点亮小圆点
//点亮小图标函数
function light(){
for(var i=0;i<points.length;i++){
points[i].className="";
}
if(index>4){
points[0].className="now";
}else{
points[index].className="now";
}
}
for(var j=0;j<points.length;j++){
points[j].index=j;
points[j].onclick=function(){
index=this.index;
animate(imgul,-box.offsetWidth*index);
light();
}
}
//5、左右箭头切换图片
next.onclick=autoplay;
function autoplay(){
index++;
if(index>imglis.length-1){
imgul.style.left=0;//直接跳到第一張圖
index=1;//進行第二張圖的移動
}
animate(imgul,-box.offsetWidth*index);
light();
}
previous.onclick=function(){
index--;
if(index<0){
imgul.style.left=-box.offsetWidth*(imglis.length-1)+"px";//相当于跳到最后一张图,然后再移动
index=imglis.length-2;//移动前,把index设为即将显示的倒数第二张图,然后再移动
}
animate(imgul,-box.offsetWidth*index);
light();
}
//6、添加自动轮播功能
var timer=setInterval(autoplay,2000);
box.onmouseover=function(){
clearInterval(timer);
}
box.onmouseout=function(){
clearInterval(timer);
timer=setInterval(autoplay,2000);
}
</script>
</body>
</html>
如果有错误,欢迎指出。