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库还是自己写代码?
Jan 28 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
javascript实现简单打字游戏
Oct 29 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
一个用于网络的工具函数库
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
英语分层教学实施方案
2014/06/15 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
Golang 字符串的常见操作
2022/04/19 Golang