jQuery 简易轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>  
        *{
            padding:0px;
            border:0px;
            margin:0px;
        }
        ul {
            list-style:none;
        }
        .swiper {
            width:1200px;
            height:480px;
            margin:auto;
            position:relative;
            overflow:hidden;
        }
        .swiper ul {
            position:relative;
            width:20000px;}
        .swiper ul li {
            float:left;
            width:1200px;
            height:480px;
            position:relative;
            
        }
        .spanBox {
            position:absolute;
            width:100%;
            left:0;
            bottom: 20px;
            text-align: center;
        }
        .spanBox span {
            width:12px;
            height:12px;
            display: inline-block;
            margin:auto 5px;
            background-color: #ffffff;
            border-radius: 10px;
            transition: all 0.5s;
            cursor: pointer;
        }
        .swiper img{width: 100%;min-height: 480px;}
        .active {
            transition: all 0.5s;
            width: 50px !important;
            background-color: #f43b51 !important;
        }
        .box_btn{
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #999999;
            font-size: 30px;
            position:absolute;
            opacity:0.5;
            top: 50%;
            margin-top: -20px;
            cursor: pointer;
            background-color: #ffffff;
        }
        .prev {left:0px;}
        .next {right:0px;}
    </style>  
    </head>
    <body>
        <div class="swiper">
            <ul>
                <li><a href="#"><img src="img/banner1.jpg"></a></li>
                <li><a href="#"><img src="img/banner2.jpg"></a></li>
                <li><a href="#"><img src="img/banner3.jpg"></a></li>
                <li><a href="#"><img src="img/banner4.jpg"></a></li>
                <li><a href="#"><img src="img/banner5.jpg"></a></li>
            </ul>
            <div class="spanBox">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="prev box_btn"><</div>
            <div class="next box_btn">></div>
        </div> 
        <script src="jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
    $(document).ready(function() {
        var swiperBox = $(".swiper");
        var ul = swiperBox.find("ul");
        var oneWidth = swiperBox.find("ul li").eq(0).width();
        var number = swiperBox.find(".spanBox span"); //注意分号 和逗号的用法
        var timer = null;
        var sw = 0;
        //每个span绑定click事件，完成切换颜色和动画，以及读取参数值
        number.on("click", function() {
            $(this).addClass("active").siblings("span").removeClass("active");
            sw = $(this).index();
            ul.animate({
                "right": oneWidth * sw, //ul标签的动画为向左移动；
            });
        });
        //左右按钮的控制效果
        $(".next").stop(true, true).click(function() {
            sw++;
            if(sw == number.length) {
                sw = 0
            };
            number.eq(sw).trigger("click");
        });
        $(".prev").stop(true, true).click(function() {
            sw--;
            if(sw == number.length) {
                sw = 0
            };
            number.eq(sw).trigger("click");
        });
        //定时器的使用，自动开始
        timer = setInterval(function() {
            sw++;
            if(sw == number.length) {
                sw = 0
            };
            number.eq(sw).trigger("click");
        }, 2000);
        //hover事件完成悬停和，左右图标的动画效果
        swiperBox.hover(function() {
            $(".next,.prev").animate({
                "opacity": 1,
            }, 200);
            clearInterval(timer);
        }, function() {
            $(".next,.prev").animate({
                "opacity": 0.5,
            }, 500);
            timer = setInterval(function() {
                sw++;
                if(sw == number.length) {
                    sw = 0
                };
                number.eq(sw).trigger("click");
            }, 2000);
        })
    
    })
    </script>
    </body>
</html>
猜你喜欢
