Jquery实现简单的图⽚轮播（通过点击数字切换）最终实现效果图
代码块
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="css/index.css">
<script src="jq/jquery-1.7.2.js" type="text/javascript"></script>    <script src="jq/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="box">
<div class="big-img" id="big-img">
<ul>
<li><a href=""><img src="image/1.jpg"></a></li>
<li><a href=""><img src="image/2.jpg"></a></li>
<li><a href=""><img src="image/3.jpg"></a></li>
<li><a href=""><img src="image/4.jpg"></a></li>
</ul>
</div>
<div class="square" id="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</body>
</html>
css
*{margin: 0;padding: 0}
ul{list-style: none}
img {
vertical-align: top
}
.box{
position: absolute;
width: 960px;
height: 600px;
margin-left: 200px;
margin-top: 100px;
padding: 5px;
border: 1px solid #ccc;
}
.big-img{
width: 960px;
height: 600px;
overflow: hidden;
position: relative;
}
.big-img ul{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.
big-img li{
float: left;
}
.square{
js实现轮播图最简代码position: absolute;
right: 30px;
bottom: 20px;
}
.square span{
display: inline-block;
width: 26px;
height: 26px;
margin: 5px;
background-color: #fff;
text-align: center;
line-height: 26px;
cursor: pointer;
}
.square span.current{
background-color: orangered;    color: #fff;
}
js
var loopIndex = 0;
var timer;
$(function (){
slide();
//开启定时器，每隔2秒切换图⽚
timer = setInterval(function () {
autoloop();
},1000);
//当⿏标移⼊图⽚的时候停⽌动画
$("#box").hover(function () {
clearInterval(timer);
},function () {
//当⿏标移出图⽚的时候继续动画
timer = setInterval(function () {
autoloop();
},2000);
})
});
function slide() {
$("#square span").click(function () {
//当前被点击的索引
var index = $(this).index();
/
/ 当前被激活的颜⾊
$(this).addClass("current")
.siblings("span").removeClass("current");
//当前被点击的图⽚索引显⽰，其它的隐藏
$("#big-img li").eq(index).show().siblings("li").hide();      //记住当前被点击的图⽚，向右顺序轮播
loopIndex = index;
});
}
function autoloop() {
loopIndex++;
//边界判断
if ( loopIndex == $("#big-img li").length){
loopIndex = 0;
}
$("#square span").eq(loopIndex).addClass("current")      .siblings("span").removeClass("current");
$("#big-img li").eq(loopIndex).show().siblings("li").hide(); }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。