时间戳

首页 > 技术文章 > 轮播图jquery

轮播图jquery

wzzl 2015-11-25 23:27 原文

jquery轮播

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>banner</title>

<!--引入开始-->
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
ul, li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
/* 核心代码 */
.focus{width:800px;height:280px;overflow:hidden;position:relative;}
.focus ul{height:380px;position:absolute;}
.focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
.focus ul li div{position:absolute;overflow:hidden;}
.focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:5px;text-align:center;}
.focus .btn span{display:inline-block;_display:inline;_zoom:1;width:13px;height:13px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;border-radius:50%;}
.focus .btn span.on{background:yellow;}
.focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;display:none;}
.focus .pre{left:0;}
.focus .next{right:0;background-position:right top;}
</style>

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/Tony_Tab.js"></script>

</head>
<body>

<div style="width:800px; margin:50px auto;">
    <div id="focus" class="focus">
        <ul>
            <li><a href="JavaScript:;"><img src="img/01.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/02.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/03.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/04.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/05.jpg"/></a></li>
        </ul>
    </div>
</div>

<div style="width:800px; margin:50px auto;">
    <div id="focus2" class="focus">
        <ul>
            <li><a href="JavaScript:;"><img src="img/01.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/02.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/03.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/04.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/05.jpg"/></a></li>
        </ul>
    </div>
</div>

<div style="width:800px; margin:50px auto;">
    <div id="focus3" class="focus">
        <ul>
            <li><a href="JavaScript:;"><img src="img/01.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/02.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/03.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/04.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/05.jpg"/></a></li>
        </ul>
    </div>
</div>

<script type="text/javascript">
$(function() {
    $('#focus').slideFocus();
    $('#focus2').slideFocus();
    $('#focus3').slideFocus();
});
</script>
    
</body>
</html>

js/Tony_Tab.js

jQuery.fn.extend({
    
    slideFocus: function(){
        var This = $(this);
        var sWidth = $(This).width(),
            len    =$(This).find('ul li').length,
            index  = 0,
            Timer;

        // btn event
        var btn = "<div class='btn'>";
        for(var i=0; i < len; i++) {
            btn += "<span></span>";
        };
        btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
        $(This).append(btn);
        $(This).find('.btn span').eq(0).addClass('on');


        $(This).find('.btn span').mouseover(function(){
            index = $(This).find('.btn span').index(this);
            Tony(index);
        });

        $(This).find('.next').click(function(){
            index++;
            if(index == len){index = 0;}
            Tony(index);
        });

        $(This).find('.pre').click(function(){
            index--;
            if(index == -1){index = len - 1;}
            Tony(index);
        });


        // start setInterval        
        $(This).find('ul').css("width",sWidth * (len));
        $(This).hover(function(){
            clearInterval(Timer);
            show($(This).find('.preNext'));
        },function(){
            hide($(This).find('.preNext'));
            Timer=setInterval(function(){
                Tony(index);
                index++;
                if(len == index){index = 0;}
            }, 2000)
        }).trigger("mouseleave");

        function Tony(index){
            var new_width = -index * sWidth;
            $(This).find('ul').stop(true,false).animate({'left' : new_width},300);
            $(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
        };

        
        // show hide
        function show(obj){ $(obj).stop(true,false).fadeIn();}
        function hide(obj){ $(obj).stop(true,false).fadeOut();}
    }
});

 

推荐阅读