使用jQuery實現(xiàn)輪播圖，廢話不多說，直接上代碼了。
創(chuàng)新互聯(lián)公司于2013年開始，先為嵐皋等服務(wù)建站，嵐皋等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為嵐皋企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
HTML部分
其中，圖片和路徑是我電腦中的，你需要自己準(zhǔn)備好圖片，然后寫你自己圖片的路徑。
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實現(xiàn)輪播圖效果的所有代碼，希望對您有幫助！
更多關(guān)于輪播圖效果的專題，請點擊下方鏈接查看學(xué)習(xí)
javascript圖片輪播效果匯總
jquery圖片輪播效果匯總
Bootstrap輪播特效匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
