<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
img {
position: absolute;
top: 0;
left: 0;
}
#container {
margin: 0 auto;
height: 340px;
width: 790px;
position: relative;
}
#container:hover {
cursor: pointer;
}
#left {
height: 100px;
width: 40px;
position: absolute;
left: 0;
top: calc(50% - 50px);
background: rgba(33, 33, 33, 0.2);
text-align: center;
line-height: 100px;
color: white;
}
#right {
height: 100px;
width: 40px;
position: absolute;
right: 0;
top: calc(50% - 50px);
background: rgba(33, 33, 33, 0.2);
text-align: center;
line-height: 100px;
color: white;
}
.img_show {
display: block;
}
.img_hide {
display: none;
}
.dot {
height: 10px;
width: 10px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.6);
float: left;
margin-left: 4px;
}
.dot_select {
height: 10px;
width: 10px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.6);
float: left;
margin-left: 4px;
}
#dot_container {
position: absolute;
bottom: 20px;
width: 80px;
left: calc(50% - 25px);
}
</style>
<script type="text/javascript">
$(function() {
// 1.先拿到右侧的按键
var img_index = 0;
// 进入的时候要自动播放
var timer_id = startLoop();
function startLoop() {
timer_id = setInterval(function() {
var show_index = img_index;
img_index++;
if(img_index == 4) {
img_index = 0;
}
// $("img").eq(show_index).removeClass("img_show").addClass("img_hide");
// $("img").eq((show_index + 1) % 4).removeClass("img_hide").addClass("img_show");
$("img").eq(show_index).fadeOut(1000);
$("img").eq((show_index + 1) % 4).fadeIn(1000);
//拿小点儿
$("#dot_container div").eq(show_index).removeClass("dot_select").addClass("dot");
$("#dot_container div").eq((show_index + 1) % 4).removeClass("dot").addClass("dot_select");
}, 1000);
return timer_id;
}
//自动播放，代码来自右侧点击事件的处理
$("#container").mouseenter(function(){
if (timer_id != -2){
clearInterval(timer_id);
timer_id = -2;
}
});
$("#container").mouseleave(function(){
timer_id = startLoop();
});
$("#right").click(function() {
var show_index = img_index;
img_index++;
if(img_index == 4) {
img_index = 0;
}
//$("img").eq(show_index).removeClass("img_show").addClass("img_hide");
//$("img").eq((show_index + 1) % 4).removeClass("img_hide").addClass("img_show");
$("img").eq(show_index).fadeOut(1000);
$("img").eq((show_index + 1) % 4).fadeIn(1000);
//拿小点儿
$("#dot_container div").eq(show_index).removeClass("dot_select").addClass("dot");
$("#dot_container div").eq((show_index + 1) % 4).removeClass("dot").addClass("dot_select");
})
$("#left").click(function() {
var show_index = img_index;
img_index--;
if(show_index == 0) {
img_index = 3;
}
var tmp_index = (show_index - 1) == -1 ? 3 : (show_index - 1) % 4;
$("img").eq(show_index).fadeOut(1000);
$("img").eq(tmp_index).fadeIn(1000);
//拿小点儿
$("#dot_container div").eq(show_index).removeClass("dot_select").addClass("dot");
$("#dot_container div").eq(tmp_index).removeClass("dot").addClass("dot_select");
})
$("#dot_container div").mouseenter(function() {
var dot_index = $("#dot_container div").index($(this));
$("#dot_container div").eq(dot_index).removeClass("dot").addClass("dot_select");
$("#dot_container div").eq(img_index).removeClass("dot_select").addClass("dot");
$("img").eq(dot_index).fadeIn(1000);
$("img").eq(img_index).fadeOut(1000);
img_index = dot_index;
})
})
</script>
</head>
<body>
<!--
需求：
1.轮播居中
2.点击左右按钮能动
3.定位点也要随图片而移动
4.轮播自动播放
5.鼠标移入的时候 自动播放停止
6.鼠标移入的时候 图片变道相应位置
7.小手儿
-->
<!--
解决问题：
1.用文字的形式分析问题，将大问题，拆分成小问题（拆分到你能解决位置）
2.逐一的解决若干的小问题（要分析小问题的重点）
3.将各个小问题解决方案融合产生的各种小bug的修复
4.喝点东西
-->
<div id="container">
<img class="img_show" src="img/1.jpg" />
<img class="img_hide" src="img/2.jpg" />
<img class="img_hide" src="img/3.jpg" />
<img class="img_hide" src="img/4.jpg" />
<div id="left">
<
</div>
<div id="right">
>
</div>
<div id="dot_container">
<div class="dot_select"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</body>
</html>
网友评论