【jQuery】轮播图原理及初始代码

jQuery轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .carousel-box{
            width: 670px;
            height: 240px;
            position: relative;
            margin: 0 auto;
        }
        .carousel-box img{
            width: 670px;
            height: 240px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .carousel-box ul{
            position: absolute;
            left: 50%;
            margin-left: -78px;
            bottom: 5px;
            z-index: 2;
        }
        .carousel-box ul li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            float: left;
            margin-left: 6px;
            background-color: #999;
            font-size: 12px;
            color: #fff;
            line-height: 20px;
            text-align: center;
        }
        .carousel-box ul li.red{
            background-color: orangered;
        }
        .carousel-box .arrow-left{
            display: block;
            width: 25px;
            height: 33px;
            background: url(images/bg4.png) -85px -45px;
            position: absolute;
            left: 2px;
            top: 90px;
            z-index: 2;
        }
        .carousel-box .arrow-right{
            display: block;
            width: 25px;
            height: 33px;
            background: url(images/bg4.png) -55px -45px;
            position: absolute;
            right: 2px;
            top: 90px;
            z-index: 2;
        }
        .imgz{
            z-index: 1;/*z-index为了提高第一张图的层级*/
        }
    </style>
</head>
<body>
    <div class="carousel-box">
        <img class="imgz" src="images/content_1.jpg" alt="">
        <img src="images/content_3.jpg" alt="">
        <img src="images/content_4.jpg" alt="">
        <img src="images/content_5.jpg" alt="">
        <img src="images/content_6.jpg" alt="">
        <img src="images/content_7.jpg" alt="">
        <ul>
            <li class="red">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <span class="arrow-left"></span>
        <span class="arrow-right"></span>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 自动轮播
            var c = 0;
            function run(){
                c++;
                c = (c==6)?0:c;
                // 让c号图片显示，其他图片隐藏  让c号的li变色，其他的默认
                $('.carousel-box img').eq(c).show().siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            }
            timer = setInterval(run,5000);
            
            // 鼠标移入li的效果
            $('.carousel-box ul li').mouseover(function() {
                clearInterval(timer);
                // 获得当前li的序号
                var c = $(this).index();
                // 显示c号图片，其他隐藏  让c号li变色，其他默认
                $('.carousel-box img').eq(c).fadeIn(2000).siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            });
            
            // 箭头
            $('.carousel-box .arrow-right').click(function() {
                clearInterval(timer);
                c++;
                c = (c==6)?0:c;
                $('.carousel-box img').eq(c).show().siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            });
            $('.carousel-box .arrow-left').click(function() {
                clearInterval(timer);
                c--;
                c = (c==-1) ? 5 : c;
                $('.carousel-box img').eq(c).show().siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            });
            
            // 鼠标移出事件
            $('.carousel-box ul li,.carousel-box .arrow-right,.carousel-box .arrow-left').mouseout(function(){
                timer = setInterval(run,5000);
            });
        })
    </script>
</body>
</html>
【jQuery】轮播图原理及初始代码

jQuery轮播图

这是基本思路，可以加以整理

sgosky

引用和评论

鼠标右键兼容MAC版火狐浏览器

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版
