首頁 > web前端 > js教程 > 主體

SuperSlidev2.1實現輪播圖片和無縫滾動的實例代碼

零下一度
發布: 2017-06-26 14:55:59
原創
1556 人瀏覽過

SuperSlidev2.1輪播圖片與無縫捲動

使用方法點選連結:
 

簡單使用方法如下

html




  • < ;li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;">< /a>





     

    js

    /***全螢幕輪播banner效果***/
    $( ".fullSlide").hover( function(){
    $(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
    } ,
    function(){
    $(this).find(".prev,.next").fadeOut()
    });
    $(".fullSlide").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun : function(i) {
    var curLi = jQuery(".fullSlide .bd li").eq(i);
    if ( !! curLi.attr("_src")) {
    curLi.css("背景圖片", curLi.attr("_src")).removeAttr("_src")
    }
    }
    # } );
    /***輪播效果***/
    $(".dtbd").slide({titCell: ".hd li",mainCell:".bd ul",autoPlay:true});

    /***捲動圖片***/
    $(".hzhb").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:6, interTime :50,trigger:"click",prevCell:".prev",nextCell:".next"});

    #

    以上是SuperSlidev2.1實現輪播圖片和無縫滾動的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板