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);
}

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

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