基於jQuery的輪播焦點圖圖

時間 2019-11-13

標籤基於 jquery 焦點欄目 JQuery 简体版

原文原文鏈接

輪播焦點圖

——仿淘寶首頁jquery輪播焦點圖，我特地去taobao首頁看了下它的輪播，好像有點類似，我不保證是我寫的這樣。javascript

本例來源：站長之家 http://sc.chinaz.com/jiaoben/140219094050.htmcss

我仿照這個，本身徹底寫了一遍。html

最近在研究banner輪播的共同點，前面已經寫了2篇了java

1、首先按照慣例，寫好靜態的佈局。jquery

其實去掉overflow:hidden，本質就是橫向排列的一排圖片，依次進行位移。我用 7 張 520x280 的圖片。故輪播盒子也就是520*280這麼大，以下截圖：c++

這是我寫的HTML代碼：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>created-20181024</title>
</head>

<body>
    <div class="main">
        <div id="banner" class="banner">
            <div class="banner-btn">
                <a href="javascript:;" class="prevbtn"><i></i></a>
                <a href="javascript:;" class="nextbtn"><i></i></a>
            </div>
            <ul class="piclist">
                <li><a><img src="./images/1.jpg"></a></li>
                <li><a><img src="./images/2.jpg"></a></li>
                <li><a><img src="./images/3.jpg"></a></li>
                <li><a><img src="./images/4.jpg"></a></li>
                <li><a><img src="./images/5.jpg"></a></li>
                <li><a><img src="./images/6.jpg"></a></li>
                <li><a><img src="./images/7.jpg"></a></li>
            </ul>
            <ul class="circlebtn">
                <!--<li class="active"><a></a></li> -->
            </ul>
        </div>
    </div>
</body>
</html>

View Code

下面是css代碼，直接在HTML中嵌入便可：ide

其中prev、next的箭頭圖標，我用的是網上這個精靈圖 http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png佈局

 <style>
    * { margin: 0; padding: 0;word-break: break-all; }
    a { color:#fff;text-decoration: none;}
    a:hover { text-decoration: none;}
    ul,li { list-style: none;}
    html,body{width: 100%;height: 100%;}
    .main {width: 520px;margin: 100px auto;}
    .banner {
        width: 520px;
        height: 280px;
        position: relative;
        overflow: hidden;
    }
    ul.piclist {
        width: 3640px; /* 3640 = 520 x 7  */
        height: 280px;
        position: absolute;
        font-size: 0;
    }
    ul.piclist li {display: inline-block;}
    ul.circlebtn {
        position: absolute;
        left: 50%;
        bottom: 14%;
        z-index: 5;
        background: rgba(255, 255, 255, 0.377);
        padding: 0 5px;
        border-radius: 10px;
    }
    ul.circlebtn li { float: left;margin: 2px; }
    ul.circlebtn li a {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background-color: #B7B7B7;
    }
    ul.circlebtn li.active a { background-color: #ff0000; }
    .banner-btn a {
        display: block;
        position: absolute;
        z-index: 5;
        width: 50px;
        height: 40px;
        background: #000000;
        opacity: 0.3;
        top: 40%;
    }
    .banner-btn .prevbtn {left: 0;}
    .banner-btn .nextbtn { right: 0;}
    .banner-btn i {
        display: block;
        background: url(./images/alibaba-icon-400-340.png) no-repeat;
        width: 22px;
        height: 22px;
        margin: 8px auto 0 auto;

    }
    .banner-btn .prevbtn i {background-position: -200px 0px;}
    .banner-btn .nextbtn i { background-position: -200px -24px;}
    .banner-btn {display: none;}
    </style>

View Code

2、用js編寫輪播的動畫。須要本身引入jQuery庫。動畫

我註釋比較詳細，我寫的有一點和原例不一樣，就是原來的是把自動播放和手動播放都寫在一個方法裏了，而我則是拆開了。

<script>
    $(function () {

        var currentPic = 1; //設置當前圖片的序號
        var picNumber = $('.piclist').find('img').length; //獲取banner圖片數量
        //上面 var picNumber = $('.piclist img').length;  //不加find也能夠

        var view_width = $(".banner").width();      //banner視口的寬度
        var totalWidth = picNumber * view_width;  //banner圖的總長度
        var timer = null; //定時器

        var circle_btn_html = "<li class='active'><a href='javascript:;'></a></li>"; //banner底部第一個小按鈕

        for (let i = 1; i < picNumber; i++) {        //注意！！！這裏i從1開始，若是i=0,則小圓點會多一根，自犯錯誤
            circle_btn_html += "<li><a href='javascript:;'></a></li>";
        }
        $(".circlebtn").append(circle_btn_html);     //根據圖片數量，動態添加底部mini按鈕
        $(".circlebtn").css({'marginLeft': $(".circlebtn").width() * (-0.5)});      //令其居中


        function circlebtnActive() {        //eq 使小圓點對應當前播放的圖片序號
            $(".circlebtn li").eq(currentPic - 1).addClass('active').siblings().removeClass('active');
        }

        function autoPlay() {    //自動播放
            if (currentPic == picNumber) { //當currentpic==圖片總數時，即已經輪播到最後一張圖片了
                $(".piclist").animate({left: 0},'slow'); // $(".piclist") 的left=0時，顯示第一張圖片，當left = 6*520 px時，顯示的最後一張圖片，當left = 7 *520時，顯示的空白，最後一張圖片都走完了
                currentPic = 1;
                circlebtnActive(); //改變小圓點按鈕的狀態，也能夠不封裝成方法。直接寫語句。
            } else {
                $(".piclist").animate({left: "-=" + view_width},'slow'); //left:"-"+currentPic*view_width  //或者能夠這樣寫
                currentPic++;
                circlebtnActive(); //改變小圓點按鈕的狀態
            }
        }

        function manualPlay(className) {  //手動播放
            if (className == 'prevbtn') {
                if (currentPic == 1) {
                    $('.piclist').animate({left: "-" + (picNumber - 1) * view_width},'slow');
                    currentPic = picNumber;
                    circlebtnActive(); //改變小圓點按鈕的狀態
                } else {
                    $('.piclist').animate({left: "+=" + view_width},'slow');
                    currentPic--;
                    circlebtnActive(); //改變小圓點按鈕的狀態
                }
            } else {      
                //else 其實不僅是nextbtn,只要不是if 都是else,下面這段與自動播放的代碼其實重複，自動\手動播放兩個方法autoPlay(),manualPlay()能夠合併
                if (currentPic == picNumber) { //當currentpic==圖片總數時，即已經輪播到最後一張圖片了
                    $(".piclist").animate({ left: 0},'slow');    // $(".piclist") 的left=0時，顯示第一張圖片，當left = 6*520 px時，顯示的最後一張圖片，當left = 7 *520時，顯示的空白，最後一張圖片都走完了
                    currentPic = 1;
                    circlebtnActive(); //改變小圓點按鈕的狀態
                } else {
                    $(".piclist").animate({left: "-=" + view_width},'slow'); //left:"-"+currentPic*view_width  //或者能夠這樣寫
                    currentPic++;
                    circlebtnActive(); //改變小圓點按鈕的狀態
                }
            }

        }

        $("#banner").mouseover(function () {     //鼠標通過banner時，中止自動播放
            $(".banner-btn").css({'display': 'block'});
            clearInterval(timer);        //清除計時器，鼠標在banner上時再也不自動播放
        }).mouseout(function () {        //鼠標離開banner時，開啓自動播放
            $(".banner-btn").css({'display': 'none'});
            timer = setInterval(autoPlay, 1500);
        }).trigger('mouseout');


        $('.banner-btn a').mouseover(function () {          //當鼠標通過左右切換按鈕時，改變不透明度
            $(".banner-btn").css({'display': 'block'});
            $(this).animate({ opacity: 0.6}, "fast");
        }).mouseout(function () {
            $(".banner-btn").css({'display': 'none'});
            $(this).animate({opacity: 0.3}, "fast");
        }).click(function () {              //當鼠標click按鈕時，左右切換圖片
            manualPlay(this.className);
        });


        $(".circlebtn li").on('click', function () { //點擊小按鈕切換圖片
            var index = $(this).index();
            $('.piclist').animate({left: -index * view_width}, 'slow');
            currentPic = index + 1;
            circlebtnActive(); //改變小圓點按鈕的狀態

        });

    });


</script>

View Code

另：自動播放、手動播放合併的方法

 //自動播放、手動播放合併的方法
    function play(obj, clasname) {
        if (!$('.piclist').is(":animated")) {
            if (classname == 'prevbtn') {  //當傳遞了play()方法classname時且=prevbtn,即點擊「上一張"按鈕
                if (currentPic == 1) {
                    $('.piclist').animate({ left: "-" + (picNumber - 1) * view_width},'slow');
                    currentPic = picNumber;
                } else {
                    $('.piclist').animate({  left: "+=" + view_width},'slow');
                    currentPic--;
                }
            } else {     //當play()方法沒有傳參數、或者參數=nextbtn,都執行else中語句，即"自動播放"和"next"都是else語句
                if (currentPic == picNumber) {
                    $(".piclist").animate({ left: 0},'slow');
                    currentPic = 1;
                } else {
                    $(".piclist").animate({ left: "-=" + view_width},'slow');
                    currentPic++;
                }
            }
        }
    }

View Code

最終效果：

若是視頻效果加載不了，只能看圖了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。