焦点轮播图特效就是几张图片滚动播放,本次博客是对其学习的资料进行总结回顾。
下面为全部代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
.papertop-image {
position: relative;
width: 568px;
height: 306px;
margin-left: 10px;
border: 1px solid #e8e8e8;
overflow: hidden;
}
.papertop-image .papertopList {
width: 3976px;
height: 306px;
left: -568px;
z-index: 1;
position: absolute;
}
.papertop-image .papertopList a img {
display: inline-block;
float: left;
width: 568px;
height: 306px;
}
.papertop-image .papertopBtnleft {
position: absolute;
z-index: 2;
left: 0;
top: 50%;
margin-top: -25px;
cursor: pointer;
background: url(btnleft.png) -10px -5px no-repeat;
width: 40px;
height: 50px;
}
.papertop-image .papertopBtnleft:hover {
background: url(btnleft.png) -10px -65px no-repeat;
}
.papertop-image .papertopBtnright:hover {
background: url(btnright.png) -10px -65px no-repeat;
}
.papertop-image .papertopBtnright {
position: absolute;
z-index: 2;
right: 0;
top: 50%;
margin-top: -25px;
cursor: pointer;
background: url(btnright.png) -10px -5px no-repeat;
width: 40px;
height: 50px;
}
.papertop-image .papertopBtns {
position: absolute;
text-align: center;
bottom: 15px;
width: 100%;
z-index: 2;
}
.papertop-image .papertopBtns span {
display: inline-block;
cursor: pointer;
width: 39px;
height: 7px;
margin: 0 6px;
background: url(btnwhite.jpg) center center no-repeat;
}
.papertop-image .papertopBtns .greenbtn {
background: url(btngreen.jpg) center center no-repeat;
}
</style>
</head>
<div class="page">
<div class="papertop-image">
<div class="papertopList">
<a href=""><img src="images/jobpath.jpg" alt=""></a>
<a href=""><img src="images/daili.jpg" alt=""></a>
<a href=""><img src="images/anzhuo.jpg" alt=""></a>
<a href=""><img src="images/qianduan.jpg" alt=""></a>
<a href=""><img src="images/javadujia.jpg" alt=""></a>
<a href=""><img src="images/jobpath.jpg" alt=""></a>
<a href=""><img src="images/daili.jpg" alt=""></a>
</div>
<span class="papertopBtnleft"></span>
<span class="papertopBtnright"></span>
<div class="papertopBtns">
<span index="1" class="greenbtn"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).on("load", function() {
var list = $(".papertopList");
var left = $(".papertopBtnleft");
var right = $(".papertopBtnright");
var btns = $(".papertopBtns>span");
var index = 1;
var moved = false;
var timer;
function gbtn() {
for (var i = 0; i < btns.length; i++) {
if (btns[i].className == "greenbtn") {
btns[i].className = "";
break;
}
};
btns[index - 1].className = "greenbtn";
}
function move(num) {
moved = true;
var newLeft = parseInt(list.css("left")) + num;
var time = 600; //位移总时间
var interval = 10; //位移间隔时间
var speed = num / (time / interval); //每次位移量
function go() {
if ((speed < 0 && parseInt(list.css("left")) > newLeft) || (speed > 0 && parseInt(list.css("left")) < newLeft)) {
list.css("left", parseInt(list.css("left")) + speed + 'px');
setTimeout(go, interval);
} else {
moved = false;
list.css("left", newLeft + 'px');
if (newLeft > -568) {
list.css("left", -2840 + 'px');
}
if (newLeft < -2840) {
list.css("left", -568 + 'px');
}
}
};
go();
}
function play() {
timer = setInterval(function() {
right.click();
}, 3000);
}
function stoproll() {
clearInterval(timer);
}
left.click(function() {
if (index == 1) {
index = 5
} else {
index -= 1;
}
gbtn();
if (!moved) {
move(568);
};
})
right.click(function() {
if (index == 5) {
index = 1;
} else {
index += 1;
}
gbtn();
if (!moved) {
move(-568);
};
})
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
console.log(myIndex)
if (this.className == "greenbtn") {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -568 * (myIndex - index);
if (!moved) {
move(offset);
}
index = myIndex;
gbtn()
}
}
// 自动轮播
$(".papertop-image").mouseover(function() {
stoproll();
});
$(".papertop-image").mouseout(function() {
play();
});
play()
})
</script>
<body>
</body>
</html>
下面经行代码逐段分析:
1.样式布局关键代码:
.papertop-image { position:relative; overflow:hidden; }
.papertop-list { position:absolute; z-index:1; left:-568px;}
.btns+.btnleft+.btnright { z-index:2; }
2.左右按钮点击滚动:
function move(num) {
moved = true;
var newLeft = parseInt(list.css("left")) + num; /*常用变量做存储使用*/
var time = 600; /*位移总时间*/
var interval = 10; /*位移间隔时间*/
var speed = num / (time / interval); /*每次位移量*/
//绑定点击事件
function go() {
//递归实现动画功能
if ((speed < 0 && parseInt(list.css("left")) > newLeft) || (speed > 0 && parseInt(list.css("left")) < newLeft)) {
list.css("left", parseInt(list.css("left")) + speed + 'px');
setTimeout(go, interval);
} else {
moved = false;
list.css("left", newLeft + 'px');
//判断是否滚动到附属图上
if (newLeft > -568) {
list.css("left", -2840 + 'px');
}
if (newLeft < -2840) {
list.css("left", -568 + 'px');
}
}
};
go();
}
//点击时向左移动568像素
left.click(function() {
if (index == 1) {
index = 5
} else {
index -= 1;
}
gbtn();
if (!moved) {
move(568);
};
})
//点击时向右移动568像素
right.click(function() {
if (index == 5) {
index = 1;
} else {
index += 1;
}
gbtn();
if (!moved) {
move(-568);
};
})
3.底部按钮点击切换图片:
function gbtn() {
for (var i = 0; i < btns.length; i++) {
if (btns[i].className == "greenbtn") {
btns[i].className = "";
break;
}
};
btns[index - 1].className = "greenbtn";
}
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
console.log(myIndex)
if (this.className == "greenbtn") {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -568 * (myIndex - index);
if (!moved) {
move(offset);
}
index = myIndex;
gbtn()
}
}
4.自动轮播效果:
function play() {
timer = setInterval(function() {
right.click();
}, 3000);
}
function stoproll() {
timer = clearInterval(timer);
}
$(".papertop-image")[0].onmouseover = stoproll;
$(".papertop-image")[0].onmouseout = play;
play();