|
效果：实现自动切换，点击停止，左右点击切换，底部圆点切换
HTML
<body>
<div id="box">
<div class="imgs">
<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t1.png" style="display: block;"></a>
<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t2.jpg"></a>
<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t3.jpg"></a>
<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t4.jpg"></a>
<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t5.jpg"></a>
</div>
<div class="btn">
<span class="left"><</span>
<span class="right">></span>
</div>
<div class="circle">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
CSS
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
width: 520px;
position: relative;
}
img {
position: absolute;
/* opacity: 0;
transition: 2s; */
}
.btn {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
color: #fff;
font-size: 40px;
font-weight: bold;
line-height: 35px;
height: 50px;
margin-top: 120px;
}
.btn span {
width: 30px;
height: 40px;
background: rgba(255, 255, 255, .5);
cursor: pointer;
}
.btn span.left {
float: left;
}
.btn span.right {
float: right;
}
.circle {
position: absolute;
bottom: -270px;
left: 42%;
overflow: hidden;
background-color: rgba(255, 255, 255, .3);
padding: 8px 4px;
border-radius: 10px;
}
.circle span {
float: left;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
}
.circle span.current {
background-color: black;
}
</style>
JavaScript
<script type="text/javascript">
//页面加载完成之后即触发
$(function(){
//当前轮播的图片索引
var i = 0;
//自动轮播
function start(misecs=2000){
//返回计时器id
return setInterval(function(){
//判断图片是否轮播完成
if(i >= $(".imgs img").length-1){
i = -1; //重新从第一张开始(实际下一张需要++i)
}
changePic();
},misecs);
}
var timer = start();
//上一页
$(".left").click(function(){
//判断当前页是不是第一张
if(i == 0){
i = $(".imgs img").length;
}
changePic("prev");
})
//下一页
$(".right").click(function(){
//判断图片是否轮播完成
if(i >= $(".imgs img").length-1){
i = -1; //重新从第一张开始(实际下一张需要++i)
}
changePic();
})
//鼠标进入轮播图,则停止轮播
$("#box").mouseenter(function(){
clearInterval(timer);
})
//鼠标离开轮播图,则重新开始轮播
$("#box").mouseleave(function(){
timer = start();
})
//给底部圆点绑定事件
$(".circle>span").click(function(){
i = $(this).index();
changePic("select");
})
//切换轮播图
function changePic(direction="next"){
if(direction == "prev"){
//上一页
--i;
}else if(direction == "next"){
//下一页
++i;
}
//将下一张图片显示
$(".imgs img").fadeOut().eq(i).fadeIn();
//将下一张图片对应的圆点添加样式
$(".circle>span").removeClass("current").eq(i).addClass("current");
}
})
</script>
|