JS圖片自動或者手動滾動效果(支持left或者up)
JS圖片自動或者手動滾動效果
????? 在談組件之前 來談談今天遇到搞笑的事情，今天上午接到一個杭州電話 0571-28001187 即說是杭州人民法院的 貌似說我用招商銀行信用卡在今年的6月23日借了招商銀行19800元人民幣，今天是最后一天沒有還款，說我其他銀行錢都被凍結了。以后有可能法律投訴我！我靠 我無語啊 我長這么大從來都沒有辦理過信用卡，我根本就不需要辦理信用卡，所以一直以來也沒有辦過，招商一卡通是有一張 但是從來沒有借過錢啊，身份證一直都身上帶著！基本上沒有脫離過身， 今天我打電話過去 他問我叫什么名字 我就報了名字 我問是什么情況 然后說了很多 大概意思就是剛剛上面的意思 然后他接著問我身份證號是多少？我就沒有告訴他， 我今天就半信半疑 我到銀行取下錢 看看是不是真的我的卡被凍結了 結果我所有的銀行卡都沒有被凍結。我懷疑有可能是騙人的，如果有杭州的朋友 可以試試打上面的電話 然后隨便報個假名字 讓他們查下 看看他們怎么說？就知道了！快過年了 我也在這希望大家不要被一些人騙了，年底小心騙子(騙子很多的)。 不多說了，下面來看看我這個JS效果原理吧！
基本原理
??? 1.? 開始獲取每次滾動的個數，如果參數item(int整形數字)傳進來，就取參數item個數 否則的話 個數count = 取外層容器寬度(或高度) / 每個li寬度(或高度)。然后判斷方向 如果是left(向左) 那么父級容器寬度ul * 2，否則的話ul高度*2. 然后計算下一次滾動多少距離。如果方向是left 那么值的計算 =? ( " l i " , wrap).outerWidth() * _cache.count(也就是當前一個li的寬度*滾動的個數)。如方向是top 那么值的計算 =? ( " l i " , wrap).outerHeight() * _cache.count( 一個li的高度*滾動的個數 )。
?? 2. 下一頁按鈕事件的原理：
?????? 默認是auto(自動播放)，不斷向下一頁滾動，_scrollNext函數的原理：如果方向是left 那么marginLeft:動畫(animate)移動多少距離。接著回調函數把第一個li插入到最后上面來，且讓margin-left:0;接著又執行相應的動作 就是一個循環了。同理 向上滾動也是這個道理。
?? 3. 上一頁按鈕事件的原理：
????? 從后面獲取幾項元素(根據count個數來獲取多少個)。接著判斷left或者up方向。接著marginLeft或者marginTop，就這樣循環。
?? 4. 判斷傳進來的auto參數 如沒有傳 則默認顯示true 自動滾動 否則的 手動滾動。如果是自動的話 調用 setInterval 執行 _scrollNext滾動下一頁的方法。
示意圖如下：
????
jsfiddle的效果如下鏈接，可以點擊進去看看。
? http://jsfiddle.net/longen/3jXFN/embedded/result/
?依賴于HTML結構如下
<div id="example">
<div class="scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<span class="prev">前一個</span>
<span class="next">下一個</span>
</div>
如果沒有上下頁的話 上下頁按鈕可去掉HTML代碼。
可配置的參數如下
| ?targetElem | ? 目標元素 默認為空 需要傳入 |
| ? direction | ?'left',???? // 默認方向為left 或者自定義 up |
| ?btnPrev | ?'.prev',??? // 上一頁按鈕 |
| ?btnNext | ?'.next',??? // 下一頁按鈕 |
| ?auto | ?true,?????? // 默認為true 自動播放 |
| ?item | ?null,?????? // 一次滾動多少個 |
| ?speed | ?"1000",???? // 設置每次滾動動畫執行時間(單位毫秒，默認為1000)； |
| ?time | ?"3000",???? // 設置每次動畫執行間隔時間(單位毫秒，默認為3000)； |
| ?callback | ?null??????? // 點擊上一頁或者下一頁回調 |
?HTML代碼如下：
?
View Code
CSS代碼如下：
?
View Code
JS代碼如下：
?
View Code
代碼初始化方式分別如下：
?
View Code
我所理解的RESTful Web API [Web標準篇]
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
