欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于jQuery的轮播焦点图图

程序员文章站 2024-01-05 12:23:22
轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样。 本例来源:站长之家 http://sc.chinaz.com/jiaoben/140219094050.htm 我仿照这个,自己完全写了一遍。 最近在研究banner轮播的 ......

轮播焦点图

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

本例来源:站长之家

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

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

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

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

 

基于jQuery的轮播焦点图图

这是我写的html代码:

基于jQuery的轮播焦点图图
<!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

基于jQuery的轮播焦点图图
 <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库。

我注释比较详细,我写的有一点和原例不同,就是原来的是把自动播放和手动播放都写在一个方法里了,而我则是拆开了。

基于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

另:自动播放、手动播放合并的方法

基于jQuery的轮播焦点图图
 //自动播放、手动播放合并的方法
    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

最终效果:

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

基于jQuery的轮播焦点图图基于jQuery的轮播焦点图图基于jQuery的轮播焦点图图