zoukankan      html  css  js  c++  java
  • 【jQuery插件】slideImg广告轮播,焦点图效果

    感谢 留痕 网友提交的bug,bug主要原因是我忽视了多个广告轮播和样式重名的问题;经简单的修改已经修复该问题。谢谢 留痕 网友。
    ==============华丽的分割线================
    广告轮播,焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455

    这次这个插件主要解决了两个问题:

    1.当焦点图只有一张的时候不滚动;

    2.当鼠标经过右下角图片选择的控制点上加了延时,避免在用户不经意划过这些控制点的时候切换图片。

    具体插件代码:

    /**
     * @author 愚人码头
     * User: feiwen
     * Date: 11-7-11
     * Time: 下午4:30
     * Settings:{
     *     speed:滚动速度
     *     timer:滚动的时间间隔
     * }
     */
    (function($) {
        $.fn.slideImg = function(settings) {
            settings = jQuery.extend({
                speed: "normal",
                timer: 1000
            }, settings);
            return this.each(function() {
                $.fn.slideImg.scllor($(this), settings);
            });
        };
    
        $.fn.slideImg.scllor = function($this, settings) {
            var index = 0;
            var scllorer=$(".img-box li",$this);
            var size=scllorer.size();
            var slideH=scllorer.outerHeight();
            var $selItem=$("<ul></ul>",{
                "class":"flash_item",
                html:function(){
                    var $selItemHTML="";
                    if(size==1){
                        return;
                    }else if(size>1){
                        for(var i=0;i<size ;i++){
                            i==0?$selItemHTML+='<li class="on">'+(i+1)+'':$selItemHTML+='<li class="">'+(i+1)+'</li>';
                        }
                        return  $selItemHTML;
                    }
                }
            }).appendTo($this);
            var li = $(".flash_item li",$this);
            var showBox = $(".img-box",$this);
            var intervalTime=null;
            li.hover(function() {
                var that=this;
                if (intervalTime) {
                    clearInterval(intervalTime);
                }
                intervalTime = setTimeout(function() {
                    index = li.index(that);
                    ShowAD(index);
                }, 200);
            }, function() {
                clearInterval(intervalTime);
                interval();
            });
            showBox.hover(function() {
                if (intervalTime) {
                    clearInterval(intervalTime);
                }
            }, function() {
                clearInterval(intervalTime);
                interval();
            });
            function interval(){
                intervalTime = setInterval(function() {
                    ShowAD(index);
                    index++;
                    if (index == size) {
                        index = 0;
                    }
                }, settings.timer);
            }
            interval();
            var ShowAD = function(i) {
                showBox.animate({ "top": -i * slideH }, settings.speed);
                li.eq(i).addClass("on").siblings().removeClass("on");
            };
        };
    })(jQuery);

    demo演示地址:http://www.css88.com/demo/slide1/

  • 相关阅读:
    Linux下运行当前目录需要加./的原因
    Linux mint界面过小无法安装(解决方法)
    哈工大机考:数组逆置
    哈工大机考:字符串内排序
    哈工大机考:求最大值
    八皇后问题的简单分析
    哈工大机考:字符串去特定字符
    哈工大机考:计算两个矩阵的乘积
    iOS 字号转换问题
    iOS 十六进制的颜色值转换为UIColor
  • 原文地址:https://www.cnblogs.com/piuba/p/2818433.html
Copyright © 2011-2022 走看看