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

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

基础知识：有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：

		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			a {
				font-family: "微软雅黑";
				color: white;
			}
			
			a:hover {
				text-decoration: none;
				color: limegreen;
			}
			
			li {
				list-style: none;
			}
			
			.lunbotu {
				width: 1349px;
			}
			
			#piclist {
				width: 100%;
				height: 440px;
				overflow: hidden;
			}
			
			.focus-list {
				float: left;
				position: relative;
			}
			
			.focus-side-inner {
				position: absolute;
				top: 0px;
				right: 200px;
				height: 440px;
				background-color: rgba(0, 0, 0, .7);
			}
			
			#focus-ul {
				margin-top: 20px;
			}
			/*将li设置为浮动元素，将所有图片连在一起*/
			.focus-li {
				width: 280px;
				height: 32px;
				margin-bottom: 10px;
				text-align: center;
			}
			
			
			.focus-li a {
				line-height: 30px;
				font-size: 17px;
			}
			.focus-index-list{
				width:20000px;//使图片都在同一行
				
			}
			
		</style>

js：

<script type="text/javascript">
			$(document).ready(function() {
				var _index = 0;
				var flag=true;
				var allimg=$(".focus-a").length;//用来做判断
				var timer=null;
				
				aogo(flag);
				
				$(".focus-a").hover(function(){
					clearInterval(timer);//取消定时执行；
					flag=false;
					_index=$(".focus-a").index($(this));//获取当前鼠标所在的元素在所有兄弟元素的位置。并使用这个数值来达到自动按序轮播的效果
					go(_index);
				},function(){  //在移出鼠标时，重新启动定时执行函数
					flag=true;
					timer=setInterval(autogo,2000);
				})
				
				
				function aogo(flag){
					if(flag){
						timer=setInterval(autogo,2000);//设置间隔执行函数，这里注意，在jQuery中，不能使用setInterval("autogo()",2000);
					}
				}
	
				function autogo(){
					
					if(_index<allimg-1){ //设置定时执行的范围，不然会出现不断执行，出现白框的情况
						_index++;
					}else if(_index=allimg-1){
						_index=_index;//当执行到最后一个时，固定数值，使其看起来不再移动
					}
					go(_index);
				}
				
				function go(num) {
				
					var a=-num*1420+'px';//这里是字符串拼接，因为left对应的值为一个字符串
					
					$(".focus-list").animate({
						left: a
					},200)
				}
			})
		</script>

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

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

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

第一次在CSDN写文章

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

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

相关推荐