效果图:
要求:
功能说明:
1.图片自动向左播放,但是当鼠标过轮播区时暂停播放,放开则继续;
2.点击左侧箭头显示上一张图;
3.点击右侧箭头显示下一张图;
4.当鼠标滑到指示点的时候,显示对应的一张图;
html代码:
<div class="banner">
<!--大图列表-->
<ul class="pics-list">
<li><a href="detail.html"><img src="img/banner/1.jpg"/></a></li>
<li><a href="detail.html"><img src="img/banner/2.jpg"/></a></li>
<li><a href="detail.html"><img src="img/banner/3.jpg"/></a></li>
<li><a href="detail.html"><img src="img/banner/4.jpg"/></a></li>
</ul>
<!--指示点列表-->
<ul class="points-list">
<li class="active">●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
<div class="left"></div>
<div class="right"></div>
</div>
css代码:
*{padding: 0; margin: 0;}
/*图片*/
.banner{position: relative; height: 389px; width: 1200px; overflow: hidden;margin-left: 85px;}
.pics-list{height: 389px; width: 6000px;position: absolute;left:0;}
.pics-list li{float: left;width: 1200px;}
/*按钮*/
.left{width: 70px;height: 70px;background: url(../img/banner_arrow.png) no-repeat;position: absolute;top: 155px;}
.left:hover{background-position: 0 -72px;}
.right{width: 70px;height: 70px;background: url(../img/banner_arrow.png) no-repeat 0 -145px;position: absolute;top: 155px;left: 1130px;}
.right:hover{background-position: 0 -217px;}
/*小圆点*/
.points-list{position: absolute;left: 50%;bottom: 10px; margin-left: -100px;}
.points-list li{display:inline-block;padding: 0 5px;font-size: 24px;color: #999;opacity: 0.6;cursor: pointer}
.points-list li.active,.points-list li:hover{color:#ddd;}
js代码:
$(function() {
var index = 0; //当前索引
var funMove = function() {
//var lastI = liLen - 1;
if(index == 3) {
index = 0;
} else {
index++;
}
//(index == 3) ? (index = 0) : (index++);
//语法(条件)?(成立的执行语句):(不成立的执行语句)
moveTo(index);
}
var timer = setInterval(funMove, 3000); //自动轮播
//鼠标划上停止,走开继续
$(".pics-list").mouseover(function() {
clearInterval(timer);
}).mouseout(function() {
setInterval(funMove, 3000)
})
//点击右箭头走一步
$(".right").click(function() {
funMove();
})
//点击左边箭头向后走一步
$(".left").click(function() {
// index--;
// if(index==0){
// index = 3
// }{
// index--
// }
(index == 0) ? (index = 3) : (index--);
moveTo(index);
})
//指示灯
$('.points-list li').mouseover(function(){
var nIndex=$(this).index();
moveTo(nIndex);
})
//滚动的方法
function moveTo(param){
var goLeft = -(param * 1200) + "px"; //偏移的值
$(".pics-list").animate({
left: goLeft
}); //滚动到指定图片
$('.points-list li').eq(param).addClass('active').siblings().removeClass('active');
}
})
最后别忘了引入css,js,jquery库。
<link rel="stylesheet" href="css/carousel_two.css" />
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/carousel_two.js" ></script>
ok啦。。。。