轮播焦点图

——仿淘宝首页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>

下面是css代码，直接在HTML中嵌入即可：

其中prev、next的箭头图标， 我用的是网上这个精灵图 http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png

 <style>

    * { margin:; padding:;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:;

    }

    ul.piclist li {display: inline-block;}

    ul.circlebtn {

        position: absolute;

        left: 50%;

        bottom: 14%;

        z-index:;

        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:;

        width: 50px;

        height: 40px;

        background: #000000;

        opacity: 0.3;

        top: 40%;

    }

    .banner-btn .prevbtn {left:;}

    .banner-btn .nextbtn { right:;}

    .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>

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

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

 //自动播放、手动播放合并的方法

    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++;

                }

            }

        }

    }

最终效果：

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

基于jQuery的轮播焦点图图的更多相关文章

  1. jquery全屏幻灯轮播焦点图

    <!--banner s--> <div class="banner"> <div class="hd"> <ul&g ...

  2. 基于jQuery的移动轮播图（支持触屏）

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  3. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  4. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  5. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  6. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  7. 基于bootstrap的轮播广告页，带图片和文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  9. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

随机推荐

  1. vue3.0环境最新安装步骤

    安装最新的node.js版本: https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi 安装vue:  npm install -g @vue/cli ...

  2. 如何安装window7 语言包

    很多下载的语言包都是.exe文件,双击后生成lp.cab文件. 这时马上把文件复制到另外一个文件夹中,直接拖最快. 这是 window7 sp1 的很多语言包下载地址(企业版和旗舰版通用):http: ...

  3. laravel model relationship

    laravel支持多种模型之间的relation,对应着模型间的one2one, one2many,many2many,hasManyThrough,Polymorphic, many2many po ...

  4. 连接到 Azure 上的 SQL Server 虚拟机（经典部署）

    概述 本主题介绍如何连接到运行于 Azure 虚拟机的 SQL Server 实例. 它介绍了一些常规连接方案,并提供了在 Azure VM 中配置 SQL Server 连接的详细步骤. Impor ...

  5. 从golang-gin-realworld-example-app项目学写httpapi (三)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/serializers.go 序列化 ...

  6. python 装饰器的详细理解【多次实验】

    demo: # 装饰器其实就是对闭包的使用 print('haha嘻嘻') def hot(): print('知道') def dec(fun): print("call dec" ...

  7. Eclipse导出可运行的jar包并运行

    https://blog.csdn.net/kpchen_0508/article/details/49275407 程序运行的第二种方式:

  8. Hibernate 一次查询分多次返回 避免内存溢出

    public void grpcGpioDevice(StreamObserver<NI_GetAllDeviceListResponse> responseObserver, Map&l ...

  9. July 27th 2017 Week 30th Thursday

    A smile is the most charming part of a person forever. 微笑永远是一个人身上最好看的东西. Smile in the mirror, and yo ...

  10. January 08 2017 Week 2nd Sunday

    Believe not all that you see nor half what you hear. 眼见的不能全信,耳闻的也不能半信. What you hear, what you see, ...