SuperSlide2实现图片滚动特效

2019-11-27 16:00:39来源：爱站网阅读 ()

Superslide是用于网站特效调用的功能，这个功能可以解决标签切换、焦点地图切换等大部分效果，下面爱站技术频道小编将为大家带来SuperSlide2实现图片滚动特效，一起来看看吧!

这里贴一下自己演示的代码，期望对使用的朋友所有启发，我这里是结合了两个例子实现的

.focus-item ul li.item{
  text-align: center;
}
.scroll-area .prev,.scroll-area .next{
  position: absolute;
  bottom: 590px;
  width: 29px;
  height: 64px;
  opacity: 0.6;
  overflow: hidden;
  display: none;
  text-indent: -999px;
  border: medium none;
  background: url('/images/arrowLR.png') no-repeat scroll 0% 0% transparent;
}
.scroll-area .prev{
  left: 0px;
  background-position: -50px 0px;
}
.scroll-area .next{
  right: 0px;
}
.scroll-area .bdOn .prev,.scroll-area .bdOn .next{
  display: block;
}
 
.scroll-area .focus-hd{
  /*width: 832px;*/
  /*left: 60px;*/
  /*position: absolute;*/
  /*height: 100px;*/
  /*overflow: hidden;*/
  left: 63px;
  position: absolute;
}
 
.focus-hd .sNext, .focus-hd .sPrev{
  float: left;
  display: block;
  width: 14px;
  height: 47px;
  text-indent: -9999px;
  background: url('/images/sprites1008.png') no-repeat scroll 0px -3046px transparent;
}
.focus-hd .sNext{
  background-position: 0px -2698px;
}
 
.focus-hd .show_bottom_nav {
  float: left;
  margin: 0px 6px;
  display: inline;
  width: 832px;
  overflow: hidden;
}
.focus-hd .show_bottom_nav ul li{
  margin-left:15px;
}

html演示代码：

<div id="" class="scroll-area">
  <div class="focus-item">
    <ul>
      <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1">
        <img src="/attachments/news_gallery/20140528162328_454.jpg" alt="标题1" />
      </li>
      <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2">
        <img src="/attachments/news_gallery/20140528162328_733.jpg" alt="标题2" />
      </li>
    </ul>
    <a class="prev" href="javascript:void(0)"></a>
    <a class="next" href="javascript:void(0)"></a>
  </div>
  <div class="focus-hd" style="">
    <a class="sPrev prevStop" href="javascript:void(0)">←</a>
    <div class="show_bottom_nav">
      <ul>
        <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1" style="float: left">
          <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_454.jpg" alt="标题1" />
        </li>
        <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2" style="float: left">
          <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_733.jpg" alt="标题2" />
        </li>
      </ul>
    </div>
    <a class="sNext" href="javascript:void(0)">→</a>
  </div>
</div>

js脚本代码：

jQuery(".scroll-area").slide({titCell:'.focus-hd li',mainCell:'.focus-item ul',delayTime:0,trigger:0,autoPlay:true});
jQuery(".scroll-area .focus-item").hover(function(){jQuery(this).addClass("bdOn")},function(){jQuery(this).removeClass('bdOn')});
//小标签的导航
jQuery(".scroll-area .show_bottom_nav").slide({ mainCell:"ul",delayTime:100,vis:5,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext" });

以上就是爱站技术频道小编给大家述说的SuperSlide2实现图片滚动特效，其实这些知识大家都能掌握，同时学习编程一定要找对方法。

原文链接:https://js.aizhan.com/develop/JavaScript/10359.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有