用js实现简易轮播图

r囧r小猫 2021-12-05 13:25 349阅读 0赞

>         之前一直觉得自己技术菜学的东西基础没必要写技术性博客，但我发现我错了。博客是用来记录最近所学和遇到的坑又是怎么样填的坑的一种总结，当然也有可能有很多小白和我一样，为一些在别人看来很基础的东西而烦恼，曾n次被学长说应该多写写技术性博客，就从现在开始吧，多写多记多敲。这次记录一下前段时间写的一个简易轮播图。

**很多小白可能和我一样曾经为轮播图为苦恼，然而一路走来，见识了各式各样的轮播图，也发现实现轮播图的方法有很多，只要你敢想，你就能做出不一样的效果来。今天为大家分享一种简易轮播图及其代码，也算是为自己做个总结。**

**如今在很多网站上我们都会看到轮播图的身影，如：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70][]

**今天就分享一下这种轮播图。**

**        下面插入HTML代码：**

<div class="lunbo">
    			<ul class="lunboBig">
    				
    				<li class="imgContent" style="display: block;">
    					<img src="images/85.jpg">
    					<div class="text">向往土耳其的棉花堡？国内有同款，知道的人还不多哦！</div>
    				</li>
    				<li class="imgContent">
    					<img src="images/86.jpg">
    					<div class="text">四川话客服时薪高达700？我要去学语言了！</div>
    				</li>
    				<li class="imgContent">
    					<img src="images/87.jpg">
    					<div class="text">摄影师带你看冬季贝加尔湖蓝冰，摩尔曼斯克极光之旅</div>
    				</li>
    				<li class="imgContent">
    					<img src="images/88.jpg">
    					<div class="text">粉色沙滩、科莫多龙，这个免签小岛，看一眼就被种草！~</div>
    				</li>
    			</ul>
    			<ul class="lunboSmall">
    				
    				<li class="imgLink" style="border-color: #f80;">
    					<img src="images/85.jpg">
    				</li>
    				<li class="imgLink">
    					<img src="images/86.jpg">
    				</li>
    				<li class="imgLink">
    					<img src="images/87.jpg">
    				</li>
    				<li class="imgLink">
    					<img src="images/88.jpg">
    				</li>
    			</ul>
    		</div>

**接着是css代码： **

* {
    				padding: 0;
    				margin: 0;
    			}
    			
    			body {
    				min-width: 1300px;
    			}
    			
    			.lunbo {
    				/*轮播图*/
    				width: 100%;
    				height: 570px;
    				position: relative;
    			}
    			
    			.lunbo img {
    				width: 100%;
    				height: 100%;
    			}
    			
    			.lunboBig {
    				/*大区域轮播图*/
    				width: 100%;
    				height: 100%;
    				list-style-type: none;
    				overflow: hidden;
    				position: relative;
    			}
    			
    			.lunboBig .imgContent {
    				/*大图*/
    				float: left;
    				width: 100%;
    				height: 100%;
    				position: relative;
    				display: none;
    			}
    			
    			.lunboBig .imgContent .text {
    				/*每张图的文字区域*/
    				color: white;
    				font-size: 30px;
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				margin-left: -400px;
    				margin-top: -200px;
    			}
    			
    			.lunboSmall {
    				/*小区域轮播图*/
    				position: absolute;
    				left: 50%;
    				top: 85px;
    				margin-left: 445px;
    				z-index: 3;
    			}
    			
    			.lunboSmall .imgLink {
    				/*小图*/
    				list-style-type: none;
    				width: 120px;
    				height: 70px;
    				border: 2px solid transparent;
    			}

**最后是js代码：**

**        其中上半部分实现的是自动轮播，我们可以发现，只需要简单的遍历一遍，让大图的display为none，所有小图的边框颜色为空，然后给所轮播到的图添加上样式，如此便有个基本框架了。当然这里我们需要设置定时器，进而实现轮播。而第四张图轮播到下一张要跳到第一张继续轮播，所以这里我们做了个if判断来衔接。**

**而要做到手动轮播，思路也很简单。我们需要给小图绑定单击响应函数，当点击小图时，清除定时器以起到暂停轮播的作用，同样遍历一遍，给所点图片添加样式，最后用定时器继续轮播。**

**        如此，简易轮播图便可大功告成了。欢迎大佬给建议，欢迎和我一样的小白一同探讨。我会再接再厉。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20211205/a58634a1f8804d3dbb16f0662cb1782a.png