js示例代码
$(function () {
var oFocus = $('#focus'),
oRight = oFocus.find('.right'),
oLeft = oFocus.find('.left'),
aRLi = oRight.find('li'),
aLLi = oLeft.find('li'),
index = 0,
timer = null;
aRLi.click(function () {
index = $(this).index()
$(this).addClass('active').siblings().removeClass();
aLLi.eq(index).addClass('active').siblings().removeClass();
aLLi.eq(index).stop().animate({'opacity': 1}, 300).siblings().stop().animate({'opacity': 0}, 300);
stopFoucs();
})
oLeft.mouseenter(function () {
stopFoucs();
}).mouseleave(function () {
startFocus();
});
timer = setInterval(function () {
startFocus();
}, 5000);
function startFocus() {
index++;
index = index > aRLi.size() - 1 ? 0 : index;
aLLi.eq(index).addClass('active').siblings().removeClass();
aLLi.eq(index).stop().animate({'opacity': 1}, 300).siblings().stop().animate({'opacity': 0}, 300);
aRLi.eq(index).addClass('active').siblings().removeClass();
}
function stopFoucs() {
clearInterval(timer);
}
})
html部分
<div class="focus" id="focus">
<div class="left">
<ul>
<li class="active" style="opacity:1; filter:alpha(opacity=100);">
<p>优惠券</p>
<p>......</p>
<img src="images/marketing/yhq3.png"/></li>
<li>
<p>积分兑换</p>
<p></p>
<img src="images/marketing/jfdh3.png"/>
</li>
<li>
<p>储值管理</p>
<p></p>
<img src="images/marketing/cz3.png"/>
</li>
<li>
<p>电子会员</p>
<p></p>
<img src="images/marketing/hy3.png"/></li>
<li>
<p>卡券管理</p>
<p></p>
<img src="images/marketing/kq3.png"/></li>
<li>
<p>活动设置</p>
<p></p>
<img src="images/marketing/hd3.png"/></li>
</ul>
</div>
<div class="right">
<ul>
<li class="active"><i class="i1"></i>优惠券</li>
<li><i class="i2"></i>积分兑换</li>
<li><i class="i3"></i>储值管理</li>
<li><i class="i4"></i>电子会员</li>
<li><i class="i5"></i>卡券管理</li>
<li><i class="i6"></i>活动设置</li>
</ul>
</div>
</div>