jQuery實現(xiàn)簡單的輪播圖
更新時間：2021年05月18日 08:57:11 作者：有一個進大廠的夢
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用jQuery實現(xiàn)輪播圖，廢話不多說，直接上代碼了。
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實現(xiàn)輪播圖效果的所有代碼，希望對您有幫助！
更多關于輪播圖效果的專題，請點擊下方鏈接查看學習
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jQuery length 和 size()區(qū)別總結
這篇文章主要介紹了jQuery length 和 size()區(qū)別總結,在這里length是屬性，size()是方法，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了JQuery與JS里submit()的區(qū)別,需要的朋友可以參考下2014-02-02
當點擊提交信息的時候，會把用戶在注冊甜的信息收集并以div彈出的方式提示個用戶預覽以確定信息的準確性，感興趣的朋友可以參考下，希望對你有所幫助2013-04-04
這里所說的浮動工具欄就是大家平時看到的社交網(wǎng)絡分享按鈕欄那樣的效果,可以做成浮動效果且能上下移動,這里我們就來看一個使用jQuery制作頁面工具邊欄的實例分享.2016-05-05
本文通過jquery代碼實現(xiàn)窗口拖動功能以及jQuery 鼠標拖拽移動窗口的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
jQuery soColorPacker 網(wǎng)頁拾色器
這篇文章主要介紹了jQuery soColorPacker 網(wǎng)頁拾色器 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JQuery結合CSS操作打印樣式的方法，有需要的朋友可以參考一下2013-12-12
多個datatable共存造成多個表格的checkbox都被選中
所以當有多個datatable 引用到一個頁面中的時候，全選事件會匹配全部的datatable，所以造成全部多個表格的checkbox被都被選中2013-07-07
使用jQuery解決IE與FireFox下createElement方法的差異
使用jQuery解決IE與FireFox下createElement方法的差異。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jquery uploadify 在FF下無效的解決辦法,很實用，需要的朋友可以參考下2014-09-09