JQuery实现轮播

最新推荐文章于 2025-03-13 01:14:49 发布

沙雕JavaScripter

最新推荐文章于 2025-03-13 01:14:49 发布

阅读量141

点赞数

文章标签： javascript jquery css3 html5

本文链接：https://blog.youkuaiyun.com/TianGuaJSTec/article/details/107832145

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.image{
list-style: none;
}
.box{
width: 730px;
height: 454px;
position: relative;
margin: 50px auto;
}
.image li{
width: 100%;
height: 454px;
float: left;
position: absolute;
display: none;
}
.num{
position: absolute;
list-style: none;
cursor: pointer;
bottom: 20px;
left: 281px;
}
.num li{
float: left;
color: white;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: gray;
margin: 0 4px;
text-align: center;
line-height: 20px;
}
.num .current{
background-color: red;
}
.arrow{
height: 60px;
width: 30px;
position: absolute;
cursor: pointer;
background-color: black;
color: white;
opacity: 0.5;
font-size: 20px;
text-align: center;
line-height: 60px;
top: 197px;
display: none;
}
.left{
left: 0;
}
.right{
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="image">
<li><img src="./ad/0.jpg"/></li>
<li><img src="./ad/1.jpg"/></li>
<li><img src="./ad/2.jpg"/></li>
<li><img src="./ad/7.jpg"/></li>
<li><img src="./ad/8.jpg"/></li>
<li><img src="./ad/9.jpg"/></li>
</ul>
<ul class="num">
<li class='current'>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="left arrow"><</div>
<div class="right arrow">></div>
</div>
<script src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
let i=0,timer;
let sum = $(".image li").length;
$(function(){
$(".image li").eq(0).show();

$(".box").hover(function(){
$(".arrow").show();
clearInterval(timer);
},function(){
$(".arrow").hide();
iLunbo();
})
iLunbo();

$(".arrow").hover(function(){
clearInterval(timer);
});
/*左箭头控制轮播*/
$(".left").click(function(){
clearInterval(timer);
if(i==0){
i=sum;
}
i--;
startLunbo();
iLunbo();
});

/*右箭头控制轮播*/
$(".right").click(function(){
clearInterval(timer);
if(i==sum-1){
i=-1;
}
i++;
startLunbo();
iLunbo();
});

/*提示信息变换*/
$(".num>li").hover(function(){
clearInterval(timer);
i=$(this).index();
console.log(i);
startLunbo();
});
});

/*自动轮播*/
function iLunbo(){
timer = setInterval(function(){
i++;
if(i==sum-1){
i=-1;
}
startLunbo();
},2000)
}

/*图片轮播和提示信息*/
function startLunbo(){
if(i==6){
i=0;
}
$(".image>li").eq(i).fadeIn().siblings().fadeOut();
$(".num>li").eq(i).addClass("current").siblings().removeClass("current");
}
</script>
</body>
</html>