SuperSlide2实现图片滚动特效

前端技术 2023/09/01 JavaScript

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

.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\" });

本文地址：https://www.stayed.cn/item/2487

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案