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