鼠标划过广告自动切换JQUERY

$(function () {

var $imgrolls = $("#jnImageroll div a");

$imgrolls.css("opacity", "0.7");

var len = $imgrolls.length;

var index = 0;

var adTimer = null;

$imgrolls.mouseover(function () {

index = $imgrolls.index(this);

showImage(index);

}).eq(0).mouseover();

//滑入 停止动画，滑出开始动画

$('#jnImageroll').hover(function () {

if (adTimer) {

clearInterval(adTimer);

}

}, function () {

adTimer = setInterval(function () {

showImage(index);

index++;

if (index == len) {

index = 0;

}

}, 5000);

}).trigger("mouseleave");//进入页面开始自动触发hover方法

});

//显示不同幻灯片

function showImage(index) {

var $rollobj = $("#jnImageroll");

var $rolllist = $rollobj.find("div a");

var newhref = $rolllist.eq(index).attr("href");

$("#JS_imgWrap").attr("href", newhref).find("img").eq(index).stop(true, true).fadeIn().siblings().fadeOut();

$rolllist.removeClass("chos").css("opacity", "0.7").eq(index).addClass("chos").css("opacity", "1");

}

//HTML页面

<div id="jnImageroll">

<a href="#nogo" id="JS_imgWrap">

<img src="../images/ads/1.gif" alt="xxxxx"/>

<img src="../images/ads/2.gif" alt="xxxxx"/>

<img src="../images/ads/3.gif" alt="xxxxx"/>

<img src="../images/ads/4.gif" alt="xxxxx"/>

<img src="../images/ads/5.gif" alt="xxxxx"/>

</a>

<div>

<a href="###1"><em>相约情人节</em></a>

<a href="###2"><em>相约情人节</em></a>

<a href="###3"><em>相约情人节</em></a>

<a href="###4"><em>相约情人节</em></a>

<a href="###5" class="last"><em>相约情人节</em></a>

</div>

</div>

//css

#jnImageroll

{

float:left;

height:320px;

margin:0 11px 0 0;

overflow:hidden;

position:relative;

width:550px;

}

#jnImageroll img

{

position:absolute;

left:0;

top:0;

}

#jnImageroll div

{

bottom:0;

overflow:hidden;

position:absolute;

float:left;

}

#jnImageroll div a

{

background-color:#444444;

color:#ffffff;

display:inline-block;

float:left;

height:32px;

margin-right:1px;

overflow:hidden;

padding:5px 15px;

text-align:center;

width:79px;

}

#jnImageroll div a:hover

{

text-decoration:none;

}

#jnImageroll div a em

{

cursor:pointer;

display:block;

height:16px;

overflow:hidden;

width:79px;

}

#jnImageroll .last

{

margin:0;

width:80px;

}

#jnImageroll a.chos

{

background:#37a7d7;

color:#dddddd;

}