淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 456|回复: 5
收起左侧

1920全屏轮播百叶窗效果代码三屏

[复制链接]
  • TA的每日心情
    加油
    2017-12-4 13:38
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    6

    主题

    29

    帖子

    1508

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1508

    最佳新人

    发表于 2017-11-17 15:19:40 | 显示全部楼层 |阅读模式
    <div data-title="" style="width:1920px;height:550px;">
       <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:550px;padding:0px;border:0;position: absolute;left:50%; top:auto;">
          <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:550px;padding:0px;border:0;position: absolute;left:-960px;top:-0px;z-index:2;overflow: hidden;">
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.05,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -0px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -0px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -0px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.1,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -100px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -100px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -100px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.15,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -200px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -200px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -200px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.2,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -300px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -300px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -300px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.25,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -400px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -400px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -400px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.3,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -500px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -500px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -500px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.35,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -600px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -600px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -600px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.4,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -700px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -700px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -700px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.45,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -800px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -800px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -800px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.5,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -900px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -900px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -900px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.55,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1000px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1000px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1000px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.6,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1100px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1100px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1100px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.65,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1200px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1200px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1200px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.7,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1300px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1300px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1300px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.75,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1400px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1400px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1400px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.8,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1500px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1500px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1500px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.85,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1600px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1600px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1600px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.9,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1700px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1700px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1700px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':0.95,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1800px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1800px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1800px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>
    <div style="position:relative;width:100px;display:block;float:left;height:550px;overflow:hidden;background-color:transparent;">
      <div  class="shiyan-zhushou J_TWidget"  data-widget-config="{'hasTriggers':false,'contentCls': 'taomashen_com_shiyan','navCls': 'taomashen_com','duration':1,'effect':'scrollx','easing':'easeNone','interval':5,'autoplay':true,'triggerType':'mouse','circular':true,'autoplay': true,'pauseOnHover':false}" data-widget-type="Slide" style="height:550px;position:relative;">
        <ul class="taomashen_com_shiyan" style="width: 100px; height: 550px; position: absolute;">
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片1地址); background-position: -1900px 0px;" class="ks-switchable-panel-internal16"> <a href="链接1" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片2 地址); background-position: -1900px 0px;" class="ks-switchable-panel-internal16"> <a href="链接2" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
          <li style="width: 100px; display: block; height: 550px; float: left; background-image: url(图片3地址); background-position: -1900px 0px;" class="ks-switchable-panel-internal16"> <a href="链接3" style="width:100px;;display:block;height:550px;" target="_blank"></a></li>
        </ul>
      </div>
    </div>

          </div>
       </div>
    </div>

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2017-12-4 13:38
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    6

    主题

    29

    帖子

    1508

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1508

    最佳新人

     楼主| 发表于 2017-11-17 15:20:35 | 显示全部楼层
    别看特别长,只要换图片换链接地址,改改尺寸就行了

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    45

    主题

    2281

    帖子

    12万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    120740

    活跃会员热心会员

    发表于 2017-11-17 16:21:35 | 显示全部楼层
    如果能出个动态的效果图GIF   那就非常完美了
  • TA的每日心情
    加油
    昨天 08:43
  • 签到天数: 1171 天

    连续签到: 2 天

    [LV.10]功行圆满

    9

    主题

    129

    帖子

    25万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    251938

    发表于 2017-11-18 08:49:43 | 显示全部楼层
    不错,效果很好
    怎么才能成为一个高级的设计师,对很多的东西只是懂点基础,还需要怎么下功夫增长自己的知识。
  • TA的每日心情
    加油
    2017-12-4 13:38
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    6

    主题

    29

    帖子

    1508

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1508

    最佳新人

     楼主| 发表于 2017-11-18 09:50:25 | 显示全部楼层
    caspy 发表于 2017-11-17 16:21
    如果能出个动态的效果图GIF   那就非常完美了

    这个就是自动播放的轮播。你可以调整变换速度的

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2017-12-4 13:38
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    6

    主题

    29

    帖子

    1508

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1508

    最佳新人

     楼主| 发表于 2017-11-18 09:58:49 | 显示全部楼层

    谢谢亲的肯定

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|坛主个人微信公众号|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-12-16 07:44 , Processed in 0.211062 second(s), 17 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表