溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了jQuery輪播效果展示的具體代碼，供大家參考，具體內容如下
jQ代碼：
在寫jQuery代碼之前一定要先導庫，此處我用的是3.0的庫
<script src="jquery-3.0.0.js"></script>
<script type="text/javascript">
var timer;
$(function() {
//設置圖片向左移
imgshow();
//點擊暫停按鈕事件
$(".pause").click(function () {
clearInterval(timer);
});
//點擊播放按鈕事件
$(".play").click(function () {
imgshow();
});
//點擊左按鈕
$(".prev").click(function () {
imganimation("left");
});
//點擊右按鈕
$(".next").click(function () {
imganimation("right");
});
function imganimation(res) {
//圖片向左走的輪播
if(res=="right"){
//animate()動畫第一個li向左移動20%
$(".lilist:first").animate({
"marginLeft": "-20%"
}, 700, "linear", function () {
//這個li回到原來的位置
$(this).css("marginLeft", "0px");
//將它追加到ul的最后的位置
$(this).appendTo($(".ullist"));
});
//設置小框的圖片輪播，原理與大框圖片輪播一致
$(".s_lilist:first").animate({
"marginLeft": "-20%"
}, 650, "linear", function () {
$(this).css("marginLeft", "0px");
$(this).appendTo($(".s_ullist"));
});
}else {
//圖片向右走，與向左的原理相同
$(".lilist:first").animate({
"marginLeft": "20%"
}, 700, "linear", function () {
$(this).css("marginLeft", "0px");
$(".lilist:last").prependTo($(".ullist"));
});
$(".s_lilist:first").animate({
"marginLeft": "20%"
}, 650, "linear", function () {
$(this).css("marginLeft", "0px");
$(".s_lilist:last").prependTo($(".s_ullist"));
});
};
};
//默認圖片自動向左走
function imgshow() {
timer = setInterval(function (){
imganimation("right");
} , 2000);
};
});
</script>
css樣式：
* {
margin: 0;
padding: 0;
}
.divbg {
width: 100%;
height: 350px;
/*overflow: hidden;*/
position: relative;
}
.mb {
width: 30%;
height: 350px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
}
.mb:first-child {
left: 0px;
}
.mb:nth-child(2) {
right: 0px;
}
.ullist {
width: 200%;
height: 350px;
margin-left: -50%;
}
.lilist {
width: 20%;
height: 350px;
list-style: none;
float: left;
}
.imglist {
width: 100%;
height: 100%;
}
.divblock{
width: 20%;
height: 70%;
border: 4px solid rgba(255, 255, 255, 0.32);
position: absolute;
z-index: 5;
left: 46%;
top: 15%;
overflow: hidden;
}
.s_mb{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 10;
}
.s_ullist{
width: 500%;
height: 100%;
margin-left: -200%;
}
.s_lilist{
width: 20%;
height: 100%;
list-style: none;
float: left;
}
.s_imglist{
height: 100%;
width: 100%;
}
.s_mb img{
margin-left: 16%;
margin-top: 65%;
cursor: pointer;
}
html樣式：
<div class="divbg">
<div class="divblock">
<div class="s_mb">
<img class="prev" src="./img2/btn_prev.png" />
<img class="pause" src="./img2/btn_pause.png" />
<img class="play" src="./img2/btn_play.png" />
<img class="next" src="./img2/btn_next.png" />
</div>
<ul class="s_ullist">
<li class="s_lilist">
<img class="s_imglist" src="img2/2121.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2122.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2123.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2124.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2123.jpg" />
</li>
</ul>
</div>
<div class="mb"></div>
<div class="mb"></div>
<ul class="ullist">
<li class="lilist">
<img class="imglist" src="img2/2121.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2122.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2123.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2124.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2123.jpg" />
</li>
</ul>
</div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
