仿淘宝首页jquery轮播焦点图

查看演示立即下载

插件描述：jquery仿淘宝首页焦点轮播图

实现代码

引用jquery到你的页面<head>与</head>之间

1	`<script` `type="text/javascript"` `src="js/jquery.min.js"></script>`

Css

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{ font-size: 12px; background-color: #E8E8E8; }
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}
/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
/* banner */
.banner{ width: 520px; height: 280px; position: relative; overflow: hidden; margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 10%; }
.banner-btn{display:none;}
.banner-btn a{display:block;line-height:40px;position:absolute;top:120px;width:40px;height:40px;background-color:#000;opacity:0.3;filter:alpha(opacity=30) color:rgb(255, 255, 255);overflow:hidden;z-index:4;}
.prevBtn{left:5px;}
.nextBtn{right:5px;}
.banner-img{font-size:0;*word-spacing:-1px;/* IE6、7 */ letter-spacing:-3px;position:relative;}
.banner-img li{display:inline-block;*display:inline;*zoom:1;/* IE6、7 */ vertical-align:top;letter-spacing:normal;word-spacing:normal;font-size:12px;}
.banner i{background:url(/01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png)  no-repeat;width:15px;height:23px;cursor:pointer;margin:8px 0 0 12px;display:block;}
.banner .nextBtn i{background-position:-200px -24px;}
.banner .prevBtn i{background-position:-200px 0px;}
.banner-circle{position:absolute;left:50%;bottom:15px;height:13px;text-align:center;font-size:0;border-radius:10px;background:rgba(255,255,255,0.3);filter:alpha(opacity:30);}
.banner-circle li{border-radius:10px;margin:2px;display:inline-block;display:-moz-inline-stack;vertical-align:middle;zoom:1;}
.banner-circle li a{display:block;padding-top:9px;width:9px;height:0;border-radius:50%;background:#B7B7B7;overflow:hidden;}
.banner-circle .selected a{background:#F40;}

<script type="text/javascript">
    $(function() {
        var $banner = $('.banner');
        var $banner_ul = $('.banner-img');
        var $btn = $('.banner-btn');
        var $btn_a = $btn.find('a') var v_width = $banner.width();
 
        var page = 1;
 
        var timer = null;
        var btnClass = null;
 
        var page_count = $banner_ul.find('li').length; //把这个值赋给小圆点的个数
        var banner_cir = "<li class='selected' href='#'><a></a></li>";
        for (var i = 1; i < page_count; i++) {
            //动态添加小圆点
            banner_cir += "<li><a href='#'></a></li>";
        }
        $('.banner-circle').append(banner_cir);
 
        var cirLeft = $('.banner-circle').width() * ( - 0.5);
        $('.banner-circle').css({
            'marginLeft': cirLeft
        });
 
        $banner_ul.width(page_count * v_width);
 
        function move(obj, classname) {
            //手动及自动播放
            if (!$banner_ul.is(':animated')) {
                if (classname == 'prevBtn') {
                    if (page == 1) {
                        $banner_ul.animate({
                            left: -v_width * (page_count - 1)
                        });
                        page = page_count;
                        cirMove();
                    } else {
                        $banner_ul.animate({
                            left: '+=' + v_width
                        },
                        "slow");
                        page--;
                        cirMove();
                    }
                } else {
                    if (page == page_count) {
                        $banner_ul.animate({
                            left: 0
                        });
                        page = 1;
                        cirMove();
                    } else {
                        $banner_ul.animate({
                            left: '-=' + v_width
                        },
                        "slow");
                        page++;
                        cirMove();
                    }
                }
            }
        }
 
        function cirMove() {
            //检测page的值，使当前的page与selected的小圆点一致
            $('.banner-circle li').eq(page - 1).addClass('selected').siblings().removeClass('selected');
        }
 
        $banner.mouseover(function() {
            $btn.css({
                'display': 'block'
            });
            clearInterval(timer);
        }).mouseout(function() {
            $btn.css({
                'display': 'none'
            });
            clearInterval(timer);
            timer = setInterval(move, 3000);
        }).trigger("mouseout"); //激活自动播放
        $btn_a.mouseover(function() {
            //实现透明渐变，阻止冒泡
            $(this).animate({
                opacity: 0.6
            },
            'fast');
            $btn.css({
                'display': 'block'
            });
            return false;
        }).mouseleave(function() {
            $(this).animate({
                opacity: 0.3
            },
            'fast');
            $btn.css({
                'display': 'none'
            });
            return false;
        }).click(function() {
            //手动点击清除计时器
            btnClass = this.className;
            clearInterval(timer);
            timer = setInterval(move, 3000);
            move($(this), this.className);
        });
 
        $('.banner-circle li').live('click',
        function() {
            var index = $('.banner-circle li').index(this);
            $banner_ul.animate({
                left: -v_width * index
            },
            'slow');
            page = index + 1;
            cirMove();
        });
    });
</script>

html

<div class="banner">
    <div class="banner-btn">
        <a href="javascript:;" class="prevBtn"><i></i></a>
        <a href="javascript:;" class="nextBtn"><i></i></a>
    </div>
    <ul class="banner-img">
        <li><a href="#"><img src="img/1.jpg"></a></li>
        <li><a href="#"><img src="img/2.jpg"></a></li>
        <li><a href="#"><img src="img/3.jpg"></a></li>
        <li><a href="#"><img src="img/4.jpg"></a></li>
        <li><a href="#"><img src="img/5.jpg"></a></li>
        <li><a href="#"><img src="img/6.jpg"></a></li>
    </ul>
    <ul class="banner-circle"></ul>
</div>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery自动完成插件flexselect
下一个特效：移动光标改变图像插件JQuery Shuffle Images