先看效果
下面是实现代码,自己添加jQuery引用,如果想把div改成图片轮询,把代码中的字母div注释,img元素解注释即可,可根据需要修改li的长宽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯</title>
<script src="Scripts/jquery-3.4.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.carousel {
width: 560px;
height: 300px;
border: 1px solid #9e9e9e;
margin: 5px auto;
position: relative;
overflow: hidden;
}
.carousel ul {
list-style: none;
width: 5000px;
position: relative;
}
.carousel ul li {
float: left;
width: 560px;
height: 300px;
background-color: cadetblue;
}
.carousel .btns a {
position: absolute;
width: 30px;
height: 70px;
top: 50%;
margin-top: -35px;
background-color: rbga(0,0,0,0,73);
text-align: center;
line-height: 70px;
text-decoration: none;
font-size: 24px;
color: white;
font-family: serif;
border-radius: 4px;
}
.carousel .btns a.leftBtn {
left: 10px;
}
.carousel .btns a.rightBtn {
right: 10px;
}
.circles {
position: absolute;
bottom: 10px;
left: 50%;
width: 120px;
height: 20px;
margin-left: -60px;
}
.circles ol {
list-style: none;
}
.circles ol li {
float: left;
width: 16px;
height: 16px;
margin-right: 10px;
background-color: white;
border-radius: 50%;
}
.circles ol li.cur {
background-color: red;
}
.circles ol li.last {
margin-right: 0;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul id="unit">
<li>
<!--<a href=""><img src="images/0.jpg" /></a>-->
<div>aa</div>
</li>
<li>
<!--<a href=""><img src="images/1.jpg" /></a>-->
<div>bb</div>
</li>
<li>
<!--<a href=""><img src="images/2.jpg" /></a>-->
<div>cc</div>
</li>
<li>
<!--<a href=""><img src="images/3.jpg" /></a>-->
<div>dd</div>
</li>
<li>
<!--<a href=""><img src="images/4.jpg" /></a>-->
<div>ee</div>
</li>
</ul>
<div class="btns">
<a id="leftBtn" class="leftBtn" href="javascript:void(0);"><</a>
<a id="rightBtn" class="rightBtn" href="javascript:void(0);">></a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ol>
</div>
</div>
</body>
<script type="text/javascript">
var $carousel = $("#carousel"); // 大盒子
var $unit = $("#unit"); // “小火车”
var $leftBtn = $("#leftBtn"); // 左按钮
var $rightBtn = $("#rightBtn"); // 右按钮
var $circlesLis = $("#circles li");
var amount = $unit.children("li").length;
//克隆第一张图片
$unit.children("li:first").clone().appendTo($unit);
// 定时器
var timer = setInterval(rightBtnHandler, 2000);
// 鼠标进入停止定时器
$carousel.mouseenter(function () {
clearInterval(timer);
});
// 鼠标离开重新开启定时器
$carousel.mouseleave(function () {
clearInterval(timer);
timer = setInterval(rightBtnHandler, 2000);
});
//信号量,表示当前第几张图片。0、1、2、3、4
var idx = 0;
//右按钮的事件监听
$rightBtn.click(rightBtnHandler);
function rightBtnHandler() {
// 防止多次点击
if ($unit.is(":animated")) {
return;
}
// 先改变信号量,在回调函数中验证
idx++;
$unit.animate({ "left": idx * -560 }, 400, function () {
if (idx > amount - 1) {
idx = 0;
$unit.css("left", 0); //瞬间移动
}
});
//改变小圆点
var i = idx <= amount - 1 ? idx : 0;
$circlesLis.eq(i).addClass("cur").siblings().removeClass("cur");
}
$leftBtn.click(function () {
// 防止多次点击
if ($unit.is(":animated")) {
return;
}
// 改变信号量
idx--;
// 先判断
if (idx < 0) {
// 如果信号量小于0,则瞬间移动到被克隆的图片,信号量为最后一张真实图片序号
idx = amount - 1;
$unit.css("left", amount * -560);
}
// 拉动“小火车”
$unit.animate({ "left": idx * -560 }, 400);
// 小圆点
/*$circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");*/
});
$circlesLis.mouseenter(function () {
idx = $(this).index();
$unit.stop(true).animate({ "left": idx * -560 }, 400);
$circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");
});
</script>
</html>