溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“基于jquery如何實現輪播圖效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“基于jquery如何實現輪播圖效果”吧！
黃色的方框表示的是 slides ，而 slide 表示的是所有輪播圖的父親，每個灰色的方框表示的是每一個輪播圖。
<div id="slides"> <div id="slide"> <div></div> <div></div> <div></div> </div> </div>
對于 step 1 我們首先要使用 CSS 中 overflow 屬性隱藏處于 firstDiv 后的盒子，如果我們不這么做，那么很明顯，后方圖片會被顯示出來，也就達不到我們需要的效果。
對于 step 2 我們可以把它分為以下步驟：
1、左移動所有輪播圖的父親 slide
2、將 s l i d e slideslide 中的第 一 個 兒 子 第一個兒子第一個兒子刪除
3、并把第一個兒子添加到 slide 中兒子的尾部
每次點擊 leftMove 按鈕時重復 step 2，即可實現左移效果。
rightMove 的執行步驟：
1、刪除最后一個兒子
2、把最后一個兒子添加到頭部
3、右移 s l i d e slideslide（即把 slide 的 left 設為 0）
實現代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#container {
position: relative;
width: 200px;
height: 100px;
background: #000;
overflow: hidden;
display: inline-block;
}
#container .img {
position: absolute;
width: inherit;
height: inherit;
}
#container .img > div {
position: absolute;
width: inherit;
height: inherit;
color: #fff;
}
#container .img > div:first-child {
left: 0;
}
#container .img > div:nth-child(2) {
left: 100%;
}
#container .img > div:last-child {
left: 200%;
}
#container .img > div img {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<button id="prev"><</button>
<div id="container">
<div class="img">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
</div>
</div>
<button id="next">></button>
<script src="js/jquery.js"></script>
<script>
function imgLeftMove() {
$(".img").animate({
left:"-=200"
}, 1000, function() {
// 將第一個圖片刪除，并添加到圖片末尾
$( $(".img > div")[0] ).remove().appendTo( $(".img") );
// 設置 div 的left為0
$( $(".img") ).css("left", "0px");
});
}
function imgRightMove() {
// 將最后一個圖片刪除，并添加到圖片頭部
$(".img > div").last().remove().prependTo( $(".img") );
// 把div left設置為-200px
$(".img").css("left", "-200px");
$(".img").animate({
left: "0px"
}, 1000);
}
$("#prev").click(imgLeftMove);
$("#next").click(imgRightMove);
// setInterval(imgLeftMove, 3000);
</script>
</body>
</html>感謝各位的閱讀，以上就是“基于jquery如何實現輪播圖效果”的內容了，經過本文的學習后，相信大家對基于jquery如何實現輪播圖效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
