Jquery 轮播图

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul,li{
            margin:0;
            padding: 0px;
            list-style: none;
 
        }
        .content{
            position: absolute;
            left:300px;
            top:150px;
        }
        .imgs li{
            position: absolute;
            left:0;
            top:0;
            display: none;
        }
 
        .imgs li:first-child{
            display: block;
        }
 
        .nums{
            position: absolute;
            background: #333;
            top:300px;
 
            bottom: 20px;
            font-size: 0;
            padding: 4px 8px;
            border-radius: 12px;
            background-color: hsla(0,0%,100%,.3);
            width:88px;
            height: 12px;
 
            left:330px;
 
        }
 
        .nums li{
            margin-right: 10px;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            background-color: #fff;
            float:left;
        }
        .nums .click{
            background: red;
        }
 
        .btn{
            width:20px;
            height:40px;
            background: #333;
            color:#fff;
            text-align: center;
            line-height: 40px;
            font-size: 23px;
            font-weight: bold;
            position: absolute;
            top:150px;
            cursor: pointer;
            display: none;
        }
 
        .prev{
            left:0;
        }
 
        .next{
            left:770px;
 
        }
 
    </style>
</head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 定义全局的变量  控制图片显示
        var i = 0;
        var time = null;
        _run();
        function _run(){
            if(time == null){
                time = setInterval(function(){
                    _show(i);
 
                    i++;
 
                    if(i >= 4){
                        i = 0;
                    }
                },3000);
            }
        }
 
        function _show(i){
            $('.imgs li').hide();
 
            $('.imgs li').eq(i).show();
 
            $('.nums li').removeClass('click');
 
            $('.nums li').eq(i).addClass('click');
        }
        $('.nums li').mouseover(function(){
            // 获取li下标
            i = $(this).index();
            _show(i);
        })
 
        $('.prev').click(function(){
            console.log(i)
            if(i <= 0){
                i = 4;
            }
            i--;
            _show(i);
        })
 
        $('.next').click(function(){
            i++;
 
            if(i >= 4){
                i = 0;
            }
            _show(i);
        })
 
 
        $('ul,li,.btn').mouseover(function(){
            $('.btn').show();
            // 清除定时器
            clearInterval(time);
            time = null;
        }).mouseout(function(){
            _run();
            $('.btn').hide();
        })
 
 
 
    })
 
</script>
<body>
    <h1>轮播</h1>
    <div class="content">
        <ul class="imgs">
            <li><img src="./img/1.jpg" height="340" width="790"></li>
            <li><img src="./img/2.jpg" height="340" width="790"></li>
            <li><img src="./img/3.jpg" height="340" width="790"></li>
            <li><img src="./img/4.jpg" height="340" width="790"></li>
        </ul>
        <ul class="nums">
            <li class="click"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
 
        <div class="btn prev"><</div>
        <div class="btn next">></div>
    </div>
</body>
</html>

本博客所有文章如无特别注明均为原创。作者：长颈鹿，复制或转载请以超链接形式注明转自 SZY 。
原文地址《Jquery 轮播图》

标签: jquery jquery案例