用计时器做自动轮播

开发工具与关键技术：DW与 HTML、jQuery
撰写时间：2019/03/28

在此文档中，我使用了少量的javascript代码，编写了一个自动轮播，自动轮播最主要的还是通过计时器来完成自动轮播哦，下面来看HTML代码吧！

我的作品集

<div class="divXT1" style="text-align: center;margin: 0 auto;">
			<img src="img/01.png" style="background-position: center;
			background-size: cover;
			width: 50%;
			height: auto;margin: 0 auto;">
			<p style="margin: 40px auto;text-align: center;color: aliceblue;font-size: 30px;">1/22</p>
		</div>

………………………………………………………………….中间还有20个差不多的div………………………………………………………….

	<div class="divXT22" style="text-align: center;margin: 0 auto;display: none;">
		<img src="img/22.png" style="background-position: center;
		background-size: cover;
		width: 50%;
		height: auto;margin: 0 auto;">
		<p style="margin: 40px auto;text-align: center;color: aliceblue;font-size: 30px;">22/22</p>
	</div>
</div>

HTML部门代码就是这样了
在写<script>标签里面的代码之前，先引用jQuery插件！

<script>
	在一开始的时候我定义了3个变量第一个onlin是页数，第二个hovetime是用来判断鼠标是否停留在图片上，第三个autotime就是用来装计时器的一个变量。


	var onlin = 1;
  var hovetime = 0;
  var autotime;

//页面加载事件（在页面加载事件中，我将一个计时器赋值给autotime,这个计时器调用下方autogo()方法，在3秒后执行）

$(function(){
			autotime=setTimeout("autogo()",3000);
		});

	上一页与下一页的方法中我使用了第一个定义的变量onlin，我通过.divXT与onlin拼接组成我上方HTML代码中的装图片的div中的class值，来进行隐藏或显示图片。
	//上一页方法
	function shang(){
		if(onlin == 1){
			alert("这已经是第一页啦！");
		}else{
			$(".divXT"+ onlin +"").fadeOut("6000");
			$(".divXT"+ parseInt(onlin-1) +"").fadeIn("6000");
			onlin -= 1;
		}
	}
	//下一页方法
	function xia(){
		if(onlin == 22){
			$(".divXT"+ onlin +"").fadeOut("6000");
			onlin = 0;
		}
//			console.log($(".divXT"+ parseInt(onlin+1) +""));			
			$(".divXT"+ onlin +"").fadeOut("6000");
			$(".divXT"+ parseInt(onlin+1) +"").fadeIn("6000");
			onlin += 1;
		}
	
	//当鼠标停留在轮播图上就清除autotime计时器使其不再自动轮播
	$(".W80").mouseover(function(){
		clearTimeout(autotime);
		hovetime += 1;
	});



	//当鼠标移出轮播图时就将一个新的计时器赋值给autotime使其进行轮播
	$(".W80").mouseout(function(){
		hovetime = 0;
		autotime=setTimeout("autogo()",3000);
	});
	
	//自动轮播方法（在这里呢我就使用了第二个定义的变量hovetime，通过它判断鼠标是否在图片上）
	function autogo()
	{
		if(hovetime < 1)
		{
			xia();
			autotime=setTimeout("autogo()",3000);
		}
	}

由于效果图是偏黑色的并且是静态的，难以达到效果展示，为此我做了一个gif动态图，你可以在此文献发布的网址上看到动态的效果图