溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

基于jquery如何實(shí)現(xiàn)輪播圖效果

發(fā)布時(shí)間：2021-03-15 10:34:31 來源：億速云 閱讀：184 作者：TREX 欄目：開發(fā)技術(shù)

這篇文章主要講解了“基于jquery如何實(shí)現(xiàn)輪播圖效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“基于jquery如何實(shí)現(xiàn)輪播圖效果”吧！

輪播圖左切換原理圖

基于jquery如何實(shí)現(xiàn)輪播圖效果

黃色的方框表示的是  slides ，而  slide 表示的是所有輪播圖的父親，每個(gè)灰色的方框表示的是每一個(gè)輪播圖。

<div id="slides">
 <div id="slide">
 <div></div>
 <div></div>
 <div></div>
 </div>
</div>

對(duì)于 step 1 我們首先要使用 CSS 中 overflow 屬性隱藏處于 firstDiv 后的盒子，如果我們不這么做，那么很明顯，后方圖片會(huì)被顯示出來，也就達(dá)不到我們需要的效果。

對(duì)于 step 2 我們可以把它分為以下步驟：

1、左移動(dòng)所有輪播圖的父親 slide
2、將 s l i d e slideslide 中的第 一 個(gè) 兒 子 第一個(gè)兒子第一個(gè)兒子刪除
3、并把第一個(gè)兒子添加到 slide 中兒子的尾部
每次點(diǎn)擊 leftMove 按鈕時(shí)重復(fù) step 2，即可實(shí)現(xiàn)左移效果。

輪播圖右切換原理圖

基于jquery如何實(shí)現(xiàn)輪播圖效果

rightMove 的執(zhí)行步驟：

1、刪除最后一個(gè)兒子
2、把最后一個(gè)兒子添加到頭部
3、右移 s l i d e slideslide（即把 slide 的 left 設(shè)為 0）

實(shí)現(xiàn)代碼

<!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() {
 // 將第一個(gè)圖片刪除，并添加到圖片末尾
 $( $(".img > div")[0] ).remove().appendTo( $(".img") );
 // 設(shè)置 div 的left為0
 $( $(".img") ).css("left", "0px");
 });
 }
 
 function imgRightMove() {
 // 將最后一個(gè)圖片刪除，并添加到圖片頭部
 $(".img > div").last().remove().prependTo( $(".img") );
 // 把div left設(shè)置為-200px
 $(".img").css("left", "-200px");
 $(".img").animate({
 left: "0px"
 }, 1000);
 }
 
 $("#prev").click(imgLeftMove);
 $("#next").click(imgRightMove);
 
// setInterval(imgLeftMove, 3000);
 </script>
</body>
</html>

感謝各位的閱讀，以上就是“基于jquery如何實(shí)現(xiàn)輪播圖效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)基于jquery如何實(shí)現(xiàn)輪播圖效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手