zoukankan      html  css  js  c++  java
  • SuperSlidev2.1 轮播图片和无缝滚动

    使用方法,狠狠的点击下面链接

    http://down.admin5.com/demo/code_pop/18/562/index.html

    简单使用方法如下

    html

    <div class="bd">
    <ul>
    <li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
    <li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
    <li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
    <li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
    <li _src="url(images/5.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
    </ul>
    </div>

    <div class="hd"><ul></ul></div>
    <span class="prev"></span>
    <span class="next"></span>

    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("background-image", 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"});

  • 相关阅读:
    洛谷 P1550 [USACO08OCT]Watering Hole G(最小生成树||超级源点)
    洛谷 P2168 [NOI2015]荷马史诗(Huffman树|编码)
    洛谷 P5658 括号树(DFS)
    用堆来求中位数
    c++各种输入输出(文件输入输出,标准输入输出,一些字符串)
    Hello,world!
    【NOIP2013】花匠
    【洛谷习题】最长上升子序列
    【NOIP2014】联合权值
    【NOIP2014】飞扬的小鸟
  • 原文地址:https://www.cnblogs.com/qiao20/p/5683596.html
Copyright © 2011-2022 走看看