javascript旋转轮播图 js轮播图移动 javascript轮播图按钮

预览：

首先在HTML和CSS下构造一下界面
HTML代码部分

<!-- 轮播图片部分-->
	<div id='banner' class="div1">
		<img src="images/ad-01.jpg" alt="" id='bg1'>
		<img src="images/ad-02.jpg" alt="" id='bg2' class="hidden">
		<img src="images/ad-03.jpg" alt="" id='bg3' class="hidden">
		<img src="images/ad-04.jpg" alt="" id='bg4' class="hidden">
	</div>
	
	<!-- 按钮部分-->
	<div id='bgCtl' class="div2">
		<a onmouseover="">1</a>
		<a onmouseover="">2</a>
		<a onmouseover="">3</a>
		<a onmouseover="">4</a>
	</div>

CSS代码部分

/*负责隐藏图片*/
		.hidden{
			display: none;
		}
		
		/*图片位置*/
		.div1{
			position: absolute;
			top:50px;
			left:100px;
		}
		
		/*按钮位置*/
		.div2{
			position: absolute;
			top:310px;
			left: 650px;
		}
		
		/*按钮样式*/
		a{
			display: block;
			float: left;
			width: 20px;
			height: 20px;
			background-color: #fff;
			color: #000;
			margin-right: 2px;
			text-align: center;
			line-height: 22px;
			font-size: 14px;
			border: 1px solid #ccc;
		}

首先hidden是负责隐藏其余图片的，当然在后面也会利用这个来控制显示。

定位部分可以忽略，因为只是在当前实例中使用，主要是为了方便看和模拟。

使用a链接作为按钮部分，主要也是为了在练习中方便操作。

大致预览效果为：

图片资源可以自行制作，我这里只是将4张图片都调整为相同大小（700*300）的图片而已。

首先最基本的，我们要实现图片的自动轮播功能：
那么我们在JS中：

1.定义显示编号的控制器

var max=4;//总图片的数量
		var now=1;//当前显示的图片，默认为第一张
		var timer;//用来存储控制器
		function $(id){
			return document.getElementById(id);//模拟jQuery获取ID的方式，方便操作
		};

2.构造更换显示的函数show()

function show(){
		//利用循环对4张图进行显示和隐藏的控制，正常项目中可能会用到更多的图
		for(var i=1;i<=4;i++){
			if(i==now){//如果i和now的标号是相当的，那么我们要显示这张图，隐藏其余的图
				$('bg'+i).classList.remove('hidden');//显示当前图片
			}else{
				$('bg'+i).classList.add('hidden');//隐藏其他图片
			};
		};

		//判断当前图片是否为最后一张图，如果是，则回到1号图
		if(now=max){
			now=1;
		}else{
			now++;//如果不是最后一张，那么显示到下一张
		};

		timer=setTimerout(show,2000);//循环执行，这样图片才会无限轮播，设置为每2秒一次
	};

	//光这样还是无法执行的，因为show（）没有被启用，那么我们要在窗体加载完后直接启用show（）
	window.onload=function(){
		show();
	};

这里为什么要用匿名函数来调用show()，下面写完按钮的操作会进行解释。

首先要给按钮添加事件，那么因为只是练习，之前在a里面添加了onmouseover，
那么我们知道函数是可以传入参数的，我们为每个序号的按钮传入对应的标号，并且把

function show(){
		......
		...
		..

更改为：

function show(id){
		......
		...
		..

那么这样，就可以直接在函数里开始的时候，判定是否传入了参数，如果传入了参数，那么把传入参数赋值给now即可。
在其中添加：

//判断是否传递图片编号
			if(id){
				now=id;
				clearTimeout(timer);//清除原来的计时器
			};

这里为什么要清除计时器呢，因为，如果传入了参数，更改了顺序，之前的计时器是不会停止的，如果不做清除，那么，当你划过多次按钮的时候，会产生多个计时器，导致观感上轮播速度越来越快。

那么说一下为什么窗体加载运行的时候要用匿名函数来调用show
因为，如果怎么做的话，函数如果定义了形参，不传入参数的话
例如如果写了：

window.onload=show;

如果我们当时没有加标号判断的语句是OK的
但是如果加了判断，这样调用，会传入一个object进show，导致第一条判断语句，把object赋值给了now
所以窗体加载完后，图片不显示了，因为此时的now参数其实是个NaN，需要碰一个按钮后，才会正常。

最后完整的JS代码为：

var max=4;//总图片的数量
		var now=1;//当前显示的图片，默认为第一张
		var timer;
		function $(id){
			return document.getElementById(id);
		};
		function show(id){

			//判断是否传递图片编号
			if(id){
				now=id;
				clearTimeout(timer);//清除原来的计时器
			};

			for(var i=1;i<=max;i++){
				if(i==now){
					$('bg'+i).classList.remove('hidden');//显示当前图片
				}else{
					$('bg'+i).classList.add('hidden');//其他图片隐藏
				};
			};

			// 判断当前图片是否最后一张，如果是，则从头再来
			if(now==max){
				now=1;
			}else{
				now++;//设置显示下一张
			};

			timer=setTimeout(show,2000);//设置，每2秒显示一次
		};

		window.onload=function(){
			show()；
		};