HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。

实现的效果：

5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走鼠标继续播放。

实现步骤：

1.HTML部分

加入一个div，用来放置图片资源和数字编号。

采用ul-li布局，代码如下：

<div id="ad">
	<ul id="ad_img">
    	<li><img src="src/ad1.jpg" width="960" height="600" /></li>
        <li><img src="src/ad2.jpg" width="960" height="600" /></li>
        <li><img src="src/ad3.jpg" width="960" height="600" /></li>
        <li><img src="src/ad4.jpg" width="960" height="600" /></li>
        <li><img src="src/ad5.jpg" width="960" height="600" /></li>
    </ul>
    
    <ul id="ad_num">
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

五张图片，五个数字，简单易懂。

2.CSS部分

CSS主要用来处理一下布局的细节，以及写一些类标签方便在js文件中调用。

/*整个广告div的css*/
#ad{
	width:960px;
	height:600px;
	position:absolute;
}
/*取消小圆点*/
#ad li{
	list-style:none;
}

#ad_img li{
	display:none;
}

/*角落显示数字的ul*/
#ad_num{
	overflow:hidden;
	position:absolute;
	bottom:10px;
	right:10px;
	color:#FFF;
}
/*数字的浮动*/
#ad_num li{
	border:#FFF solid 1px;
	float:left;
	margin:0px 5px;
	padding:3px 10px;
}

经过上面的CSS样式的控制，页面显示出来的布局已经达到。

还有两个类标签numsover和numsout，分别处理鼠标放在和移开<li/>的样式：

.numsover{
	background-color:#CF3;
	color:#F00;
}

.numsout{}

3.JQuery部分：

jq文件就要控制鼠标时间和自动播放的事件了：

写一个方法用来监听鼠标事件和设置循环时间：

思路如下：

1.获取图片和角标的数组；

2.首先让第一张图片显示出来，并且对应的数字加上CSS效果；

3.监听鼠标事件mouseover()和mouseout()，

在mouseover()中写一个匿名函数，用来控制鼠标移动到数字的li标签上去以后：

（1）把数字加上样式表

（2）把当前的图片隐藏，显示出来鼠标对应的数字索引的图片

在mouseout()中要记得写上把自动轮换的标志设为true；

4.设置轮转事件setInterval()，两个参数分别为

（1）一个匿名函数，用来控制在限定时间后紧接着变换图片和数字的效果

（2）超时时间，单位毫秒。

function changeImg(){
	/*获取图片和索引的数组*/
	var $imgs=$("#ad_img li");
	var $nums=$("#ad_num li");
	
	var isStop=false;
	var index=0;
	
	$nums.eq(index).addClass("numsover");
	$nums.eq(index).siblings().removeClass("numsover");
	$imgs.eq(index).show();
	
	/*鼠标悬停在数字上的事件*/
	$nums.mouseover(function(){
		isStop=true;
		/*先把数字的背景改了*/
		$(this).addClass("numsover").siblings().removeClass("numsover");
		
		/*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作*/
		index=$nums.index(this);
		$imgs.eq(index).show("slow");
		$imgs.eq(index).siblings().hide("slow");
	}).mouseout(function(){isStop=false});
	/*设置循环*/
	setInterval(function(){
		if(isStop) return;
		if(index>=5) index=-1;
		index++;
		
		$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
		
		$imgs.eq(index).show("slow");
		$imgs.eq(index).siblings().hide("slow");
		
		},2000);
}

最后在网页加载完调用这个函数，开始执行效果：

$(document).ready(function(e) {
    changeImg();
});