• 技术文章 >web前端 >js教程

    SuperSlide2实现图片滚动特效_图象特效

    2016-05-16 16:43:55原创749
    这里贴一下自己演示的代码,期望对使用的朋友所有启发,我这里是结合了两个例子实现的

    .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演示代码:

    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" });
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:SuperSlide2 图片滚动
    上一篇:javascript 控制input只允许输入的各种指定内容_javascript技巧 下一篇:$(document).ready(function() {})不执行初始化脚本_jquery
    千万级数据并发解决方案

    相关文章推荐

    • 一篇搞定JavaScript循环• 聊聊angular中进行内容投影的方法• 浅析Angular变更检测机制,聊聊如何进行性能优化?• Angular知识点分享:聊聊表单、管道、绑定、指令、通信和周期• JavaScript对象的构造函数和new操作符(实例详解)
    1/1

    PHP中文网