js渣渣也能簡單做出
在理想情況下用 吧外層div的class名起為banner ul li的布局
下面是css代碼放圖片的li記得浮動；
.banner {
width: 15rem;
height: 5.22rem;
position: relative;
overflow: hidden;
}
.banner ul {
width: 60rem;
height: 5.22rem;
position: absolute;
}
.banner ul li {
float: left;
width: 15rem;
height: 5.22rem;
}
.banner img {
width: 15rem;
height: 5.22rem;
}這里是HTML代碼 img標簽里直接放自己想輪播的圖片
a標簽是輪播圖左右按鈕這里參考的是阿里icon font圖示庫的圖示
<div class="banner">
<ul>
<li><img src="./img/01.webp"></li>
<li><img src="./img/02.webp"></li>
<li><img src="./img/03.webp"></li>
<li><img src="./img/04.webp"></li>
<li><img src="./img/05.webp"></li>
</ul>
<div class="num">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:" class="prev"><i class="iconfont icon-lunbozuofangun"></i></a>
<a href="javascript:" class="next"><i class="iconfont icon-lunboyoufangun"></i></a>
</div>最重要的來了jQuery代碼
$(function () {
var timer = null;
//創建一個變數獲取li寬度
var liw = $('.banner ul li:first').innerWidth();
// 定時器名字叫time
timer = setInterval(function () {
play()
}, 2000)
//這里是吧輪播效果封裝為了一個函式叫paly 方便后面呼叫
function play() {
//每2000毫秒把外層div的視口往左拉當前li的寬度
$('.banner ul').animate({ left: -liw }, function () {
// 把最后一張圖片追加到前面 無縫輪播
$(this).css("left", 0).find("li:first").appendTo(this);
})
}
//當滑鼠劃過清除定時器 暫停 這里用到的是jq里的hover事件
$(".banner").hover(function () {
clearInterval(timer);
//移出繼續
}, function () {
timer = setInterval(function () {
play()
}, 2000)
})
//點擊右箭頭事件 這里的.next就是前面的字體圖示
//點擊時候呼叫play（）函式
$('.next').click(function(){
play()
})
//點擊左箭頭事件 這里的.prev就是前面的字體圖示
$('.prev').click(function(){
$('.banner ul').css('left', -liw ).find("li:last").prependTo('.banner ul')
$('.banner ul').animate({ left:0});
})
}) 轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/386608.html
標籤：其他