jQuery實現自動左右滾動效果的代碼實例

jQuery實現自動左右滾動效果的代碼實例
思路:
點擊滾動模式下,是爲點擊(向前/向後/數字)添加click事件,經過控制展現區塊left值實現切換.
1.向前(左):當在第一個版面時,滾動到最後一個頁面,不然,累加left值,向前滾動;
2.向後(右):當在最後一個版面時,滾動到第一個頁面,不然,累減left值,向後滾動;
3.數字點擊:利用index(…)獲取當前點擊在數字列表中的索引值, 而後索引值爲倍數爲外圍寬度負值.便可達到切換

......
//***調用自動滾動
autoslide();
......
 //***中止滾動
 clearfun($showbox);
 clearfun($pre);
 clearfun($next);
 clearfun($num);
 //***事件劃入時中止自動滾動
 function clearfun(elem){
     elem.hover(function(){
         clearauto();
     }, function(){
         autoslide();
     });
 }
 //***自動滾動
 function autoslide(){
     $next.trigger('click');
     $autofun = settimeout(autoslide, 3000);//此處不可以使用setinterval,setinterval是重複執行傳入函數,這會引發第二次劃入時中止失效
 }
 //***清除自動滾動
 function clearauto(){
     cleartimeout($autofun);
 }

完整實例代碼

<style>
/*demo css教程*/
.ibox{width:850px; height:210px; background:#ddd; margin:1em auto; border:1em solid #ddd; position:relative; overflow:hidden}
.ibox .showbox{position:absolute;left:0;width:2550px; height:170px; background:#fff}
.ibox .showbox ul li{float:left;margin:7px}
.ibox .showbox ul li img{width:150px; height:150px; border:3px solid #a40000}
.ibox span{position:absolute;padding:2px 5px; background:#fff; cursor:pointer;}
.ibox span.pre{left:10px; bottom:0}
.ibox span.next{right:10px; bottom:0}
.ibox span.num{right:45%; bottom:0; background:#ddd;line-height:18px;}
.ibox span.num li{display:inline;margin:0 5px; padding:1px 5px; line-height:18px}
.ibox span.num .numcur{background:#a40000; color:#fff}
</style>
<script>

$(function(){
    //@mr.think***變量
    var $cur = 1;//初始化顯示的版面
    var $i = 5;//每版顯示數
    var $len = $('.showbox>ul>li').length;//計算列表總長度(個數)
    var $pages = math.ceil($len / $i);//計算展現版面數量
    var $w = $('.ibox').width();//取得展現區外圍寬度
    var $showbox = $('.showbox');
    var $num = $('span.num li')
    var $pre = $('span.pre')
    var $next = $('span.next');
    var $autofun;
 //@mr.think***調用自動滾動
    autoslide();
 //@mr.think***向前滾動
    $pre.click(function(){
        if (!$showbox.is(':animated')) {  //判斷展現區是否動畫
            if ($cur == 1) {   //在第一個版面時www.3ppt.com,再向前滾動到最後一個版面
                $showbox.animate({
                    left: '-=' + $w * ($pages - 1)
                }, 500); //改變left值,切換顯示版面,500(ms)爲滾動時間,下同
                $cur = $pages; //初始化版面爲最後一個版面
            }
            else {
                $showbox.animate({
                    left: '+=' + $w
                }, 500); //改變left值,切換顯示版面
                $cur--; //版面累減
            }
            $num.eq($cur - 1).addclass('numcur').siblings().removeclass('numcur'); //爲對應的版面數字加上高亮樣式,並移除同級元素的高亮樣式
        }
    });
    //@mr.think***向後滾動
    $next.click(function(){
        if (!$showbox.is(':animated')) { //判斷展現區是否動畫
            if ($cur == $pages) {  //在最後一個版面時,再向後滾動到第一個版面
                $showbox.animate({
                    left: 0
                }, 500); //改變left值,切換顯示版面,500(ms)爲滾動時間,下同
                $cur = 1; //初始化版面爲第一個版面
            }
            else {
                $showbox.animate({
                    left: '-=' + $w
                }, 500);//改變left值,切換顯示版面
                $cur++; //版面數累加
            }
            $num.eq($cur - 1).addclass('numcur').siblings().removeclass('numcur'); //爲對應的版面數字加上高亮樣式,並移除同級元素的高亮樣式
        }
    });
    //@mr.think***數字點擊事件
    $num.click(function(){
        if (!$showbox.is(':animated')) { //判斷展現區是否動畫
            var $index = $num.index(this); //索引出當前點擊在列表中的位置值
            $showbox.animate({
                left: '-' + ($w * $index)
            }, 500); //改變left值,切換顯示版面,500(ms)爲滾動時間
            $cur = $index + 1; //初始化版面值,這一句可避免當滾動到第三版時,點擊向後按鈕,出面空白版.index()取值是從0開始的,故加1
            $(this).addclass('numcur').siblings().removeclass('numcur'); //爲當前點擊加上高亮樣式,並移除同級元素的高亮樣式
        }
    });
    //@mr.think***中止滾動
    clearfun($showbox);
    clearfun($pre);
    clearfun($next);
    clearfun($num);
    //@mr.think***事件劃入時中止自動滾動
    function clearfun(elem){
        elem.hover(function(){
            clearauto();
        }, function(){
            autoslide();
        });
    }
    //@mr.think***自動滾動
    function autoslide(){
        $next.trigger('click');
        $autofun = settimeout(autoslide, 3000);//此處不可以使用setinterval,setinterval是重複執行傳入函數,這會引發第二次劃入時中止失效
    }
    //@mr.think***清除自動滾動
    function clearauto(){
        cleartimeout($autofun);
    }
});
</script>

<div id="demo" class="ibox">
 <div class="showbox">
  <ul>
   <li><img src="/static-data/assets/6/f8a9dd53720bf31b5917915e8222c27370a3681c_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/68e9a7a8476e26a1022fa5e39ccdda669a5d4f08_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/20417dfc945bae6c720a660625e9652a154c2c94_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/f4a9f29299f3dba6e7af0ac3c5aff93e01f874d3_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/ca6f0c9ac0c6e3bfce827cd92833e1db620b6377_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/809fcfbb8a1f58d1d47a760fd4283556cce201ef_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
   <li><img src="/static-data/assets/6/49d6ae8901500f473a2e3e58e5b5ddc0e788bc9d_m.jpg" alt="demo" title="demo" /></li>
  </ul>
 </div>
    <span class="pre">&laquo;向左滾動</span><span class="next">向右滾動&raquo;</span><span class="num"><ol><li class="numcur">1</li><li>2</li><li>3</li></ol></sapn>
</div>

自動滾動模式是基於點擊滾動模式增強的,無非是添加了自動滾動事件,以及當鼠標劃上時清除動畫事件.
這裏要說明一點.demo演示中,爲向前/向後/數字/區域都添加了當鼠標劃過期都添加了清除動畫事件.可是,若是你的頁面中,這幾個須要添加清除動畫事件的都在同一個區域內,徹底能夠用trigger(…)模擬實現自動滾動.
還有一點,自動滾動中是用settimeout(「fun」,interval)實現,而不用setinterval(「fun」,interval)實 現. 緣由在於,setinterval是在間隔時間後重復執行傳入的函數,而settimeout只在間隔時間後執行一次函數傳入函數,這樣便可避免第二次鼠 標劃入中止動畫區域時不能清除動畫.