制作一个简单的轮播图（详解新手教学）

曾经终败给现在 2022-04-22 22:00 417阅读 0赞

# 制作一个简单的轮播图（详解新手教学） #

相信很多初学者，无论是前端还是后端，对于制作页面时，都想自己亲手制作一个轮播图。  
如何制作一个轮播图：

*  基础知识：有HTML，Css，js基础
 *  本文使用技术： HTML，boostrap，jQuery  
    先贴代码

页面：

<div class="lunbotu row">
    				<div id="piclist">
    					<ul class="focus-index-list">
    						<li>
    							<a href="#" class="focus-list "><img src="img/lunbo1.jpg" width="1359px" height="440px" /></a>
    						</li>
    						<li>
    							<a href="#" class="focus-list"><img src="img/lunbo2.jpg" /></a>
    						</li>
    						<li>
    							<a href="#" class="focus-list"><img src="img/lunbo3.jpg" /></a>
    						</li>
    					</ul>
    				</div>
    				<div class="focus-side-inner">
    					<ul id="focus-ul">
    						<li class="focus-li">
    							<a href="#" class="focus-a">第一张图片</a>
    						</li>
    						<li class="focus-li">
    							<a href="#" class="focus-a">第二张图片</a>
    						</li>
    						<li class="focus-li">
    							<a href="#" class="focus-a">第三张图片</a>
    						</li>
    					
    					</ul>
    				</div>

css：

js：

在制作轮播图之前你先需要知道setInterval的使用，熟悉animate函数。  
制作原理：  
通过将一组图片的属性设置为position：relative（相对定位），并将图片的属性设置为float：left，使多个图片都成为浮动元素，这样做的目的：使多张图片连在一起，不然它们都只是一个单一独立的元素。  
本文的做法是将所有的无序列表中的包含图片的连接元素设置为浮动元素  
使用animate函数，修改元素的属性：left：-1420px，使元素距离左边为1420px（这个数值也是产生轮播图的重要因素，一张图片是1420px，多张图片n\*1420px），并设置变化的速度，从而产生动态效果，形成我们所见的轮播图。  
自动轮播图需使用setInterval函数，使函数在设置的规定间隔时间重复执行。

形成轮播图的原理，图解：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0E3OTM3OTExODI_size_16_color_FFFFFF_t_70]1为外层div，2为1内层div。  
你的图片大小应该为1div的大小，然后将2div设置为position：relative，轮播图能实现的主要原理也是因为这个属性，因为他能使用left这个属性。将2div的宽度设置的足够大，使你的图片能够在一行内浮动。如果出现两行或多行，会出现多个图片同时左移的现象。出现原因：浮动元素被包含在不是浮动元素的div中，2div的宽度是固定的，图片被包含其中，div移动，图片跟着移动。  
想到这些，其他就是如何操作2div移动了，使用函数animate()，设置setInterval()自动移动，实现轮播图。

实现轮播图的方式有很多种，这只是其中非常简单的一种，编程之路，任重而道远，与君共勉。

第一次在CSDN写文章

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0E3OTM3OTExODI_size_16_color_FFFFFF_t_70]: /images/20220327/6871a9953d7840979b00072650cd8aaf.png