JS圖片自動或者手動滾動效果(支援left或者up)

龍恩0707發表於2014-01-05

JS圖片自動或者手動滾動效果

在談元件之前來談談今天遇到搞笑的事情，今天上午接到一個杭州電話 0571-28001187 即說是杭州人民法院的貌似說我用招商銀行信用卡在今年的6月23日借了招商銀行19800元人民幣，今天是最後一天沒有還款，說我其他銀行錢都被凍結了。以後有可能法律投訴我！我靠我無語啊我長這麼大從來都沒有辦理過信用卡，我根本就不需要辦理信用卡，所以一直以來也沒有辦過，招商一卡通是有一張但是從來沒有借過錢啊，身份證一直都身上帶著！基本上沒有脫離過身，今天我打電話過去他問我叫什麼名字我就報了名字我問是什麼情況然後說了很多大概意思就是剛剛上面的意思然後他接著問我身份證號是多少？我就沒有告訴他，我今天就半信半疑我到銀行取下錢看看是不是真的我的卡被凍結了結果我所有的銀行卡都沒有被凍結。我懷疑有可能是騙人的，如果有杭州的朋友可以試試打上面的電話然後隨便報個假名字讓他們查下看看他們怎麼說？就知道了！快過年了我也在這希望大家不要被一些人騙了，年底小心騙子(騙子很多的)。不多說了，下面來看看我這個JS效果原理吧！

基本原理

1. 開始獲取每次滾動的個數，如果引數item(int整形數字)傳進來，就取引數item個數否則的話個數count = 取外層容器寬度(或高度) / 每個li寬度(或高度)。然後判斷方向如果是left(向左) 那麼父級容器寬度ul * 2，否則的話ul高度*2. 然後計算下一次滾動多少距離。如果方向是left 那麼值的計算 = $("li", $wrap).outerWidth() * _cache.count(也就是當前一個li的寬度*滾動的個數)。如方向是top 那麼值的計算 = $("li", $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程式碼如下：

<div id="wrap">
        
        <!-- 純文字公告 -->
        <div class="demo1">
            <h3>文字自動滾動(向上)</h3>
            <div class="box" id='demo1'>
                <span class="title">塵世：</span>
                <div class='fl scroll1'>
                    <ul>
                       <li>我來測試1；我來測試1；</li>
                       <li>我來測試2;我來測試2;</li>
                       <li>我來測試3;我來測試3;</li>
                       <li>我來測試4;我來測試4;</li>
                       <li>我來測試5;我來測試5;</li>
                       <li>我來測試6；我來測試6；</li>
                       <li>我來測試7;我來測試7;</li>
                       <li>我來測試8;我來測試8;</li>
                       <li>我來測試9;我來測試9;</li>
                       <li>我來測試10;我來測試10;</li>
                       <li>我來測試11；我來測試11；</li>
                       <li>我來測試12;我來測試12;</li>
                       <li>我來測試13;我來測試13;</li>
                       <li>我來測試14;我來測試14;</li>
                       <li>我來測試15;我來測試15;</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="demo1">
            <h3>圖片自動滾動(向左)</h3>
            <div class="box" id='demo2'>
                <div class='scroll2'>
                     <ul>
                       <li><img src="images/1-1.jpg" alt="" /></li>
                       <li><img src="images/1-2.jpg" alt="" /></li>
                       <li><img src="images/1-3.jpg" alt="" /></li>
                       <li><img src="images/1-4.jpg" alt="" /></li>
                       <li><img src="images/1-5.jpg" alt="" /></li>
                       <li><img src="images/1-6.jpg" alt="" /></li>
                     </ul>
                </div>
            </div>
        </div>

        <div class="demo1">
            <h3>圖片滾動(向左,帶按鈕控制,每次滾動個數3)</h3>
            <div class="box" id='demo3'>
                <div class='scroll3'>
                     <ul>
                       <li><img src="images/1-1.jpg" alt="" /></li>
                       <li><img src="images/1-2.jpg" alt="" /></li>
                       <li><img src="images/1-3.jpg" alt="" /></li>
                       <li><img src="images/1-4.jpg" alt="" /></li>
                       <li><img src="images/1-5.jpg" alt="" /></li>
                       <li><img src="images/1-6.jpg" alt="" /></li>
                     </ul>
                </div>
                <span class="prev" style="margin-left:30px;">前一個</span>
                <span class="next">下一個</span>
            </div>
        </div>

        <div class="boxs absl" id='demo4'>
            <div class='scroll4'>
                 <ul>
                   <li><img src="images/1-1.jpg" alt="" /></li>
                   <li><img src="images/1-2.jpg" alt="" /></li>
                   <li><img src="images/1-3.jpg" alt="" /></li>
                   <li><img src="images/1-4.jpg" alt="" /></li>
                   <li><img src="images/1-5.jpg" alt="" /></li>
                   <li><img src="images/1-6.jpg" alt="" /></li>
                 </ul>
            </div>
        </div>

        <div class="boxs absr" id='demo5'>
            <div class='scroll5'>
                 <ul>
                   <li><img src="images/1-1.jpg" alt="" /></li>
                   <li><img src="images/1-2.jpg" alt="" /></li>
                   <li><img src="images/1-3.jpg" alt="" /></li>
                   <li><img src="images/1-4.jpg" alt="" /></li>
                   <li><img src="images/1-5.jpg" alt="" /></li>
                   <li><img src="images/1-6.jpg" alt="" /></li>
                 </ul>
            </div>
            <span class="prev">前一個</span>
            <span class="next">下一個</span>
        </div>

    </div>

View Code

CSS程式碼如下：

<style>
    * {
        margin:0;
        padding:0;
    }
    body {
        background:#e3e3e3;
        height:100%;
        font:normal normal 12px/24px "Microsoft yahei", Arial;
        padding-bottom:30px;
    }
    li{list-style:none;}
    h3{color:#333;font-size:14px;width:330px;margin:30px auto 0;}
    img{display:block;}
    #title{margin:20px 0; text-align:center;}

    #wrap {position:relative;width:800px;height:550px;margin:0 auto;background:#f8f8f8;border:1px solid #a3a3a3;border-radius:5px;-moz-border-radius:5px;}

    .box{width:400px;margin:0 auto;margin-top:10px;}
    .boxs{width:110px;margin:0;margin-top:30px;}
    .box span.title{float:left;height:30px;line-height:28px;border:1px solid #5AABCF;border-right:none;text-indent:5px;margin-left:29px;background:#73C5E5;color:#fff;}

    /*文字*/
    .scroll1{width:297px;height:30px;margin:0 auto;border:1px solid #5AABCF;overflow:hidden;}
    .scroll1 li{width:230px;height:30px;line-height:30px;text-indent:5px;}

    .scroll2 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll2 li{float:left;width:100px;height:100px;padding:5px;}

    .scroll3 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll3 li{float:left;width:100px;height:100px;padding:5px;}

    .scroll4 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll4 li{width:100px;height:100px;float:left;padding:5px;}
    .absl{position:absolute;left:30px; top:0;}

    .scroll5 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll5 li{width:100px;height:100px;float:left;padding:5px;}
    .absr{position:absolute;right:40px; top:0;}

    .prev,
    .next{float:left;margin-top:5px;margin-left:5px;padding:2px 5px;background:#73C5E5;color:#fff;cursor: pointer;}

    .download{width:300px;margin:0 auto;text-align:center;}

    .fl{float:left;}
    .fr{float:right;}
    .hide{display:none;}
  </style>

View Code

JS程式碼如下：

/**
 * JS圖片自動滾動效果
 * @time 2014-1-4
 * @author tugenhua
 * @email 879083421@qq.com
  **********************************************************************
 *完整的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>
 */

 function XYMarquee(options) {
    this.config = {
        targetElem         : '',         // 目標元素 預設為空 需要傳入
        direction          : 'left',     // 預設方向為left 或者自定義 up
        btnPrev            : '.prev',    // 上一頁按鈕
        btnNext            : '.next',    // 下一頁按鈕
        auto               : true,       // 預設為true 自動播放
        item               : null,       // 一次滾動多少個
        speed              : "1000",     // 設定每次滾動動畫執行時間(單位毫秒，預設為1000)；
        time               : "3000",     // 設定每次動畫執行間隔時間(單位毫秒，預設為3000)；
        callback           : null        // 點選上一頁或者下一頁回撥
    };

    this.cache = {
        timer     : null,
        count     : 1,
        marquee   :  true
    };

    this.init(options);
 }

 XYMarquee.prototype = {
    
    constructor: XYMarquee,

    init: function(options){

        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        // 初始化 判斷方向是left還是up
        if(_config.targetElem !== '') {
            
            var $wrap = $('div',$(_config.targetElem)),
                $parent = $("li", $wrap).parent();

            _cache.count = _config.direction == 'left' ? Math.floor($wrap.width() / $("li", $wrap).outerWidth()) : 
                                                      Math.floor($wrap.height() / $('li',$wrap).outerHeight());
            if(_config.item) {
                _cache.count = _config.item;
            }
            
            if(_config.direction == 'left') {
                $parent.css('width',$wrap.width() * 2 + 'px');
            }else {
                $parent.css('height',$wrap.height() * 2 + 'px');
            }
            $wrap.css("overflow", "hidden");
            var $value = _config.direction =="left" ? $("li", $wrap).outerWidth() * _cache.count : $("li", $wrap).outerHeight() * _cache.count;

            self._bindEnv($parent,$wrap,$value);
        }
    },
    /*
     * 所有的事件
     */
    _bindEnv: function($parent,$wrap,$value) {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        if(_config.auto) {

            $wrap.hover(function(){
                self._stopMarquee();
            },function(){
                self._autoPlay($parent,$wrap,$value);
            });
            // 自動播放
            self._autoPlay($parent,$wrap,$value);
        }

        // 點選上一頁事件 或者下一頁事件 
        $(_config.btnPrev,$(_config.targetElem)).click(function(){
            self._scrollPrev($parent,$wrap,$value);
            _config.callback && $.isFunction(_config.callback) && _config.callback();
        });
        
        $(_config.btnNext,$(_config.targetElem)).click(function(){
            self._scrollNext($parent,$wrap,$value);
            _config.callback && $.isFunction(_config.callback) && _config.callback();
        });
    },
    /*
     * 自動播放
     */
    _autoPlay: function($parent,$wrap,$value){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        _cache.timer = setInterval(function(){
            self._scrollNext($parent,$wrap,$value);
        }, _config.time);
    },
    /*
     * 向下頁滾動
     */
    _scrollNext: function($parent,$wrap,$value){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        if(_cache.marquee) {
            _cache.marquee = false;
            if(_config.direction == 'left') {
                $parent.animate({
                    "marginLeft": -$value
                },_config.speed,function(){

                    var $tempwrap = $("li", $wrap).slice(0, _cache.count);
                    $parent.append($tempwrap);
                    $parent.css("marginLeft", 0);
                    _cache.marquee = true;
                });
            }else {
                $parent.animate({
                    "marginTop": -$value
                },_config.speed,function(){
                    
                    var $tempwrap = $("li", $wrap).slice(0, _cache.count);
                    $parent.append($tempwrap);
                    $parent.css("marginTop", 0);
                    _cache.marquee = true;
                });
            }
        }
    },
    /*
     * 向上一頁滾動 從尾部開始 然後插入到最前面來
     */
    _scrollPrev: function($parent,$wrap,$value){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        if(_cache.marquee) {
            var $tempwrap = $("li", $wrap).slice( -_cache.count);
            _cache.marquee = false;
            $parent.prepend($tempwrap);
            if(_config.direction == 'left') {
                
                $parent.css("marginLeft", -$value);
                $parent.animate({
                    "marginLeft": 0
                },_config.speed,function(){
                    _cache.marquee = true;    
                });
            }else {
                $parent.css("marginTop", -$value);
                $parent.animate({
                    "marginTop": 0
                },_config.speed,function(){
                    _cache.marquee = true;    
                });
            }
        }
    },
    /*
     * 停止滾動
     */
    _stopMarquee: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        _cache.timer && clearInterval(_cache.timer);
    }
 };

View Code

程式碼初始化方式分別如下：

$(function(){
    new XYMarquee({
        targetElem: '#demo1',
        direction: 'up'
    });

    new XYMarquee({
        targetElem: '#demo2',
        direction: 'left',
        item:1
    });

    new XYMarquee({
        targetElem: '#demo3',
        direction: 'left',
        btnPrev: '.prev',
        btnNext: '.next',
        auto: false,
        item:3
    });

    new XYMarquee({
        targetElem: '#demo4',
        direction: 'up',
        item:1
    });

    new XYMarquee({
        targetElem: '#demo5',
        direction: 'up',
        btnPrev: '.prev',
        btnNext: '.next',
        auto: false,
        item:3
    });
});

View Code

Demo下載

JS圖片滾動（無縫、平滑、上下左右滾動）效果
2012-03-13
JS
JS仿QQ空間滑鼠停在長圖片時候圖片自動上下滾動效果
2014-01-02
JS
js滑鼠移動實現圖片立體滾動效果
2017-04-07
JS
頁面圖片自動滾動
2018-08-28
jQuery圖片無縫滾動效果
2018-05-18
jQuery
不同瀏覽器下圖片滾動效果的js
2009-07-07
瀏覽器JS
js獲取頁面向上或者向左滾動的尺寸
2017-04-14
JS
如何判斷滾動是否滾動到了網頁底部或者頂部
2017-03-13
網頁
js實現圖片上下滾動background-position
2020-10-05
JS
TextView跑馬燈效果，也就是，自動滾動文字的效果。
2011-12-07
TextView
Java——圖片滾動顯示
2017-04-30
Java
javascript實現圖片滾動
2014-02-11
JavaScript
（轉）jquery圖片左右滾動
2013-12-28
jQuery
原生javascript實現的水平圖片無縫滾動效果
2017-03-20
JavaScript
拖動滾動條實現內容自動載入效果
2017-04-03
隱藏滾動條保留滾動效果
2018-04-19
jquery實現的垂直或者水平無縫滾動外掛
2017-03-22
jQuery
實現隨著滾動條滾動，導航會自動切換的效果
2018-02-28
js頁面全屏垂直滾動效果
2017-04-17
JS
js網頁圖片每日自動更新
2017-04-07
JS網頁
滑鼠雙擊頁面實現自動滾動效果
2017-03-17
js 滾輪控制圖片縮放大小和拖動
2018-11-19
JS
js拖動實現左右圖片對比效果
2017-04-15
JS
浮動圖片（JS）
2006-02-21
JS
javascript如何動態載入js或者css檔案
2017-03-08
JavaScriptJSCSS
滑鼠懸浮元素上下滑動增加或者減少高度效果
2017-04-06
線上直播原始碼，JS動態效果之，側邊欄滾動固定效果
2022-06-27
原始碼JS
js程式碼實現的圖片水平無縫滾動
2017-03-16
JS
Magnifier.js - 支援滑鼠滾輪縮放的圖片放大鏡效果
2014-01-14
NifiJS
js實現的模擬滾動條效果
2017-03-15
JS
側欄懸浮導航選單拖動滾動條可以自動定位效果
2017-04-01
動態載入js或者css檔案程式碼例項
2017-03-30
JSCSS
按鈕滾動條效果
2016-05-19
js和css3實現的圖片立體滾動切換效果程式碼例項
2017-04-13
JSCSSS3
移動端觸屏拖動頁面滾動效果
2017-02-22
CSS 例項之滾動的圖片欄
2018-09-23
CSS
左右帶有按鈕圖片水平滾動
2018-12-25
Form中新增圖片或者LOGO
2009-11-26
ORMGo

JS圖片自動或者手動滾動效果(支援left或者up)

相關文章