小米商城网页制作大全之轮播图

导读：
小米商城、京东商城和天猫商城都是最具有代表性的电商平台，都可以用来练习以巩固所学的前端基础知识。在电商平台我们都可以在第一屏看到几张很大又具有卖点的图片在循环自动播放，鼠标悬停时自动播放停止，这就是轮播图。在昨日完成了小米商城轮播图这部分制作，效果图：

制作过程整理如下:

1.HTML部分

• 1.1.定义轮播图片

首先定义一个div为轮播图片的区域大小，在一个div中包裹无序列表标签ul，ul中包裹几个li列表项标签，用于显示图片，准备轮播几张图片就写几个li标签，每一个li标签下设置超链接a标签，包裹img图片标签，因为点击每一张图片要跳转到相应的内容。代码如下：

<div id="play" class="play">
            <ul class="imgList">
                <li class="current">
                    <a href=""><img src="img/play01.jpg" alt="">a>
                li>
                <li>
                    <a href=""><img src="img/play02.jpg" alt="">a>
                li>
                <li>
                    <a href=""><img src="img/play03.jpg" alt="">a>
                li>
                <li>
                    <a href=""><img src="img/play04.jpg" alt="">a>
                li>
                <li>
                    <a href=""><img src="img/play05.jpg" alt="">a>
                li>
            ul>

• 1.2 轮播图中下方圆点循环按钮
  在ul标签下定义一个div，用于存放轮播图下方顺序按钮。
  代码如下：

			
            <div class="play-list">
                <span class="current">1span>
                <span>2span>
                <span>3span>
                <span>4span>
                <span>5span>
            div>

• 1.3 左右两侧按钮
  定义好图片循环下方圆点按钮之后，定义左右两侧按钮。
  代码如下：

			
            <div class="slide-list">
                <span class="slide slide-left"><span>
                <span class="slide slide-right">>span>
            div>

2.css样式定义

这里先贴上代码，再进行解释。

/*轮播图play*/
.play{
            margin:0 auto;
            width:1170px;
            height:460px;
            position:relative;
            }
.play ul{
            list-style:none;
            margin:0;
            padding:0;
            }
.play img{
            width:1170px;
            height:460px;
            display:block;
            }
.imgList li{
            position:absolute;
            opacity:0;
            transition: opacity 1s;
            top:0;
            left:0;
            }
.imgList li.current{
            opacity:1;
            }
.play-list{
            position:absolute;
            bottom:20px;
            right:20px;
            }
.play-list span{
            float:left;
            width:12px;
            height:12px;
            border:1px solid #999;
            background: #999;
            border-radius: 7px;
            font-size: 0;
            margin-right: 5px;
            cursor: pointer;
            }
.play-list span.current{
            background:red;
            }
.slide{     position:absolute;
            color:#fff;
            background:rgb(0,0,0,.6);
            height:80px;
            width:40px;
            top: 50%;
            line-height: 80px;
            text-align: center;
            opacity:0.5;
            cursor:pointer;
            font-weight: bold;
            font-size: 20px;
            transform: translate(0, -50%);
            transition:0.3s;
            }
.slide:hover {
            opacity: 1;
            }
.slide-left{
            left:234px;
            }
.slide-right{
            right:1px;
            }

• .play：定义轮播图区域长度宽度，margin:0 auto;使其居中。设置相对定位。
• .play ul：ul标签自带一个黑色实心圆点样式，此处 list-style:none;去除此样式。margin:0;padding:0;去除与上方间距。
• .play img：设置图片的长度宽度，display:block;设置为块状属性。
• .imgList li：所有图片设置成绝对定。opacity:设置透明度，取值由0到1，由完全透明到完全不透明。
• transition: opacity 1s;transition用于动画的平滑过渡，此处为透明度级别过渡时间1秒。
• .play-list：设置下方圆点循环顺序按钮的位置。
• .play-list span：圆点按钮的制作，先为长度宽度均是12px、边框1像素灰色的方形，由border-radius属性设置逐步为圆形，设置背景色灰色。
• border-radius：定义弯道的形状，值由1到10，逐渐由方形变为圆形。
• cursor:pointer：鼠标所指处由箭头状变为手型状。
• .play-list span.current：设置循环到第几张图片时当前按钮的背景色。
• [此处注意]：.play-list span.current中span和.current间不能有空格，否则样式不起作用，图片不会循环显示，只会显示最后一张图片。li.current 是li本身class名为current 的样式。而li .current 是表示li标签下子元素class名为current的样式。
• .slide：设置左右两侧按钮样式。transform:translate(0,50%)：实现块状元素>和<上下居中。
• .slide:hover：设置左右两侧按钮鼠标悬停时的背景色。

3.核心JS代码动画部分

• 3.1 导入jQuery
  首先要导入JavaScript插件jQuery库，要在所写的js代码上面，不然不会起作用。而js代码写在body的最下方，可以一边加载内容一边显示，否则要等图片动画等都加载完成才能显示内容。导入jQuery库方法如下：

  <script src="js/jquery-3.3.1.js"></script>
  

• 3.2 写主要实现函数

  • 3.2.1 设置变量
    代码如下：

    			var num=0;            //循环变量,定义图片页数
                var delay = 1000;  //播放时间间隔
                var length = 5;    //图片张数
    

  • 3.2.2 播放图片函数
    代码如下：

    		<!--1.播放图片，n表示当前图-->
                function playImage(n){
                    $('.play .imgList li').removeClass('current').siblings().eq(n).addClass('current');
                    $('.play-list span').removeClass('current').siblings().eq(n).addClass('current');
                    }
    

    • 对于图片：移除当前图片的current样式，查找索引为n的兄弟标签siblings()，为其添加上current样式。
    • 对于播放列表按钮：移除当前圆形按钮的current样式，查找索引为n的兄弟标签siblings()，为其添加上current样式。

  • 3.2.3 写循环轮播图片函数
    代码如下：

    			<!--2.循环轮播图片函数-->
                function scrollPicsPlay(){
                    num++;
                    if (num>=length){
                        num=0;
                    }
                    playImage(num);
                    }
    

  • 3.2.4 设置图片播放间隔
    代码如下：

    			//3..设置图片播放时间间隔
                var timeSpan = setInterval(scrollPicsPlay,delay);
    

  • 3.2.5 给各按钮绑定事件
    代码如下：

    	//4.1.鼠标悬浮 不轮播
    	$('.play').on('mouseenter', function(){
    		clearInterval(timeSpan);
    	}).on('mouseleave', function(){
    		timeSpan = setInterval(scrollPicsPlay, delay)
    	});
    	//4.2给圆点按钮绑定事件
    	$('.play-list span').on('click', function(){
    		num = $(this).index();
    		playImage(num);
    	});
    	//4.3.右边图片绑定事件
    	$('.slide-right').on('click', function(){
    		num++;
    		if (num >= length) {
    			num = 0;
    		}
    		playImage(num)
    	});
    	//4.4.左边图片绑定事件
    	$('.slide-left').on('click', function(){
    		num --;
    		if (num < 0) {
    			num = length-1
    		}
    		playImage(num)
    	});
    });
    

    至此整个轮播图就做成了，效果图如下：
    

子在川上曰：逝者如斯夫，不舍昼夜。