如何使用JQ封裝輪播圖
css部分:
*{
margin: 0;
padding: 0;
}
#banner{
width: 800px;
height: 500px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#box_wrap img{
width: 100%;
height: 500px;
cursor: pointer;
}
.listdian{
width: 150px;
position: absolute;
bottom: 20px;
right: 30px;
display: flex;
justify-content: space-around;
}
.listdian span{
width: 20px;
height: 20px;
border: 1px solid;
text-align: center;
border-radius: 50%;
background: pink;
color: white;
cursor: pointer;
}
.anniu{
position: relative;
cursor: pointer;
}
.anniu span{
font-size: 50px;
color: rgba(250, 150, 195, 0.5);
background: rgba(0, 0, 0, 0.2);
}
.anniu .left{
position: absolute;
right: 95%;
bottom: 230px;
}
.anniu .right{
position: absolute;
left: 95%;
bottom: 230px;
}
.listdian>.active{
background-color: red;
}
html部分:
<div id="banner">
<!--圖片部分-->
<div id="box_wrap">
<img class="item" src="./timg (1).jpg" alt="">
<img class="item" src="./timg (2).jpg" alt="">
<img class="item" src="./timg (3).jpg" alt="">
<img class="item" src="./timg (4).jpg" alt="">
<img class="item" src="./timg.jpg" alt="">
</div>
<!--圓點部分-->
<div class="listdian">
<span class="tab" class="active">1</span>
<span class="tab">2</span>
<span class="tab">3</span>
<span class="tab">4</span>
<span class="tab">5</span>
</div>
<!--按鈕部分-->
<div class="anniu">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
var i=0;
var timer;
$(".item").eq(0).show().siblings(".item").hide();
$(".tab").eq(0).addClass("active").siblings().removeClass("active")
showTime();
$("#box_wrap>.item").hover(function(){
clearInterval(timer);
},function(){
showTime();
});
$(".left").click(function(){
clearInterval(timer);
if(i<1){
i=5
}
i--;
show();
})
$(".right").click(function(){
clearInterval(timer);
if(i==4){
i=-1;
}
i++;
show();
})
function showTime(){
timer=setInterval(function(){
show();
i++;
if(i==5){
i=0;
}
},2000);
}
$(".tab").click(function(){
i=$(this).index()
clearInterval(timer);
show()
})
function show(){
$(".item").eq(i).fadeIn(0).siblings(".item").fadeOut(0);
$(".tab").eq(i).addClass("active").siblings(".tab").removeClass("active");
}
})
</script>
相關文章
- Flutter 如何封裝一個 Banner 輪播圖?Flutter封裝
- Flutter 封裝一個 Banner 輪播圖Flutter封裝
- Vue封裝Swiper實現圖片輪播Vue封裝
- js中用oop思想封裝輪播JSOOP封裝
- Swift - 常用輪播圖封裝,滿足你的日常需求Swift封裝
- 如何使用RecyclerView打造首頁輪播圖View
- jq封裝函式封裝函式
- 如何用物件導向的思維去封裝一個小型輪播圖外掛物件封裝
- jQuery輪播圖之上下輪播jQuery
- jq介面的封裝方法封裝
- 微信小程式------輪播圖------縱向輪播圖微信小程式
- 短視訊直播系統,js利用建構函式封裝輪播圖JS函式封裝
- Flutter輪播圖Flutter
- vue輪播圖Vue
- iOS 輪播圖iOS
- [譯] 別再使用圖片輪播了
- 基於jq封裝ajax請求封裝
- js 輪播圖 (原生)JS
- jQuery Mobile圖片輪轉輪播jQuery
- 文字輪播與圖片輪播?CSS 不在話下CSS
- vue輪播圖外掛Vue
- ViewPage實現輪播圖View
- Banner實現輪播圖
- js實現輪播圖JS
- 圖片輪播--純cssCSS
- 微信小程式swiper輪播圖卡死來回瘋狂輪播微信小程式
- 使用jQuery實現的平滑滾動輪播圖jQuery
- 造輪子之圖片輪播元件(swiper)元件
- 輪播圖(JavaScript定時器)JavaScript定時器
- 原生js實現輪播圖JS
- iOS無限輪播圖片iOS
- 圖片輪播元件實現元件
- Bootstrap-輪播圖-No.7boot
- 教你如何用 RecyclerView 做一個好用的輪播圖View
- 小說APP原始碼,手動滑動輪播圖時,輪播圖跟隨移動APP原始碼
- Axure之使用動態皮膚建立banner輪播圖
- 使用swiper實現不完全覆蓋輪播圖
- 【iOS】自定義控制元件無限輪播 + 無限圖片輪播iOS控制元件