基于jQuery的轮播焦点图图

轮播焦点图

——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样。

本例来源:站长之家 http://sc.chinaz.com/jiaoben/140219094050.htm

我仿照这个,自己完全写了一遍。

最近在研究banner轮播的共同点,前面已经写了2篇了

一、首先按照惯例,写好静态的布局。

其实去掉overflow:hidden,本质就是横向排列的一排图片,依次进行位移。我用 7 张 520x280 的图片。故轮播盒子也就是520*280这么大,如下截图:

 

这是我写的HTML代码:

<!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中嵌入即可:

其中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

二、用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

最终效果:

如果视频效果加载不了,只能看图了

 

posted @ 2018-10-24 15:11 Milkice 阅读(...) 评论(...) 编辑 收藏