<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<style>
*{
margin:
0;
padding:
0;
}
#box{
width:
700px;
height:
400px;
border:
1px solid #102327;
position:
relative;
margin:
0 auto;
margin-top:
100px;
overflow:
hidden;
}
.
ul_list{
width:
3500px;
height:
400px;
position:
absolute;
}
.
li_list{
width:
700px;
height:
400px;
list-style:
none;
float:
left;
}
.
li_list img{
width:
100%;
height:
100%;
}
.
odiv_nav{
position:
absolute;
bottom:
20px;
left:
50%;
margin-left: -
100px;
}
.
span_list{
width:
20px;
height:
20px;
border:
3px solid white;
border-radius:
50%;
float:
left;
margin-left:
20px;
cursor:
pointer;
}
.
left_click{
position:
absolute;
width:
80px;
height:
400px;
font-size:
4em;
color:
white;
text-align:
center;
line-height:
400px;
cursor:
pointer;
z-10000;
}
.
right_click{
position:
absolute;
right:
0px;
width:
80px;
height:
400px;
font-size:
4em;
color:
white;
text-align:
center;
line-height:
400px;
cursor:
pointer;
z-10000;
}
.
btn_left{
position:
absolute;
left: -
40px;
width:
40px;
height:
400px;
opacity:
0.5;
z-index:
9999;
box-shadow:
40px 0px 150px white;
transition:
all 0.2s;
}
.
btn_right{
position:
absolute;
right: -
40px;
width:
40px;
height:
400px;
font-size:
4em;
box-shadow:-
40px 0px 150px white;
opacity:
0.5;
z-index:
9999;
transition:
all 0.2s;
}
</style>
<body>
<div id="box">
<ul class="ul_list">
<li class="li_list"><img src="images/bookA.jpg" alt=""/></li>
<li class="li_list"><img src="images/bookB.jpg" alt=""/></li>
<li class="li_list"><img src="images/bookA.jpg" alt=""/></li>
<li class="li_list"><img src="images/bookB.jpg" alt=""/></li>
<li class="li_list"><img src="images/bookA.jpg" alt=""/></li>
</ul>
<div class="odiv_nav">
<span class="span_list"></span>
<span class="span_list"></span>
<span class="span_list"></span>
<span class="span_list"></span>
</div>
<div class="left_click"><
</div>
<div class="right_click">>
</div>
<div class="btn_left"></div>
<div class="btn_right"></div>
</div>
<script>
$(
function(){
var num=
0;
var timer=
null;
go();
$(
"#box").
mouseenter(
function(){
//实现当鼠标移动到box上时，不执行自动轮播功能
clearInterval(
timer);
//移动进去时清除定时器
}).
mouseleave(
function(){
go();
//移出后执行go函数
});
$(
".span_list").
eq(
0).
css(
"backgroundColor",
"white");
//页面加载后默认是第一张图，则让第一个导航圆点变为“选中色”。
function go(){
timer=
setInterval(
function(){
//设置定时器
num++;
//用一个全局变量来控制图的运动次数
if(
num>
4){
//如果移动到了最后一张图，则num赋值1，调整ul边距（相当于初始化）
num=
1;
$(
".ul_list").
css(
"margin-left",
"0px");
}
if(
num==
4){
//由于圆点只有四个，而图片有五张，当移动到第五张图片时，给第一个圆点“选中色”。
$(
".span_list").
css(
"backgroundColor",
"transparent");
$(
".span_list").
eq(
0).
css(
"backgroundColor",
"white");
}
else{
//图片运动一次，导航圆点也动态的变换，这里先让所有圆点变为“不选中色”，再让当前圆点变为“选中色”。
$(
".span_list").
css(
"backgroundColor",
"transparent");
$(
".span_list").
eq(
num).
css(
"backgroundColor",
"white");
}
$(
".ul_list").
animate({
"marginLeft":-
700*
num+
"px"},
580);
//使用animate实行运动功能
},
2000);
}
$(
".span_list").
each(
function (index) {
//遍历每一个圆点添加点击事件，点击当前圆点则让num值赋为当前圆点的索引
$(
this).
click(
function () {
num=index;
$(
".span_list").
css(
"backgroundColor",
"transparent");
$(
".span_list").
eq(
num).
css(
"backgroundColor",
"white");
$(
".ul_list").
stop().
animate({
"marginLeft":-
700*
num+
"px"},
580);
})
});
$(
".right_click").
click(
function(){
//右按钮点击事件，每点击一次num++,这里有很多的判断，是用来消除一些BUG的。
if(
num<=
4){
num++;}
if(
num>
4){
num=
1;
$(
".ul_list").
css(
"margin-left",
"0px");
}
if(
num==
4){
$(
".span_list").
css(
"backgroundColor",
"transparent");
$(
".span_list").
eq(
0).
css(
"backgroundColor",
"white");
}
else{
$(
".span_list").
css(
"backgroundColor",
"transparent");
$(
".span_list").
eq(
num).
css(
"backgroundColor",
"white");
}
$(
".ul_list").
stop().
animate({
"marginLeft":-
700*
num+
"px"},
580);
});
$(
".left_click").
click(
function(){
//左按钮点击事件
if(
num>=
0){
num--;}
if(
num<
0){
num=
3;
$(
".ul_list").
css(
"margin-left",
"-2800px")
$(
".span_list").
css(
"backgroundColor",
"transparent");
$(
".span_list").
eq(
3).
css(
"backgroundColor",
"white");
}
else{
$(
".span_list").
css(
"backgroundColor",
"transparent");
$(
".span_list").
eq(
num).
css(
"backgroundColor",
"white");
}
$(
".ul_list").
stop().
animate({
"marginLeft":-
700*
num+
"px"},
580);
});
$(
".left_click").
hover(
function(){
//这里是实现左右按钮的阴影效果显示，用到了hover事件
$(
".btn_left").
css(
"opacity",
"1");
},
function(){
$(
".btn_left").
css(
"opacity",
"0.5");
});
$(
".right_click").
hover(
function(){
$(
".btn_right").
css(
"opacity",
"1");
},
function(){
$(
".btn_right").
css(
"opacity",
"0.5");
});
});
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-1150125.html
