SuperSlide2实现图片滚动特效


Posted in Javascript onJune 20, 2014

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

.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" });
Javascript 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 #Javascript
js常用数组操作方法简明总结
Jun 20 #Javascript
JS实现闪动的title消息提醒效果
Jun 20 #Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 #Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 #Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 #Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
PHP实现简易图形计算器
2020/08/28 PHP
一端时间轮换的广告
2006/06/26 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
Python群发邮件实例代码
2014/01/03 Python
python多线程扫描端口示例
2014/01/16 Python
理解Python中函数的参数
2015/04/27 Python
python查询sqlite数据表的方法
2015/05/08 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
人事主管岗位职责
2014/01/30 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
优秀大学生自荐信
2014/06/09 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
学校运动会感想
2015/08/10 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers