<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
div,
image,
button,
ul,
li {
margin: 0;
padding: 0;
}
/*显示图片的内容区,大小刚好等于图片的大小*/
.img-scroll {
position: relative;
430px;
height: 320px;
margin: 0 auto;
/*overflow: hidden;*/
}
/*上下一张按钮,样式随意控制*/
.img-scroll>button {
display: none;
position: absolute;
top: 50%;
margin-top: -22px;
48px;
height: 48px;
border-radius: 50%;
border: 3px solid #eee;
outline: none;
color: #eee;
font-size: 30px;
font-weight: bold;
background-color: rgba(0, 0, 0, .3);
cursor: pointer;
}
.next {
right: 0;
}
/*有多少张图片,就把宽度设为内容区宽度*图片数量,让所有图片排成一横排,比如我这就是430*5=2150*/
.img-content {
2150px;
height: 320px;
overflow: hidden;
}
/*装每张图片的div*/
.img-content>div {
float: left;
430px;
height: 320px;
}
.arc-list {
position: absolute;
bottom: 0;
}
.arc-list>li {
display: inline-block;
15px;
height: 15px;
border-radius: 50%;
list-style-type: none;
background-color: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="img-scroll" id="imgScroll">
<div class="img-content" id="imgCon">
<div>
<a href="#"><img src="1.png" alt="gg" /></a>
</div>
<div>
<a href="#"><img src="2.png" alt="gg" /></a>
</div>
<div>
<a href="#"><img src="3.png" alt="gg" /></a>
</div>
<div>
<a href="#"><img src="4.png" alt="gg" /></a>
</div>
<div>
<a href="#"><img src="5.png" alt="gg" /></a>
</div>
</div>
<button type="button" id="prev">
<</button>
<button type="button" class="next" id="next">></button>
<ul class="arc-list" id="arcList">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
//缓存存放图片的区域
var $imgCon = $("#imgCon"),
//得到内容去的宽度
w = $("#imgScroll").css("width");
//缓存小圆点和它的数组长度
$li = $("#arcList li"),
len = $li.length,
//用来存放需要关闭的setInterval的值
timer = null,
//用于确定该显示第几个小圆点的参数
index = 0;
//默认将第一个小圆点点亮
$li.get(index).style.backgroundColor = "red";
/*自动滚动图片的方法,很简单,移走第一张,下一张自然的就显示出来了,
然后把第一张放到末尾去,并把它的marginLeft归零,当播放到最后一张就可以无缝衔接第一张了
*/
function imgScroll() {
//每次将第一个div向左移出内容区，下一个div自动显示在内容区，并将第一个div附加到父元素的最后
$imgCon.children("div:first").animate({
marginLeft: "-" + w
}, 1000, "swing", function() {
$(this).css({
marginLeft: "0"
}).appendTo($imgCon);
//将当前小圆点熄灭
$li.get(index).style.backgroundColor = "rgba(0,0,0,.5)";
if (index == len - 1) {
index = 0;
} else {
index++;
}
//将下一个小圆点点亮
$li.get(index).style.backgroundColor = "red";
//判断小圆点是否为最后一个,如果是,则将标记小圆点的参数归零,重新从第一个开始
});
}
timer = setInterval(imgScroll, 3000);
//鼠标放在图片上停止滚动,鼠标离开图片继续滚动
$("#imgScroll").hover(
function() {
clearInterval(timer);
//控制按钮的显示
$("#imgScroll button").show(300, "swing");
},
function() {
timer = setInterval(imgScroll, 3000);
$("#imgScroll button").hide(300, "swing");
}
);
//手动点击下一张时只需手动调用imgScroll就行
$("#next").on("click", function() {
/*如果连续点击下一张的话,会引发不和谐的东西,所以我们判断第一张图片的marginLeft值,如果正在执行动画,它的marginLeft是不会为0的,所以这样判断就确保了执行完了一个动画才会调用下一张的方法*/
var marginLeft = parseInt($imgCon.children("div:first").css("marginLeft"));
if (marginLeft == 0) {
imgScroll();
}
});
//手动点击上一张图片的方法
$("#prev").on("click", function() {
//判断同上
var marginLeft = parseInt($imgCon.children("div:first").css("marginLeft"));
if (marginLeft == 0) {
//上一张图片就是刚才移动到末尾的那张,所以我把末尾的那张添加到第一张的前面
$imgCon.children("div:first").before($imgCon.children("div:last"));
/*注意这里的第一张是刚才末尾的那张图片了,设置marginLeft为-w是将它放在内容区的左边,营造从左滑向右的效果,这里的图片滚动全部操作第一张图片,这张图片向左离开内容区时,就将位置留给下一张显示,当它从左到右回来是,就把下一张挤出内容区*/
$imgCon.children("div:first").css({
marginLeft: "-" + w
}).animate({
marginLeft: "0"
}, 1000, "swing", function() {
//将当前小圆点熄灭
$li.get(index).style.backgroundColor = "rgba(0,0,0,.5)";
if (index == 0) {
index = len - 1;
} else {
index--;
}
//将上一个小圆点点亮
$li.get(index).style.backgroundColor = "red";
//判断小圆点是否为第一个,如果是,则将标记圆点的参数设为最大,即最后一个小圆点
});
}
});
});
</script>
</body>
</html>
备注：需加载jquery