zoukankan      html  css  js  c++  java
  • switchable图片切换

    前提: 最近由于项目的需要jquery "switchable图片切换"效果 所以趁着周末有空时间研究下 ,以前工作都依赖于kissy框架,所以也没有综合的写过类似的,如下图所示效果:

     

    有左右按钮 和下面的数字按钮 点击左右按钮或者数字按钮切换到上一屏或者下一屏等。

    HTML代码如下

    <div class="wrapper">
            <div class="focus" id="focus">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/01.jpg"/>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/02.jpg"/>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/03.jpg"/>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/04.jpg"/>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    css代码如下:

    <style>
        *{margin:0;padding:0;}
        body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
        .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .clearfix{zoom:1;}
        ul,li{list-style:none;}
        img{border:0;}
    
        .wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
        .focus{width:800px;height:280px;overflow:hidden;position:relative;}
        .focus ul{height:380px;position:absolute;}
    
        .focus ul li{float:left;position:relative;width:800px;height:280px;overflow:hidden;}
    
        .focus ul li div{position:absolute;overflow:hidden;}
        .focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
        .focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
        .focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;opacity:0.4;filter:alpha(opacity=40);}
        .focus .btn span.on{background:#fff;opacity:1;filter:alpha(opacity=100);}
    
        .focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(images/sprite.png) no-repeat 0 0;cursor:pointer;opacity:0.2;filter:alpha(opacity=20);}
        .focus .current {
            opacity:0.5;filter:alpha(opacity=50);
        }
        .focus .pre{left:0;}
        .focus .next{right:0;background-position:right top;}
        
     </style>

    JS代码如下:

    /**
     * switchable 切换
     */
    
     $(function(){
         function SwitchTab() {
            this.config = {
                wrapContainer   : '#focus',      // 焦点图的外部容器
                prev            : '.prev' ,      // 上一页按钮
                next            : '.next',       // 下一页按钮
                autoplay        : true,          // 是否自动播放 默认为自动
                time            : 3000,          // 间隔时间
                current         : 'current',     // 左右按钮当前状态
                on              : 'on',          // 数字按钮当前状态
                isNum           : true           // 是否动态生成数字按钮1,2,3,4 默认为true
            };
    
            this.cache = {
                index          : 0,          //当前的索引
                picTimer       : undefined   // 保存定时器的时间
                
            };
         }
    
         SwitchTab.prototype = {
    
            init: function(customConfig){
                this.config = $.extend(this.config, customConfig || {});
                var self = this,
                    _config = self.config,
                    _cache = self.cache;
                
                var sWidth = $(_config.wrapContainer).width(),   //获取焦点图外层容器宽度
                    len = $(_config.wrapContainer + ' ul li').length;
    
                /* 下面的代码初始化 数字按钮 按钮半透明 上一页和下一页按钮*/
                var btn = "<div class='btnBg'></div><div class='btn'>";
                if(_config.isNum) {
                    for(var i = 0; i < len; i+=1) {
                        btn+= "<span></span>";
                    }
                }
                
                btn += "</div><div class='preNext prev'></div><div class='preNext next'></div>";
                $(_config.wrapContainer).append(btn);
                
                //为小按钮添加鼠标滑入事件,以显示相应的内容
                $(_config.wrapContainer + ' .btn span') && 
                $(_config.wrapContainer + ' .btn span').mouseover(function(){
                    _cache.index = $(_config.wrapContainer + ' .btn span').index(this);
                    t && clearTimeout(t);
                    var t = setTimeout(function(){
                        hover();
                    },100);
                }).eq(0).trigger("mouseover");
    
                function hover(){
                    self.showPics(_cache.index,sWidth);
                }
    
                // 上一页 下一页按钮透明处理
                $(_config.wrapContainer + ' .preNext').hover(function(){
                    $(this).stop(true,false).addClass(_config.current);
                },function(){
                    $(this).stop(true,false).removeClass(_config.current);
                });
    
                // 上一页按钮
                $(_config.prev).click(function(){
                    _cache.index--;
                    if(_cache.index == -1) {
                        _cache.index = len - 1;
                    }
    
                    self.showPics(_cache.index,sWidth);
                });
    
                // 下一页按钮 
                $(_config.next).click(function(){
                    _cache.index++;
                    if(_cache.index == len) {
                        _cache.index = 0;
                    }
                    self.showPics(_cache.index,sWidth);
                });
    
                //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度
                $(_config.wrapContainer + ' ul').css("width",sWidth * len);
                
                if(_config.autoplay) {
                    // 鼠标滑到焦点图时候 停止自动播放 滑出时自动播放
                    $(_config.wrapContainer).hover(function(){
                        _cache.picTimer && clearInterval(_cache.picTimer);
                    },function(){
                        _cache.picTimer = setInterval(function(){
                            self.showPics(_cache.index,sWidth);
                            _cache.index++;
                            if(_cache.index == len) {
                                _cache.index = 0;
                            }
                        },_config.time);
                    }).trigger("mouseleave");
                }    
            },
            showPics: function(index,sWidth){
                var self = this,
                    _config = self.config,
                    nowLeft = -index*sWidth;
    
                //通过animate()调整ul元素滚动到计算出的position
                $(_config.wrapContainer + " ul").stop(true,false).animate({"left":nowLeft},300); 
                $(_config.wrapContainer + ' .btn span') &&
                $(_config.wrapContainer + ' .btn span').removeClass(_config.on).eq(index).addClass(_config.on); //为当前的按钮切换到选中的效果
            }
         }
    
         new SwitchTab().init({});
     });

    上面都有注释 就不用解释了哦!

  • 相关阅读:
    strut2 国际化
    strut2 常量
    strut2 自定义类型转换器
    strut2基于XML配置方式对Action中的指定方法校验
    strut2 输入校验2
    strut2 输入校验
    strut2 模拟拦截器
    strut2 多个文件上传
    strut2 单个文件上传
    2015.01.01今年的第一天
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/3366395.html
Copyright © 2011-2022 走看看