前端重要组件--轮播图的详细教程(层级轮播图和水平轮播图)(极其详细,建议收藏)

最近前端学习中遇到了网页中一个极为重要的组件,轮播图,并且尝试用代码做了两种类型的轮播图,其一层级轮播图,是纯html+css3,和少量js,其二,水平轮播图,这个也是最常见的轮播图,用到了js的部分知识,定时器什么的,主要用了jquery实现。

层级轮播图

1,首先制作轮播图的一般步骤是先搞一个div盒子装轮播图,div里面是一个无序列表,列表中的li就是一张张图片,接着和ul列表同级,并且是div的子元素,放两个按钮button,用来控制轮播图前后,html基本就是这样子滴。
首先轮播图嘛,就是会自己朝一个地方移动,用户鼠标放上去还要考虑轮播停止,用户点击按钮要能切换图片,最后要防止用户老爷们疯狂点击带来的bug,设置一个点击时间限制,让用户在三分之一秒之内只能点一次,这个时间段的其他点击全部忽略。
2,然后是css部分,层级轮播图的原理就是让li里面的图片开启绝对定位,让图片们浮动起来,重叠在一起,那么重叠在一起了怎么让它轮播呢?这主要是运用一个z-index属性设置图片的垂直优先级,这个值越大图片就在上层,就可以让你想要的图片浮现出来了,最好再设置一个transition为0.3s,透明度调一调,让浮现更加立体
3,js的部分主要是响应按钮点击事件,其实还有轮播图的自动轮播效果需要用到js的定时器,但是这里暂且不提,在下面的水平轮播图中我会细讲,这里主要是熟悉轮播原理。按钮点击事件就是给下一张图片增加一个active类,类里面设置他的z-index值让他浮现在最上层,并且最好设置一下透明度,让变化更加自然。就是简单的将图片的除了最上层的那张,其他图片初始设置为透明度0,就是完全透明,然后轮到下面的图片出现时,增加z-index属性,并且透明度为1,最好transition设置一下时间,让变化更自然。

水平轮播图

水平轮播图是市面上最常见的轮播图没有之一。所以这玩意挺重要,下面细细讲。
1,第一步,html代码和上面层级轮播图介绍的雷同。

<div id="first">
			<a href="javascript:;" class="left" >&lt;</a>
			<a href="javascript:;" class="right" >&gt;</a>
			<ul class="list">
				<li class="">
					<img src="0.jpg" alt="pic" class="loop"/>
				</li>
				<li class="">
					<img src="1.jpg" alt="pic" class="loop"/>
				</li>
				<li class="">
					<img src="2.jpg" alt="pic" class="loop"/>
				</li>
				<li class="">
					<img src="3.jpg" alt="pic" class="loop"/>
				</li>
			</ul>
</div>

2,设置css代码,设置基本样式,消除一些默认样式

		*{
			    margin: 0;
			    padding: 0;
			}
			ul{
			    list-style: none;
			}
			a:link,a:visited,a:hover,a:active{
			    text-decoration: none;
			}

(2.1) 设置loop类,就是图片的类,主要让图片适应大小

.loop{
			    padding: 0;
			    max-width: 100%;
}

(2.2)设置显示框,轮播图的显示口,超出它范围的都隐藏,别忘了开启定位,子绝父相

#first{
			    position: relative;
			    overflow: hidden;
			    height:352px;
			    width:1380px;
			    margin:0 auto;
			    background: black;
			}

3,相当关键的一步,这里是水平轮播图的精髓,让li中的图片设置为inline-block,让图片在全部一层上,要做到这一点必须设置好它的父元素也就是ul的长度,我这里有4张图片,每张图片1380px,正常来说ul的宽应该是1380*4,可是这里设置成8280px,刚好多了两张图片,也就是ul中其实有6张图片,并且left设置为-1380px,就是从这六张图片的第二张开始播放。我这里先说好,本来是4张图片没错,可后来通过js将4张图片的最后一张复制了一下插到了第一个位置,将4张图片的第一张的复制插入到了最后面,如果原来图片的次序是1,2,3,4的话,接下来经过js处理,就变成了4,1,2,3,4,1,至于为什么这么做,就是后面的内容,这里先交代一下,主要是为了轮播切换效果更加合理。。

.list{
			    position:absolute;
			    top: 0;
			    left: -1380px;
			    width:8280px;
			    font-size: 0;
			}
			.list li{
			    width: 1380px;
			    display: inline-block;
			}

4,设置按钮链接的样式

.left{
			    position: absolute;
			    left: 0;
			    top: 120px;
			    display: none;
			    z-index: 10;
			    border: 1px solid rgba(60,60,60,.8);
			    border-radius: 40px;
			    background: rgba(40,40,40,.8);
			    width: 60px;
			    height: 60px;
			    text-align: center;
			    line-height: 60px;
			    transition: 0.3s;
			}
			.right{
			    position: absolute;
			    right: 0;
			    top: 120px;
			    display: none;
			    z-index: 10;
			    border: 1px solid rgba(60,60,60,.8);
			    border-radius: 40px;
			    background: rgba(40,40,40,.8);
			    width: 60px;
			    height: 60px;
			    text-align: center;
			    line-height: 60px;
			    transition: 0.3s;
			}
			.right:hover,.left:hover{
			    color: rgba(255,255,255);
			}

5,导入jquery文件,注意路径,写好jquery入口函数

<script src="../jquery/js/jquery1.1.3.js"></script>
<script>$(function(){});</script>

6,开始之前3步骤的添加结点代码

var l1 = $(".list li:first-child").clone();
var l2 = $(".list li:last-child").clone();
$(".list").append(l1);
$(".list").prepend(l2);

7,设置全局变量,代码实现鼠标进入显示按钮,鼠标离开,隐藏按钮。

var num = $(".list").children().length-1;
var pic_len = 1380;
var all_len = num*pic_len;
console.log("获得图片数量:"+(num+1)+"真实数量:"+(num-1));
$("#first").on({
    mouseenter:function(){
    $(".left").show();
    $(".right").show();
    },
    mouseleave:function(){
    $(".left").hide();
    $(".right").hide();
    }
});

8,设置定时器,自动轮播。这里也是整个代码的一个核心,之前提到过将1,2,3,4的图片顺序通过复制插入结点变为,4,1,2,3,4,1,这样子做的目的是,当轮播图到4时自动动画切换到1,到1时切换到第一个1,这时的切换是不通过动画的瞬间切换,用户无法感知,接下来1到2就可以重新用动画进行切换,这是到达最右端,到最左端的原理一样。

    var left = -pic_len;
    var flag = 0;
    var tag = true;
    var a = function(){
        flag++;
        left=left-pic_len;
        if(left<-all_len){
            left = -pic_len*1;
            $(".list").css('left',left+'px');
            console.log('H');
            left-=pic_len;
        }
        if(left>0){
            left = -pic_len*4;
            $(".list").css('left',left+'px');
            console.log('F');
            left-=pic_len;
        }
        console.log('a:'+flag);
        $(".list").animate({left:left+'px'},'0.8s');
    }
    go = setInterval(a,6000);

9,设置鼠标进入轮播停止,鼠标离开,轮播重新启动

$("#first").on({
			        mouseenter:function(){
			        console.log("鼠标进入");
			        clearInterval(go);
			        },
			        mouseleave:function(){
			        left = parseInt($(".list").css('left'));
			        console.log("鼠标离开");
			        console.log(left);
			        go = setInterval(a,6000);
			        }
			    });

10,最后设置按钮的逻辑代码,并且设置好400毫秒内只能点击一次

$(".left").on({
			        click:function(){
			            if(tag){
			            console.log("向左走"+left);
			            left+=pic_len;
			            if(left>0){
			            left = -pic_len*4;
			            $(".list").css('left',left+'px');
			            left+=pic_len;
			            }
			            $(".list").animate({left:left+'px'},'0.8s');
			            tag = false;
			            setTimeout(function(){
			                tag = true;
			            },400);
			            }
			        }
			    })
			    $(".right").on({
			        click:function(){
			            if(tag){
			            console.log("向右走"+left);
			            left-=pic_len;
			            if(left<-all_len){
			                left = -pic_len*1;
			                $(".list").css('left',left+'px');
			                left-=pic_len;
			            }
			            $(".list").animate({left:left+'px'},'0.8s');
			            tag = false;
			            setTimeout(function(){
			                tag = true;
			            },400);
			            }
			        }
			    })

总结:轮播图的实现方法多种多样,这只是其中之一。

你可能感兴趣的:(网页组件)