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