• 0712-2888027 189-8648-0214
    微信公眾號

    孝感風信網絡科技有限公司微信公眾號

    當前位置:主頁 > 技術支持 > Javascript/JQuery > jquery點擊圖標滾動同時自動播放

    jquery點擊圖標滾動同時自動播放

    時間:2024-03-27來源:風信官網 點擊: 364次

    <div class="Links">
    <h3>123</h3>
    <span class="prex">上一頁</span><span class="next">下一頁</span>

    <div class="picBd">
    <ul>
    <li><a href="#"><img src='#' border='0' width='89' height='103'/></a></li>
    <li><a href="#"><img src='#' border='0' width='89' height='103'/></a></li>
    </ul>
    </div>
    </div>

    jquery代碼

    <script>
    $(function(){
    var page = 1;
    var i = 11;

    var $pre = $('.brands span.pre')
    var $next = $('.brands span.next');
    var $showMoney = $(".showMoney");
    var $autoFun;
    //@Mr.Think***調用自動滾動
    autoSlide();
    //@Mr.Think***向前滾動
    $next.click(function(){

    var $parent = $(this).parents("div.all");
    var $p_show = $parent.find("div.showMoney");
    var $content = $parent.find("div.brands");
    var p_width = $content.width();
    var len = $p_show.find("li").length;
    var page_count = Math.ceil(len / i);
    if(!$p_show.is(":animated")){
    if(page == page_count){
    $p_show.animate({left:"0px"},"slow");
    page = 1;
    }else{
    $p_show.animate({left:'-='+p_width},"slow");
    page++;
    }
    }
    });
    //@Mr.Think***停止滾動
    clearFun($showMoney);
    clearFun($pre);
    clearFun($next);
    clearFun($num);
    //@Mr.Think***事件劃入時停止自動滾動
    function clearFun(elem){
    elem.hover(function(){
    clearAuto();
    }, function(){
    autoSlide();
    });
    }
    function autoSlide(){
    $next.trigger('click');
    $autoFun = setTimeout(autoSlide, 1000);//此處不可使用setInterval,setInterval是重復執行傳入函數,這會引起第二次劃入時停止失效
    }
    //@Mr.Think***清除自動滾動
    function clearAuto(){
    clearTimeout($autoFun);
    }

    $pre.click(function(){
    var $parent = $(this).parents("div.all");
    var $p_show = $parent.find("div.picBd");
    var $content = $parent.find("div.brands");
    var p_width = $content.width();
    var len = $p_show.find("li").length;
    var page_count = Math.ceil(len / i);
    if( !$p_show.is(":animated") ){
    if( page == 1 ){
    $p_show.animate({ left : '-='+p_width*(page_count-1) }, "slow");
    page = page_count;
    }else{
    $p_show.animate({ left : '+='+p_width }, "slow");
    page--;
    }
    }
    });
    });

    </script>

    欄目列表
    推薦內容
    熱點內容
    展開
    动漫h精品无码一区二区三区,欧美日韩精品一区二区,午夜麻豆国产精品,加勒比中文字幕无码,亚洲日本va中文字幕区