jquery實現漂亮的輪播圖

本文轉載自查看原文 2018-11-29 14:26 618 個人筆記/ 輪播圖

今天工作中要用到一個輪播功能，在網上找了一些，覺得有些過於繁瑣，於是自己動手寫了一個，效果如圖：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
</head>
<style>
    .oop_inner{
        margin:0 auto;
        position:relative;
        top:10px;
        width:640px;
        height:424px;
        box-shadow:1px 2px 3px #666;
        overflow:hidden;
    }
    .oop_banner{
        position:absolute;
        width:2600px;
        /* left:-640px; */
    }
    .oop_banner img{
        float:left;
        width:640px;
    }
    .oop_li{
        position:absolute;
        left:45%;
        bottom:20px;
    }
    .oop_li span{
        display:block;
        float:left;
        margin-right: 10px;
        width:15px;
        height:7px;
        background:#fff;
        box-shadow: 1px 1px;
        cursor:pointer;
    }
    .oop_li span:hover{
        background:#000; 
    }
    .oop_li .on{
        background:#000; 
    }
    .oop_inner a{
        position:absolute;
        display: block;
        width:40px;
        height:40px;
        line-height:36px;
        box-shadow: 0px 0px 3px 2px;
        color:#fff;
        top:45%;
        text-align:center;
        font-size:40px;
        text-decoration:none;
    }
    .oop_inner a:hover{
        box-shadow: 0px 0px 3px 2px #000;
    }
    .oop_inner .last{
        left:15px;
    }
    .oop_inner .next{
        right:15px;
    }
</style>
<body>
    <div class="oop_inner">
        <div class="oop_banner">
            <img src="1.jpg" alt="">
            <img src="2.jpg" alt="">
            <img src="3.jpg" alt="">
            <img src="4.jpg" alt="">
        </div>
        <div class="oop_li">
            <span index="0" class="on"></span>
            <span index="1"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>
        <a href="javascript:void(0);" class="last">&lt;</a>
        <a href="javascript:void(0);" class="next">&gt;</a>
    </div>
</body>
<script src="../jquery-1.7.2.min.js"></script>
</html>
<script>
    $(function(){
        start();
        //定時開始
        var i = 0;
        function start(){
            banner = setInterval(function(){
                i+=1;
                if(i == 4){
                    i =0;
                }
                onclass();
                var le = i* -640;
                $('.oop_banner').animate({left:le});
            },2000);
        }
        //定時停止
        function stop(){
            clearInterval(banner);
        }
        //選中樣式
        function onclass(){
            $('.oop_li>span').each(function(e){
                if(e == i){
                    $(this).addClass('on');
                }else{
                    $(this).removeClass('on');
                }
            })
        }
        //點擊按鈕
        $('.oop_li>span').click(function(){
            $('.oop_li>span').removeClass('on');
            $(this).addClass('on');
            var le = $(this).attr('index') * -640;
            $('.oop_banner').animate({left:le});
            i =  parseInt($(this).attr('index'));
        })
        //鼠標滑入
        $('.oop_inner').mouseenter(function(){
            stop();
        })
        //鼠標滑出
        $('.oop_inner').mouseleave(function(){
            start();
        })
        //下一個
        $('.next').click(function(){
            i+=1;
            if(i == 4){
                i = 0;
            }
            onclass();
            var le = i* -640;
            $('.oop_banner').animate({left:le});
        })
        //上一個
        $('.last').click(function(){
            i-=1;
            if(i == -1){
                i = 3;
            }
            onclass();
            var le = i* -640;
            $('.oop_banner').animate({left:le});
        })
    })
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於Jquery實現的輪播圖 jQuery輪播圖（一）輪播實現並封裝用jQuery寫的輪播圖 jquery.flexslider-min.js實現banner輪播圖效果簡易輪播圖和無縫輪播圖的實現用jquery制作的簡單輪播圖自己定義jquery插件輪播圖用js實現輪播圖 Html輪播圖實現 Android實現輪播圖