這是一個朋友前天剛接觸這個行業不久問我的一個問題，我網上也查了一些，看了下代碼，不喜歡；所以
自己動手做了這個小demo；希望大家可以借鑒一下
首先頁面布局：其中最主要的是對類wrapper設置position:relative;overflow:hidden;
類items設置：position:absolute等屬性；
接下來就事分析如何輪播：
我的思路是：點擊下一頁的時候：items的animate向左移動
animate（{“marginLfet”:”-800px”},1000,function(){}）;其中function（{}）里執行的方法：
首先將item-1放到$（”.items li”）最後面，然後items({marginLeft:0})
【一開始在想，將item-1追加到$（”.items li”）最後面之後，那麼一開始item-1是不是要移除掉呢，
然後我觀察了下一頁的方法執行後的頁面元素，才發現這個擔心是多餘的】
下面是執行下一頁之後的頁面元素：
【大家發現了沒有，第一個li元素跑到最後面了，然後接下來點擊上一頁的時候，我們只需要取最後一個li元素就行了】
思路：點擊上一頁的時候，items的css向左移動（{“marginLfet”:0}）,然後$（”.items li”）.eq(3)放在items第一個位置里,然後動畫aniamte({“marginLeft”:0},1000)；
這時候大家腦補一下：items的css向左移動（{“marginLfet”:0}）和$（”.items li”）.eq(3)[即item-1]放在items第 一個位置里都是瞬間完成，人眼是看不出來的；所以再之後執行aniamte({“marginLeft”:0},1000)時候，發現item-1慢悠悠從左側出來
js代碼如下：
接下來就是定時器了：自動輪播
【timer一定去做下判斷，不然會導致連續點擊的時候，圖片移動會越來越快】
還有最後一個setTimeout這個：在點擊上下一頁的時候，我會清除定時器，所有我會在其事件里添加它，然後三秒之後再執行show(),自動輪播；
最後點擊事件：
總體頁面展示：
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/208768.html
微信掃一掃 
支付寶掃一掃 