您的位置：首页 > Web前端 > JQuery

jQuery实现轮播图效果

2019-12-03 18:39 1011 查看

使用jQuery实现轮播图，废话不多说，直接上代码了。

HTML部分

其中，图片和路径是我电脑中的，你需要自己准备好图片，然后写你自己图片的路径。

<div class="slider">
<ul>
<li><a href="#" ><img src="images/1.jpg" alt=""></a></li>
<li><a href="#" ><img src="images/2.jpg" alt=""></a></li>
<li><a href="#" ><img src="images/3.jpg" alt=""></a></li>
<li><a href="#" ><img src="images/4.jpg" alt=""></a></li>
<li><a href="#" ><img src="images/5.jpg" alt=""></a></li>
</ul>

<div class="arrow">
<span class="left"><</span>
<span class="right">></span>
</div>

<div class="box">
<ul>
<li class="show"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

CSS部分

* {
margin: 0;
padding: 0;
list-style: none;
}

.slider {
width: 790px;
height: 340px;
margin: 100px auto;
position: relative;
}

.slider>ul>li {
display: none;
position: absolute;
}

.slider li:first-child {
display: block;
}

.arrow {
display: none;
}

.slider:hover .arrow,
.slider:hover .box {
display: block;
}

.left,
.right {
width: 30px;
height: 60px;
font-size: 30px;
background-color: rgba(0, 0, 0, 0.1);
color: white;
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
cursor: pointer;
}

.left:hover,
.right:hover {
background-color: rgba(0, 0, 0, .5);
}

.left {
left: 0;
}

.right {
right: 0;
}

.box {
width: 150px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 20px;
display: none;
}

.box li {
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
display: inline-block;
float: left;
margin-left: 12px;
}

.show{
background-color: orangered !important;
}

JS部分

你要引入jQuery这个库，然后才能使用它。我这里的jQuery库版本是jquery-1.12.4。

$(function() {
var num = 0;
$(".right").click(function() {
num++;
if (num === $(".slider>ul>li").length) {
num = 0;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
});

$(".left").on("click", function() {
num--;
if (num === -1) {
num = $(".slider>ul>li").length - 1;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
});

$(".box li").on("click", function() {
var idx = $(this).index();
$(".slider li").eq(idx).fadeIn().siblings("li").fadeOut();
$(".box li").eq(idx).addClass("show").siblings("li").removeClass("show");
});
});

效果图

以上就是jQuery实现轮播图效果的所有代码，希望对您有帮助！

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 轮播图

相关文章推荐

新的分享

章节导航