Jquery轮播图制作

最新推荐文章于 2021-07-11 23:32:32 发布

置顶莫银帆

最新推荐文章于 2021-07-11 23:32:32 发布

阅读量1w

点赞数 17

分类专栏： Jquery 文章标签：轮播图+ banner+ 动画+ jquery 前端

本文链接：https://blog.csdn.net/zw_div/article/details/50433031

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我的个人主页：http://www.zcool.com.cn/u/14498773

前端Jquery轮播图制作
前言：网站是否让人感觉高端大气上档次，最重要的就是轮播图，所以做好轮播图尤为重要！以前要做图片轮播效果的时候，总是在网上找固定的模板复制粘贴进去，但是网上找来的资料总是有很多冗余的东西，而且不够精简，今天我就把几种主流的轮播图的做法和大家分享一下。备注：本人刚接触前端这一块，这是第一篇个人博客，希望大家多多支持，有问题可以与我沟通交流，谢谢！

一、分类

无缝滚动
简单的呼吸轮播
全屏呼吸轮播
蒙太奇轮播
无缝滑动轮播

二、准备工作

布局（结构）：页面HTML的结构搭建没有硬性要求，只要遵循W3C标准，层级关系规范就行，我一般喜欢使用UL+LI来布局；
样式（CSS）：需要对CSS的一些基本知识清楚，至少需要什么静态效果你要能先实现出来吧；
行为（Jquery）：对于jquery的语法结构需要清楚，以及它的一些常用方法（这里会用到clone()方法，这是实现无缝轮播的关键所在）的使用，还需要知道基本的动画（fadeIn、fadeOut…）。

需要引入JQ的包——<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

三、具体实现

无缝滚动
效果图
这里写图片描述

说明
clone(true)是实现无缝的关键，由于当前demo中一屏可以容纳下两张图片，所以需要用JQ选择器中的$(‘.list li:lt(2)’)来筛选出最前面的两张，将这两张克隆出来，然后使用append方法追加到节点末尾，当轮播图切到最后一张时，继续走下去会展现的是追加到末尾的两张图片，这样用户就以为回到了最开始的那两张，此时只需要改变margin-left值回到0就可以了。

代码

<div class="box">
    <ul class="list">
        <li><a href="javascript:;"><img src="images/luoLi/01.jpg" height="200" width="300" /></a></li>
        <li><a href="javascript:;"><img src="images/luoLi/02.jpg" height="200" width="300" /></a></li>
        <li><a href="javascript:;"><img src="images/luoLi/03.jpg" height="200" width="300" /></a></li>
        <li><a href="javascript:;"><img src="images/luoLi/04.jpg" height="200" width="300" /></a></li>
        <!-- 欺骗用户的临时工 -->
    </ul>
</div>
<div class="btnBox">
    <a href="javascript:;" class="leftBtn"> << </a>　　
    <a href="javascript:;" class="rightBtn"> >> </a>
</div>

<style type="text/css">
    .box{width: 600px; height: 200px; border: 1px solid #000; margin: 100px auto 0;
        overflow: hidden;}
    .list{width: 1800px; height: 200px; position: relative; top: 0; left: 0; background: #000;}
    .list li{width: 300px; height: 200px; float: left;}
    .btnBox{width: 600px; height: 45px; line-height: 45px; text-align: center;
        margin: 0 auto;}
    .btnBox a{font-size:18px; text-decoration: none;color:#000;}
</style>

//自定义一个变量，用来模拟list的left值
var myLeft=0;
//用JQ克隆前两个LI
var myaLi=$('.list li:lt(2)').clone(true);
//将克隆出来的节点插入到list的最末尾
$('.list').append(myaLi);
var timer;
//定义一个方向变量，用来帮助我们知道当前UL的运动方向
var fangXiang='left';

//往左走的功能
var leftFn=function(){
    //调用左功能，将方向和该功能实现的方向保持一致
    fangXiang='left';
    //每次将left进行减减
    myLeft=myLeft-3;
    //如果myLeft<=-1200，就代表一个轮回走完了；
    //就要让轮回回到最开始的地方：0
    if(myLeft<=-1200){
        myLeft=0;
    }
    //将这个不断改变的myLeft变量和list身上的left值进行同步
    $('.list').css('left',myLeft);
}
//往右走的功能
var rightFn=function(){
    //调用右功能，将方向和该功能实现的方向保持一致
    fangXiang='right';
    //每次将left进行加加，后面的加值或者减值推荐保持一致
    myLeft=myLeft+3;
    //刚一开始就露出了马脚，所以需要回到轮回最末尾
    //left值是-1200
    if(myLeft>0){
        myLeft=-1200;
    }
    //将这个不断改变的myLeft变量和list身上的left值进行同步
    $('.list').css('left',myLeft);
}

//默认是往左走
timer=setInterval(leftFn,30);

//当单击右按钮时，让盒子往右走
$('.rightBtn').click(function(event) {
    clearInterval(timer);
    //先清除旧的定时器，再开启一个新定时器，这个定时器调用rightFn功能
    timer=setInterval(rightFn, 30);
});

//当单击左按钮时，让盒子往左走
$('.leftBtn').click(function(event) {
    clearInterval(timer);
    //先清除旧的定时器，再开启一个新定时器，这个定时器调用leftFn功能
    timer=setInterval(leftFn, 30);
});

$('.box').hover(function() {
    //鼠标移上box身上时，让定时器停止
    clearInterval(timer);
}, function() {
    clearInterval(timer);
    //当鼠标离开时，进行方向的判断，如果当前这个方向是left，重启时需要调用leftFn；
    //如果当前这个方向是right，重启时需要调用rightFn
    if(fangXiang=='left'){
        timer=setInterval(leftFn, 30);
    }else{
        timer=setInterval(rightFn, 30);
    }

});

$('.list li').hover(function() {
    //让当前这个LI的小伙伴们的透明度降低
    $(this).siblings().stop().fadeTo(500,.4);
}, function() {
    //离开时，将所有LI的透明度还原
    $('.list li').stop().fadeTo(500,1);
});

简单的呼吸轮播
效果图
这里写图片描述

说明
这个demo中JQ的书写没有什么特殊的地方，要注意的是CSS样式，该案例中布局采用的是UL>LI，每个LI都是position:absolute;采用绝对定位，叠在一个地方，默认状态下LI写了display:none;让他们都隐藏，只有第一张让它display:block；显示，然后用fadeIn和fadeOut来控制图片的淡入或淡出显示。

代码

<div class="banner">
    <ul class="imgList">
        <li style="display:block;"><a href="javascript:;"><img src="images/xiaomi/1.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/xiaomi/2.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/xiaomi/3.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/xiaomi/4.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/xiaomi/5.jpg" height="420" width="992" /></a></li>
    </ul>
    <ol class="btnList">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li style="margin-right:0;">5</li>
    </ol>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

<style type="text/css">
    body{font-family: '宋体';}
    .banner{width: 992px; height: 420px; margin: 100px auto 0; position: relative;}
    .imgList{width: 992px; height: 420px; position: relative;}
    .imgList li{width: 992px; height: 420px; position: absolute; left: 0; top: 0; display: none;}
    .btnList{position: absolute; right: 10px; bottom: 10px;}
    .btnList li{width: 30px; height: 20px; color: #fff; background: rgba(0,0,0,0.3); margin-right: 10px;
        float: left; text-align: center; line-height:20px; border: 1px solid #CCC; cursor: pointer;} 
    .btnList li.current{background: rgba(0,0,0,0.65);}
    .leftBtn,.rightBtn{width: 41px; height: 69px; position: absolute; top: 50%; margin-top: -35px;
    background: url(images/xiaomi/left.gif) no-repeat center center rgba(0,0,0,.65); display: none;
    cursor: pointer;}
    .leftBtn{left: 0; }
    .rightBtn{right: 0; background-image: url(images/xiaomi/right.gif);}
    .banner:hover .leftBtn,.banner:hover .rightBtn{display: block;}
</style>

//定义一个变量，用来模拟不断改变的下标 
    var num=0;
    var nextFn=function(){
        //让上一张淡出
        $('.imgList li').eq(num).stop().fadeOut(1000);
        num++;
        if(num>4){
            num=0;
        }
        //让下一个角标增加current...
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        //让下一张淡入
        $('.imgList li').eq(num).stop().fadeIn(1000);
    }

    var prevFn=function(){
        //让上一张淡出
        $('.imgList li').eq(num).stop().fadeOut(1000);
        num--;
        if(num<0){
            num=4;
        }
        //让上一个角标增加current...
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        //让下一张淡入
        $('.imgList li').eq(num).stop().fadeIn(1000);
    }

    $('.rightBtn').click(nextFn);
    $('.leftBtn').click(prevFn);
    $('.btnList li').click(function(event) {
        //num未修改前代表上一张
        $('.imgList li').eq(num).stop().fadeOut(1000);
        num=$(this).index();
        //num修改后代表下一张
        //让下一个角标增加current...
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        //让下一张淡入
        $('.imgList li').eq(num).stop().fadeIn(1000);
    });

全屏呼吸轮播
效果图
这里写图片描述

说明
全屏呼吸轮播的制作原理和上面的简易呼吸轮播差不多，但是这种轮播图制作时需要特别注意的地方是设计图制作，大图设计时尽量把内容放在版心内，让旁边的区域留白，尽量用纯色，只需要将盒子居中，设置并改变外层大盒子的background-color背景颜色即可。

代码

<div class="box">
    <ul class="imgList">
        <li style="display:block;background-color:#020612;background-image:url(images/yuHua/1.jpg);">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/2.jpg);background-color:#083B74">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/3.jpg); background-color:#948790">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/4.jpg); background-color:#000F22">
            <a href="javascript:;"></a>
        </li>
    </ul>
    <ol class="btnList">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li style="margin-right:0;"></li>
    </ol>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

.box{width: 100%; height: 435px; position: relative;}
.imgList{height: 435px; position: relative;}
.imgList li{position: absolute; height: 435px; left: 0; top: 0; display: none; width: 100%;
background-position: center top;
background-repeat: no-repeat;}
.imgList li a{display: block; width: 100%; height: 100%;}
.btnList{width: 120px; height: 12px; position: absolute; left: 50%; margin-left: -60px;
bottom: 15px; }
.btnList li{width: 12px; height: 12px; background: url(images/yuHua/sprite_banner.png) -17px 0;
float: left; margin-right: 24px; cursor: pointer;}
.btnList li.current{background-position: 0 0;}
.leftBtn,.rightBtn{width: 35px; height: 71px; position: absolute; top: 50%; margin-top: -35px;
background: url(images/1920/icons.png) 0 0; cursor: pointer;}
.leftBtn{left: 50%; margin-left: -600px;}
.rightBtn{left: 50%; background-position: -90px 0; margin-left: 600px;}

var num=0;
var timer;
var nextFn=function(){
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    num++;
    if(num>3){
        num=0;
    }
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}
var prevFn=function(){
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    num--;
    if(num<0){
        num=3
    }
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}   
//左右按钮点击
$('.rightBtn').click(nextFn);
$('.leftBtn').click(prevFn);   
//小点点击
$('.btnList li').click(function(event) {           
    var i=$(this).index();
    //现在这个全局变量num就代表上一张
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    //再让序号和num进行同步
    num=i;
    //重新赋值以后，num就代表下一张
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}); 
//自动走
timer=setInterval(nextFn, 2000);
//鼠标悬停时...
$('.box').hover(function() {
    clearInterval(timer);
}, function() {
    clearInterval(timer);
    timer=setInterval(nextFn, 2000);
});

蒙太奇轮播
效果图
这里写图片描述

说明
听到蒙太奇轮播这个名字，还以为是有多么牛逼呢，原来它的实现原理和上面的差不多，只不过在之前的基础上面加了一层黑色透明的遮罩层，控制它进出的顺序，实现图片切换时有一层过渡的效果，只能说用户体验更好一点。
何为“蒙太奇”，蒙太奇(montage)在法语是“剪接”的意思，但到了俄国它被发展成一种电影中镜头组合的理论。在这里就是蒙了一层遮罩的意思。

代码

 <div class="box">
    <div class="fadeCover"></div>
    <ul class="imgList">
        <li style="display:block; background-image:url(images/yuHua/1.jpg); background-color:#020612;">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/2.jpg); background-color:#083B74">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/3.jpg); background-color:#948790">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/4.jpg); background-color:#000F22">
            <a href="javascript:;"></a>
        </li>
    </ul>
    <ol class="btnList">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li style="margin-right:0;"></li>
    </ol>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

.box{width: 100%; height: 435px; position: relative;}
.fadeCover{position: absolute; left: 0; top: 0; z-index: 101; background: #000; display: none;
width: 100%; height: 100%;}
.imgList{height: 435px; position: relative;}
.imgList li{position: absolute; height: 435px; left: 0; top: 0; display: none; width: 100%;
z-index: 100;
background-position: center top;
background-repeat: no-repeat;}
.imgList li a{display: block; width: 100%; height: 100%;}
.btnList{width: 120px; height: 12px; position: absolute; left: 50%; margin-left: -60px;
bottom: 15px; z-index: 102;}
.btnList li{width: 12px; height: 12px; background: url(images/yuHua/sprite_banner.png) -17px 0;
float: left; margin-right: 24px; cursor: pointer;}
.btnList li.current{background-position: 0 0;}
.leftBtn,.rightBtn{width: 35px; height: 71px; position: absolute; top: 50%; margin-top: -35px;
background: url(images/1920/icons.png) 0 0; cursor: pointer; z-index: 102;}
.leftBtn{left: 50%; margin-left: -600px;}
.rightBtn{left: 50%; background-position: -90px 0; margin-left: 600px;}

var num=0;
    var timer;
    var sportFn=function(){
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        $('.fadeCover').stop().fadeIn(200,function(){
            $(this).stop().fadeOut(300);
            $('.imgList li').eq(num).show().siblings('li').hide();
        });
    }
    var nextFn=function(){
        num++;
        if(num>3){
            num=0;
        }
        sportFn();
    }
    var prevFn=function(){  
        num--;
        if(num<0){
            num=3
        }
        sportFn();
    }
    //左右按钮点击
    $('.rightBtn').click(nextFn);
    $('.leftBtn').click(prevFn);
    //小点点击
    $('.btnList li').click(function(event) {
        var i=$(this).index();
        num=i;
        sportFn();
    });
    //自动走
    timer=setInterval(nextFn, 2000);
    //鼠标悬停时...
    $('.box').hover(function() {
        clearInterval(timer);
    }, function() {
        clearInterval(timer);
        timer=setInterval(nextFn, 2000);
    });

无缝滑动轮播
效果图
这里写图片描述

说明
无缝的关键在上面已经说过了，还是clone(true)方法，其中true一定不要忘记，一般的大图都是全屏或者一次切换一张图片，只需要让margin-left每次走一张图片的宽度就好，除了图片上面的控制，还有圆形小按钮需要和图片滚动对应起来，另外的左右箭头按钮切换图片就很简单了。

代码

<div class="con">
    <div class="conIn">
        <ul class="imgList">
            <li><img src="images/01.jpg" width="400" height="307" /></li>
            <li><img src="images/02.jpg" width="400" height="307" /></li>
            <li><img src="images/03.jpg" width="400" height="307" /></li>
            <li><img src="images/04.jpg" width="400" height="307" /></li>
        </ul>
    </div>
    <ol class="btnList">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li style="margin-right:0;"></li>
    </ol>
    <a href="javascript:;" class="left"></a>
    <a href="javascript:;" class="right"></a>
</div>

 *{ margin: 0; padding: 0; list-style: none; }
.con { width: 400px; height: 307px; border:5px solid #ccc; margin: 100px auto; position: relative; }
.conIn{height: 307px; overflow: hidden;  position: relative; }
.imgList{ width: 2000px; position:absolute; left: 0; top: 0;}
.imgList li{ float: left; width: 400px; height: 307px; }
.left,.right { width: 52px; height: 52px; position: absolute; top: 50%; margin: -26px 0 0 0; background: url(images/arr.png) no-repeat 0 0; }
.left { left: -21px; }
.right { background-position: -52px 0; right: -21px; }
.btnList{  width: 67px; height: 13px; position: absolute; left: 50%; bottom: -25px; margin-left:-33px;}
.btnList li { width: 13px; height: 13px; background:url(images/00.png) no-repeat 0 0; float:left; margin: 0 5px 0 0; cursor:pointer; }
.btnList li.current { background-position: 0 -26px; }

//定义一个变量，用来模拟那个不断在改变点的序号
        var dianKey=0;
        //定义一个变量，用来模拟那个不断在改变图片的序号
        var imgKey=0;
        var timer;

        //实现无缝的关键就是：请临时工
        var firstLi=$('.imgList li:first').clone(true);
        $('.imgList').append(firstLi);

        var nextFn=function(){

            //需要点的不断改变的序号：0 1 2 3
            dianKey++;
            if(dianKey>3){
                dianKey=0;
            }

            //让下一张的小点具备current...
            $('.btnList li').eq(dianKey).addClass('current').siblings('li').removeClass('current');

            //需要图片不断改变的序号：0 1 2 3 4
            imgKey++;
            if(imgKey>4){
                //当你在临时工身上时，用户以为他看到的是第一张，但实际上它是临时工；
                //用户希望看到的下一张是第1张
                imgKey=1;
                //这里一瞬间需要让盒子回到0的位置
                //因为我需要实现每次都走400PX，所以一瞬间回到0，从0到-400过渡
                $('.imgList').css('left', 0);

            }


            //移动公式：imgKey*-400
            var s=imgKey*-400;
            $('.imgList').stop().animate({'left':s}, 500);

        }

        var prevFn=function(){

            dianKey--;
            if(dianKey<0){
                dianKey=3;
            }
            //让上一张的小点具备current...
            $('.btnList li').eq(dianKey).addClass('current').siblings('li').removeClass('current');


            imgKey--;
            if(imgKey<0){
                //用户希望看到的上一张是第3张（临时工前面的那一张）
                imgKey=3;
                //为了实现无缝，也就是每次都走400PX
                //这里一瞬间需要让盒子回到-1600PX的位置
                //从-1600PX向-1200PX进行过渡 
                $('.imgList').css('left', -1600);
            }

            //移动公式：imgKey*-400
            var s=imgKey*-400;
            $('.imgList').stop().animate({'left':s}, 500);

        }

        $('.right').click(nextFn);
        $('.left').click(prevFn);

        //给单击小点绑定事件
        $('.btnList li').click(function(event) {

            //先获取到序号
            var i=$(this).index();
            var s=i*-400;
            //让小点走走
            $('.btnList li').eq(i).addClass('current').siblings('li').removeClass('current');
            //让图片走走
            $('.imgList').stop().animate({'left':s}, 500);
            //为了让当前这个序号能够影响到上一张和下一张，
            //还有一个很重要的步骤：序号同步（两个全局变量都需要同步）
            imgKey=i;
            dianKey=i;

        });

        //使用定时器实现自动走
        timer=setInterval(nextFn, 1500);

        //鼠标悬停时，停止定时器
        $('.con').hover(function() {
            clearInterval(timer);
        }, function() {
            clearInterval(timer);
            timer=setInterval(nextFn, 1500);
        });