基于jQuery的轮播焦点图图

轮播焦点图

——仿淘宝首页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的轮播焦点图图的更多相关文章

jquery全屏幻灯轮播焦点图
 <div class="banner"> <div class="hd"> <ul&g ...
基于jQuery的移动轮播图（支持触屏）
移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...
用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
基于bootstrap的轮播广告页，带图片和文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-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,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

随机推荐

weex常用属性梳理
之前发了一篇weex集成和开发的博客,主要是讲了weex开发环境的搭建和文件的编译.部署,还有就是一些个人对weex的理解,最近将原生的项目改造成weex的项目,也持续了有两个多月的时间了,后面我会发 ...
pytorch 文本输入处理
https://blog.csdn.net/nlpuser/article/details/88067167 https://blog.csdn.net/u012436149/article/deta ...
webpack学习笔记丁点积累
webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...
为什么懂云的IT高手能过得比你好
盼望着,盼望着,一年一度的国庆7天长假还有不到24小时就到来了.各个部门的同事都已准备好满世界旅行去了. IT 部门各位同事的心还是悬着,信息系统还要持续的运转,对外的网站不能停,假期的线上促销也不能 ...
C++学习笔记——C++简介
1.C++发展史 C++语言来源于C语言,在C语言的基础上增加了面向对象设计的要素从而得到了发展. 1979 年,C++ 是由 Bjarne Stroustrup在新泽西州美利山贝尔实验室开始设计开发 ...
join语句中on条件与where条件的区别
大纲:on是在生成连接表的起作用,where是生成连接表之后对连接表再进行过滤当使用left join时,无论on的条件是否满足,都会返回左表的所有记录,对于满足的条件的记录,两个表对应的记录会连接 ...
Java学习---程序设计_基础题[1]
180813 补全没有的答案! 0. 数组排序大全[冒泡/选择/快速/插入] package com.ftl; import java.io.BufferedReader; import java.i ...
【心得体会】我考完MOS我明白了…
[心得体会]我考完MOS我明白了… 原创 2017-11-10 MSP-李桑榆 MSPrecious成长荟 MOS备考这篇文章写给还没有考或者准备考MOS的同学网上有很多介绍MOS考试的 http ...
January 12 2017 Week 2 Thursday
Although it rains, throw not away your watering pot. 纵然天下雨,休把水壶丢. Don't throw away your watering pot ...
Activator 通过SSH解锁屏幕等手势操作
来源:https://qunwang6.github.io/blog/Activator/ Activator 发表于 2015-10-24 | 分类于 iOS Activator Activ ...

基于jQuery的轮播焦点图图

轮播焦点图

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

随机推荐

热门专题