轮播焦点图

——仿淘宝首页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. c#多线程调用有参数的方法

      Thread (ParameterizedThreadStart) 初始化 Thread 类的新实例,指定允许对象在线程启动时传递给线程的委托.   Thread (ThreadStart) 初始 ...

  2. delete in javascript

    Key word delete. 1. Delete global object. x = 42; // creates the property x on the global object var ...

  3. Python学习---面向对象的学习[基础]

    面向对象 面向对象的三大特性是指:封装.继承和多态. 说明: Python可以函数式编程,也可以面向对象编程 l 面向过程:根据业务逻辑从上到下写垒代码 l 函数式 :将某功能代码封装到函数中,日后便 ...

  4. QT5连接Mysql

    摘要 在Qt 5中已经提供了对MySQL数据库的默认支持,要想使用该数据库,需要先进行数据库的安装, 这里我们介绍下在Windows系统中MySQL数据库的安装和简单使用.   Qt如何利用Mysql ...

  5. August 05th 2017 Week 31st Saturday

    All endings are beginnings, we just don't know it at the time. 所有的结局都是新的开始,只是当时我们不知道而已. Several mont ...

  6. PHP修改图片

    这篇是关于修改图片的效果,主要还是用到php中的GD库中的函数,没想到php还有这凶残能力,出乎我的预料. 先看代码upload_image.php,主要是一个上传控件,用来选择图片 <html ...

  7. codeforces 809C Find a car

    codeforces 809C Find a car 题意 有个\(1e9*1e9\)的矩阵,行 \(x\) 从上到下递增,列 \(y\) 从左到右递增.每个格子有一个正值.\((x, y)\) 的值 ...

  8. 奇怪的bug，不懂Atom在添加markdown-themeable-pdf，在配置好phantomjs的情况下报错

    本来打算用一下atom但是导出pdf报错,可是在预览的情况下就没有问题,顺便吐槽一下谷歌浏览器自己的markdown在线预览插件无法适配,用搜狗搭载谷歌的插件才能导出pdf,一下感觉逼格少了很多,等忙 ...

  9. Tomcat的HTTPS配置及HTTP自动跳转配置

    1.生成证书 (1)在jdk的安装目录\bin\keytool.exe下打开keytool.exe 在命令行中输入以下命令: keytool -genkeypair -alias 以上命令将生产一对非 ...

  10. Python中readline()函数 去除换行符

    从Python中readline()函数读取的一行内容中含有换行符\n,很多时候我们需要处理不含有换行符的字符串,此时就要去掉换行符\n. 方法是使用strip()函数. 例子如下: f = open ...