轮播焦点图

——仿淘宝首页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. 软工读书笔记 week4 ——《黑客与画家》下

    因为时间有限,只对书中后半部分几个篇章进行了阅读.        一.另一条路       作者以他自己为例,在那个没人知道什么叫“软件运行在服务器时”的时代,他和朋友选择创业时,没有选择写传统的桌面 ...

  2. 将eChart图片利用POI导出到Excel

    在使用POI进行将数据导出到Excel时, 若要将eChart在前端生成的统计图(如柱状图.折线图.饼图等)一并导出,使用POI在后台构建数据图比较复杂,因此我选择将eChart在前端的统计图的bas ...

  3. Python3网络爬虫：urllib.error异常

    转载请注明作者和出处:http://blog.csdn.net/c406495762/article/details/59488464 一.urllib.error urllib.error可以接收有 ...

  4. ls 操作命令 -l/-R和rm -r dir 功能实现

    ls -R #include <sys/stat.h> #include <dirent.h> #include <fcntl.h> #include <st ...

  5. Linux server配置安装Java,Tomcat服务器

    系统:Ubuntu 16.04 dev_desktop 1.Java安装并配置环境变量 (1)从Java官方网站下载最新版JDK: http://www.oracle.com/technetwork/ ...

  6. CSS边框长度控制

    以前需要边框长度比容器小一些时,我用div嵌套.后来发现伪类在实现这个效果时很方便,只需要一个div就够了,另外调整padding和margin都不会很麻烦. <div class=" ...

  7. 沉淀再出发:dubbo的基本原理和应用实例

    沉淀再出发:dubbo的基本原理和应用实例 一.前言 阿里开发的dubbo作为服务治理的工具,在分布式开发中有着重要的意义,这里我们主要专注于dubbo的架构,基本原理以及在Windows下面开发出来 ...

  8. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  9. PL\SQL Developer连接本地Oracle 11g数据库

    1.登录PL/SQL Developer 这里省略Oracle数据库和PL/SQL Developer的安装步骤,注意在安装PL/SQL Developer软件时,不要安装在Program Files ...

  10. mac使用指南--软件安装部分

    最近因为开发需要,换了个mac,发现和Windows下面的操作和习惯真是千差万别啊,在这里记录一下,有需要的也可以参考一下. 安装前强烈建议根据个人习惯设置好触控板!!!什么单击双击选中拖拽的统统设好 ...