HTML代码:

<div id=fadImgs class=flash_img>
   <ul class=img-box>
            <li>
                <a href="http://shop.faea.com.cn/goods.php?id=46" title="6000台企鹅F1"><img src="http://img.faea.com.cn/www/2013/0726/20130726061455940.jpg" alt="6000台企鹅F1" class="focus-img"/></a>
            </li>
        <li>
                <a href="http://bbs.faea.com.cn/thread-6063-1-1.html" title="打假"><img src="http://img.faea.com.cn/www/2013/0726/20130726101939893.png" alt="打假" class="focus-img"/></a>
            </li>
        <li>
                <a href="http://www.faea.com.cn/product/f2/" title="企鹅F2"><img src="http://www.faea.com.cn/statics/images/F2.jpg" alt="企鹅F2" class="focus-img"/></a>
            </li>
        <li>
                <a href="http://www.faea.com.cn/product/f1/" title="企鹅F1"><img src="http://img.faea.com.cn/www/2013/0725/20130725100014513.jpg" alt="企鹅F1" class="focus-img"/></a>
            </li>
            </ul>
             
</div>

JQ插件代码:

(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=$this.find(".img-box li");
        var size=scllorer.size();
        var slideH=scllorer.outerHeight();
                   
        var $selItem2=$("<div></div>",{"class":"transparent_class"}).appendTo($this);
        var $selItem=$("<div></div>",{
            "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+='<span class="on">'+(i+1)+'':$selItemHTML+='<span class="">'+(i+1)+'</span>';
                    }
                    return  $selItemHTML;
                }
            }
        }).appendTo($this);
                   
        var li = $(".flash_item span");
        var showBox = $(".img-box");
        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);
//                      showBox.children().eq(i).slideDown('normal');
//                      showBox.children().not(showBox.children().eq(i)).slideUp('normal');
            $(".flash_item span").eq(i).addClass("on").siblings().removeClass("on");
        };
    };
})(jQuery);

启用插件JQ:

<script type=text/javascript>
$(function(){$("#fadImgs").slideImg({speed: "normal",timer: 3000    });});
</script>

CSS样式:

.flash_img {
    POSITION: relative; WIDTH: 960px; HEIGHT: 640px; OVERFLOW: hidden; margin-left:auto; margin-right:auto
}
.flash_img .img-box {
    POSITION: absolute
}
.flash_img .img-box LI {
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.transparent_class {
    /*POSITION: absolute; FILTER: alpha(opacity=30); WIDTH: 100%; BOTTOM: -1px; BACKGROUND: #000; HEIGHT: 42px; LEFT: 0px; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3*/
}
.flash_item {
    POSITION: absolute; TEXT-ALIGN: center; BOTTOM: 40px; RIGHT: 40px
}
.flash_item SPAN {
    POSITION: relative; TEXT-ALIGN: center; LINE-HEIGHT: 15px; TEXT-INDENT: -9999px; MARGIN: 0px 0px 0px 8px; WIDTH: 15px; DISPLAY: block; BACKGROUND: #C1C1C1; FLOAT: left; HEIGHT: 15px; CURSOR: pointer
}
.flash_item SPAN.on {
    BACKGROUND: #ff9900; COLOR: #ffffff; FONT-WEIGHT: bold
}

OK!大功告成!

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)