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/

  • 相关阅读:
    设计模式学习总结:(7)工厂方法模式和抽象工厂模式
    设计模式学习总结:(6)桥模式
    设计模式学习总结:(5)装饰模式
    设计模式学习总结:(4)观察者模式
    设计模式学习总结:(3)策略模式
    设计模式学习总结:(2)模板方法模式
    [算法总结]DFS(深度优先搜索)
    [总结]拓扑排序
    [总结]树与图的遍历
    [算法总结]康托展开Cantor Expansion
  • 原文地址:https://www.cnblogs.com/piuba/p/2818433.html
Copyright © 2011-2022 走看看