jQuery焦点图切换特效插件封装实例

2020-05-23 06:16:34易采站长站整理

            });
            wrapper.data(‘timeid’, window.setTimeout(start, settings.delay * 1000))
        };
        var stop = function () {
            window.clearTimeout(wrapper.data(‘timeid’))
        };
        wrapper.hover(function () {
            stop()
        },
        function () {
            start()
        });
        var imgLoader = new Image();
        imgLoader.onload = function () {
            imgLoader.onload = null;
            init()
        };
        imgLoader.src = firstPic.attr(‘src’)
    }
})(jQuery);

下面是图片焦点图的css样式;

div.slideBox{ position:relative;height:300px; overflow:hidden; margin:0 auto;}
    div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;}
    div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;}
    div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;}
    div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;}
    div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;}
    div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;}
    div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;}
    div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;}
    div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;}
    div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}
    div.slideBox div.tips div.nums a.active{ background-color:#093;}

页面配置: