轮播图,小白教程

轮播图:
可以从图上，看出我们要实现的效果，首先罗列出来，方便我们一步步的进行处理。
此处我才用的是重叠图片，通过定时器，按一定时间进行对图片display属性进行更改。
实现的效果是：1>图片自动轮播 2>图片序列按钮的点击更改图片事件 3>上、下一张的按钮事件 4>鼠标悬于图片上，不进行轮播。
当然，在这些效果之前，我们需要写完我们的html内容和css样式。
下列开始先写html。

<!--最大的div，是为了做为一个轮播图所需元素的容器-->
		<div id='main'>
	<!--轮播图片区   在取名时，因为各有所长(分别取名slide1-5)，有共有特性(banner-slide)，所以，取多个类名-->
				<div id='banner'>
					<!--图1-->
					<a href="">
					<div class='banner-slide  slide1'>1</div>
					</a>
					<!--图2-->
					<a href="">
					<div class='banner-slide  slide2'>2</div>
					</a>
					<!--图3-->
					<a href="">
					<div class='banner-slide  slide3'>3</div>
					</a>
					<!--图4-->
					<a href="">
					<div class='banner-slide  slide4'>4</div>
					</a>
					<!--图5-->
					<a href="">
					<div class='banner-slide  slide5'>5</div>
					</a>
				</div>
		<!--
			移动数字绑定图片
			必然的是，和图片数量是对等的
		-->
				<div class="dots">
					<ul id='dots'>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
				</div>	
				<!--
					上、下一张按钮
				-->
				<div id="left-right">
					<div class="move" id="prev">&lsaquo;</div>
					<div class="move" id="next">&rsaquo;</div>
				</div>
		</div>	

很好，框架已经有了,开始写css吧。

	/*二话不说，上来就用通配符删除浏览器默认 值*/
	*{
		margin:0;
		padding: 0;
	}
	
	#main{
		width: 1200px;
		height: 600px;
		position: relative;
		margin: 50px auto;/*为了在此的观看效果，我选择了这个数据*/
		/*overflow: hidden;*//*因为设置了隐藏，所示的效果只有一张solid1*/
		/*可在元素赠加和定位完成后进行影藏*/
	}
	/*
	 * 为所以图片设置同main一样宽高不大推荐
	 	因为，如果图片没进行过处理，强制改变宽高，容易产生变形，
	 	图片将变得难看。
	 * *//*为了使图片叠加所以我们使用absolute，在此之前
	 * 	我们需要去它的父级添加一个relative。
	 * */
	#main .banner-slide{
		position: absolute;
		width: 1200px;
		height: 600px; 
		overflow: hidden;/*防止图片过大，超出范围，影响视觉*/
	}
	/*
	 * 挨个设置轮播图的图片
	 * 为了方便在图片所在div加内容，标签
	 * 我们选择把轮播图内容以background形式出现。
	 */
	#main .slide1{
		background: red;
	}
	#main .slide2{
		background: yellow;
	}
	#main .slide3{
		background: blue;
	}
	#main .slide4{
		background: green;
	}
	#main .slide5{
		background: deepskyblue;
	}
	/*ul标签的移动*/
	#main .dots #dots{
		position: absolute;
		margin-top: 560px;/*由于我设置了li高为40，总高600，所以进行
		560的移动*/
		margin-left: 275px;/*(1200-5*130)/2*/
	}
	#main .dots #dots li{
		height: 40px;
		width: 80px;
		border-radius: 20%;
		background: gray;/*在此的样式根据个人喜好自己添加*/
		/*由于上面的定位，所以*/
		float: left;/*为了是图标自左向右*/
		margin-left: 50px;
		list-style: none;
	}
	#main #left-right .move{
		position: absolute;
		margin-top:260px;
		height: 80px;
		width: 40px;
		font-size: 50px;/*设置<>大小*/
		padding-left: 10px ;
	}
	/*左右分离*/
	#main #left-right #next{
		right:0;
	}
	/*触碰上下张有效果*/
	#main #left-right .move:hover{
		background: rgba(0,0,0,0.4);
	}

暂时先这样，看一下效果：

是不是已经有点雏形了？但是里面还少了一些东西，我们后面慢慢加，接下来开始我们的js部分

//因为之前使用了很多的id，所以我们为了方便得到
//所需的document.getElementById();,做一个封装函数（我是网上看来觉得挺好的)
	function byid(id){
		return typeof(id)==='string'?document.getElementById(id):id;
	//	相当于 return if(typeof(id)==='string'){
	//		document.getElementById(id);
	//	}else{
	//		id;
	//	}
	}
	//接下来开始轮播图脚本了。
	//为了使得函数很多变量能互相使用，所以我们需要在wai
	//定义好全局变量。
	//len的设定   ：  由于长度上的计算很少，而且图片和数字移动数量相同，只需设置一个
	// index的设定：  设置记数变量，因为数字从0开始计算。
	var main = byid('main'),
		pics = byid('banner').getElementsByTagName('div'),
		dots = byid('dots').getElementsByTagName('li'),
		prev = byid('prev'),
		next = byid('next'),
		len = pics.length,
		index = 0,
		timer = null;//timer是为了进行定时器的设置挺与开
	//轮播图整体函数
	function solide(){
		//轮播定时器（是整个容器即main）：移入鼠标停止，和移出继续轮播
		//先来个划入清除定时器
		banner.onmouseover=function(){
			
		}
		//再写一个划出继续启动定时器
		banner.onmouseout = function(){
			
		}
	}
	solide();//提前写上，开始方法，才有轮播效果

接着为了方便我们接下来的js操作，进行下css和html的补充。如图

来，我们看下补充的js代码（为了好区分）我使用了图片：

接着

最后！

下面送上完整代码（分块）
html

<!--最大的div，是为了做为一个轮播图所需元素的容器-->
		<div id='main'>
	<!--轮播图片区   在取名时，因为各有所长(分别取名slide1-5)，有共有特性(banner-slide)，所以，取多个类名-->
				<div id='banner'>
					<!--图1-->
					<a href="">
					<div class='banner-slide  slide1 slide-active'>1</div>
					</a>
					<!--图2-->
					<a href="">
					<div class='banner-slide  slide2'>2</div>
					</a>
					<!--图3-->
					<a href="">
					<div class='banner-slide  slide3'>3</div>
					</a>
					<!--图4-->
					<a href="">
					<div class='banner-slide  slide4'>4</div>
					</a>
					<!--图5-->
					<a href="">
					<div class='banner-slide  slide5'>5</div>
					</a>
				</div>
		<!--
			移动数字绑定图片
			必然的是，和图片数量是对等的
		-->
				<div class="dots">
					<ul id='dots'>
						<li class="li1">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
				</div>	
				<!--
					上、下一张按钮
				-->
				<div id="left-right">
					<div class="move" id="prev">&lsaquo;</div>
					<div class="move" id="next">&rsaquo;</div>
				</div>
		</div>	

css

	/*二话不说，上来就用通配符删除浏览器默认 值*/
	*{
		margin:0;
		padding: 0;
	}
	
	#main{
		width: 1200px;
		height: 600px;
		position: relative;
		margin: 50px auto;/*为了在此的观看效果，我选择了这个数据*/
		overflow: hidden;/*因为设置了隐藏，所示的效果只有一张solid1*/
		/*可在元素赠加和定位完成后进行影藏*/
	}
	/*
	 * 为所以图片设置同main一样宽高不大推荐
	 	因为，如果图片没进行过处理，强制改变宽高，容易产生变形，
	 	图片将变得难看。
	 * *//*为了使图片叠加所以我们使用absolute，在此之前
	 * 	我们需要去它的父级添加一个relative。
	 * */
	#main .banner-slide{
		position: absolute;
		width: 1200px;
		height: 600px; 
		overflow: hidden;/*防止图片过大，超出范围，影响视觉*/
		display:none;
	}
	#main .slide-active{
		display: block;
	}
	/*
	 * 挨个设置轮播图的图片
	 * 为了方便在图片所在div加内容，标签
	 * 我们选择把轮播图内容以background形式出现。
	 */
	#main .slide1{
		background: red;
	}
	#main .slide2{
		background: yellow;
	}
	#main .slide3{
		background: blue;
	}
	#main .slide4{
		background: green;
	}
	#main .slide5{
		background: deepskyblue;
	}
	/*ul标签的移动*/
	#main .dots #dots{
		position: absolute;
		margin-top: 560px;/*由于我设置了li高为40，总高600，所以进行
		560的移动*/
		margin-left: 275px;/*(1200-5*130)/2*/
	}
	#main .dots #dots li{
		height: 40px;
		width: 80px;
		border-radius: 20%;
		background: gray;/*在此的样式根据个人喜好自己添加*/
		/*由于上面的定位，所以*/
		float: left;/*为了是图标自左向右*/
		margin-left: 50px;
		list-style: none;
	}
	#main .dots #dots .li1{
		background: blue;
	}
	#main #left-right .move{
		position: absolute;
		margin-top:260px;
		height: 80px;
		width: 40px;
		font-size: 50px;/*设置<>大小*/
		padding-left: 10px ;
	}
	/*左右分离*/
	#main #left-right #next{
		right:0;
	}
	/*触碰上下张有效果*/
	#main #left-right .move:hover{
		background: rgba(0,0,0,0.4);
	}
	

js

//因为之前使用了很多的id，所以我们为了方便得到
//所需的document.getElementById();,做一个封装函数（我是网上看来觉得挺好的)
	function byid(id){
		return typeof(id)==='string'?document.getElementById(id):id;
	//	相当于 return if(typeof(id)==='string'){
	//		document.getElementById(id);
	//	}else{
	//		id;
	//	}
	}
	//接下来开始轮播图脚本了。
	//为了使得函数很多变量能互相使用，所以我们需要在wai
	//定义好全局变量。
	//len的设定   ：  由于长度上的计算很少，而且图片和数字移动数量相同，只需设置一个
	// index的设定：  设置记数变量，因为数字从0开始计算。
	var main = byid('main'),
		pics = byid('banner').getElementsByTagName('div'),
		dots = byid('dots').getElementsByTagName('li'),
		prev = byid('prev'),
		next = byid('next'),
		len = pics.length,
		index = 0,
		timer = null;//timer是为了进行定时器的设置挺与开
	//定时器的关注
	function solide(){
		//轮播定时器（是整个容器即main）：移入鼠标停止，和移出继续轮播
		//先来个划入清除定时器
		banner.onmouseover=function(){
			if(timer){//即timer不为null，为真
				clearInterval(timer);//清除setinterval，并且此时timer又为false，不过，随着循环（即师表
				//移开banner，循环继续又变回 setinterval。
			}
		}
		//再写一个划出继续启动定时器
		banner.onmouseout = function(){
			timer = setInterval(function(){
				index++;
				if(index>=len){
					index=0;
				}//注意因为index表示的是图片的标号，最大为4！！
				//有了index就可以进行轮播了，可是我们没有执行图片变化的番薯
				//设置一个，在全局作用域中。
				changImg();
			},3000);//setInterval为延时不停息的执行
		}
		banner.onmouseout();//这样子直接运行function，可以不用在鼠标移出才进行，进入页面同时就开始轮播
		//接下来我们开始数字下标绑定图片移动；
		for(var j=0;j<len;j++){
			//在开始前，我们需要知道，函数是可以独立作用域之外的。
			dots[j].index=j;//为所以dots属性添加id，分别为0，1，2，3，4。
			//不太推荐使用这样，毕竟id名字取数字开头不好，不太合规矩。
			dots[j].onclick = function(){
				index = this.index;//(引用id的是dots,及dots的id);
				changImg();
			}
		}
		//然后是上、下一张
		prev.onclick = function(){
			index--;
			if(index<0){
				index=len-1;
			}
			changImg();
		}
		next.onclick = function(){
			index++;
			if(index>=len){
				index=0;
			}
			changImg();
		}
	}
	solide();//提前写上，开始方法，才有轮播效果
	//图片自动切换
	function changImg(){
		for(var i=0;i<len;i++){
			pics[i].style.display='none';
			dots[i].className="";
		}
		pics[index].style.display='block';
		dots[index].className='li1';
	}