轮播焦点图

——仿淘宝首页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. DrawerLayout使用

    1 :DrawerLayout侧边栏用于实现如图所示的效果:

  2. linux整个日志目录查询记录

    在linux下面需要查看整个目录的日志,搜索用户的一个行为.因为不知道具体是那一天,一个个的查询也可以,但是太麻烦.可以用过下面的命令来实现: rep -iRl  "关键字" ./ ...

  3. 用canvas播放scratch文件

    原文地址:https://blog.csdn.net/qq_36268036/article/details/84262540 基于Github上的scratch-render实现sb2或者sb3文件 ...

  4. os 模块 模块与包的初始

    os模块是与操作系统交互的模块之前我们也用过os模块就是更改文件的名字的时候 我们如果用os求求文件夹是不行的  可以求文件  因为文件夹在python中最大就是4090个字节 所以你必须求出文件夹内 ...

  5. 部署Docker distribution仓库

    环境准备: 下载docker yum文件 # wget -O /etc/yum.repos.d/aliyun.repo http://mirrors.aliyun.com/repo/Centos-7. ...

  6. MySQL 数据库--索引原理与慢查询优化

    索引的原理 本质都是:通过不断地缩小想要获取数据的范围来筛选出最终想要的结果,同时把随机的事件变成顺序的事件,也就是说,有了这种索引机制,我们可以总是用同一种查找方式来锁定数据. 索引的数据结构 b+ ...

  7. 沉淀再出发:Bean,JavaBean,POJO,VO,PO,EJB等名词的异同

    沉淀再出发:Bean,JavaBean,POJO,VO,PO,EJB等名词的异同 一.前言 想必大家都有这样的困惑,接触的东西越多却越来越混乱了,这个时候就要进行对比和深入的探讨了,抓住每一个概念背后 ...

  8. 英语零散笔记Note整理

    无意之间整理电脑发现还存放着以前自己看视频做的一些笔记,关于新概念英语的笔记,觉得不错,放于博客,以供学习. English Note1 定语从句 将不重要的动作放在定语从句中,重要的放在主干中. 倒 ...

  9. Eclipse PHPEclipse 配置

    最近偶来兴致趁着有些时间,看了看php的书. 说到php就不得不提php的开发环境了,一般的都是采用apache做服务器.mysql做数据库,再加上php组合成一个完备的运行环境,但是好像没有写代码的 ...

  10. Access的"是否型"字段与Sql Server的"Bit"字段

    ---------------------------------------------------------------------------------------------------- ...