您的位置：首页 > Web前端 > JavaScript

大图滚动

2016-07-12 08:33 441 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
*{
margin:
0;
padding:
0;
}
#banner{
width:
730px;
height:
454px;
background-color:
#ccc;
margin:
0 auto;
margin-top:
50px;
position:
relative;
}
ul{
list-style:
none;
}
.imgs>li{
position:
absolute;
top:
0;
left:
0;
opacity:
0;
filter: alpha(opacity:
0);
}
/* 数字的ul */
.controls{
position:
absolute;
z-index:
2;
width:
150px;
height:
18px;
bottom:
0;
left:
0;
right:
0;
margin:
0 auto 10px;
}
.controls>li{
float:
left;
width:
18px;
height:
18px;
background-color:
#3E3E3E;
border-radius:
18px;
text-align: center;
line-height:
18px;
margin:
0px 3px;
}
.controls>li>a{
text-decoration:
none;
color: white;
font-size:
14px;
}

#last,
#next{
position:
absolute;
z-index:
3;
background-color:
rgba(0,
0,
0, 0.2);
width:
30px;
height:
60px;
text-align: center;
line-height:
60px;
color: white;
display:
none;
}
#last{
top:
202px;
left:
0;
}
#next{
top:
202px;
right:
0;
}

</style>
</head>
<body>

<div
id="banner">

<ul
class="imgs">
<li
style="z-index:
1; opacity:
1;"><a
href="javascript:void(0)"><img
src="img/a.jpg"
alt="" /></a></li>
<li><a
href="javascript:void(0)"><img
src="img/b.jpg"
alt="" /></a></li>
<li><a
href="javascript:void(0)"><img
src="img/c.jpg"
alt="" /></a></li>
<li><a
href="javascript:void(0)"><img
src="img/d.jpg"
alt="" /></a></li>
<li><a
href="javascript:void(0)"><img
src="img/e.jpg"
alt="" /></a></li>
<li><a
href="javascript:void(0)"><img
src="img/f.jpg"
alt="" /></a></li>
</ul>

<div
id="last"><</div>
<div
id="next">></div>

<ul
class="controls">
<li
style="background-color:
#B61B1F"><a
href="javascript:void(0)">1</a></li>
<li><a
href="javascript:void(0)">2</a></li>
<li><a
href="javascript:void(0)">3</a></li>
<li><a
href="javascript:void(0)">4</a></li>
<li><a
href="javascript:void(0)">5</a></li>
<li><a
href="javascript:void(0)">6</a></li>
</ul>
</div>


<script
src="js/move-2.js"
type="text/javascript" charset="utf-8"></script>
<script
type="text/javascript">
// 获取元素
var
aImgLis = document.querySelectorAll(".imgs>li");

var
index = 0;

var
timer = null;
function
ziDongDong(){
clearInterval(timer);
timer
= setInterval(function (){
index++;
if
(index == aImgLis.length) {
index
= 0;
}
dong(index);
},
2000);
};
ziDongDong();

// 鼠标悬停在数字上，跳转图片
var
timer1 = null;
var
aNumLis = document.querySelectorAll(".controls>li");
for
(var i = 0; i
< aNumLis.length; i++) {
// 记录下标
aNumLis[i].index
= i;
// 事件绑定

aNumLis[i].onmouseover
= function (){
// 把index 变成悬停的数字下标
index
= this.index;
clearTimeout(timer1);
timer1
= setTimeout(function (){
dong(index);
},
200);
};
}

// 需要一个下标位置，跳转到指定下标图片
function
dong(imgIndex){
changeColor();
// 清除其他图片
for
(var i = 0; i
< aImgLis.length; i++) {
aImgLis[i].style.zIndex
= 0;
startMove(aImgLis[i], {opacity:
0});
}
// 显示指定的图片
aImgLis[imgIndex].style.zIndex
= 1;
startMove(aImgLis[imgIndex], {opacity:
100});
}

// 改变numberLi的颜色
function
changeColor(){
for
(var j = 0; j
< aNumLis.length; j++) {
aNumLis[j].style.backgroundColor
= "";
}
aNumLis[index].style.backgroundColor
= "#B61B1F";
}

// next last
var
oNext = document.getElementById("next");
var
oLast = document.getElementById("last");
oNext.onclick
= function (){
index++;
if
(index == aImgLis.length) {
index
= 0;
}
dong(index);
};
oLast.onclick
= function (){
index--;
if
(index == -1) {
index
= aImgLis.length - 1;
}
dong(index);
};

// 悬停在banner身上停止定时器
var
oBanner = document.getElementById("banner");
oBanner.onmouseenter
= function (){
oNext.style.display
= "block";
oLast.style.display
= "block";
clearInterval(timer);
};
oBanner.onmouseleave
= function (){
setTimeout(function
(){
oNext.style.display
= "none";
oLast.style.display
= "none";
},
200);
ziDongDong();
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 大图滚动 js 小例子

相关文章推荐

新的分享

章节导航