jquery焦点图
jquery焦点图展示，效果如下
源代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style>
.mt_right
{
height: 280px;
width: 634px;
float: left;
}
.mtr_left
{
height: 280px;
width: 116px;
margin-right: 5px;
float: left;
overflow: hidden;
}
.mtrl_img
{
height: 87px;
width: 116px;
margin-bottom: 10px;
}
.mtr_right
{
margin:0;
padding:0;
height: 280px;
width: 513px;
float: left;
overflow:hidden;
}
.mtr_img
{
height: 280px;
width: 513px;
float: left;
}
.mtr_left .alpha{opacity:.5;filter:alpha(opacity=50);}/*透明样式*/
</style>
<script type="text/javascript" src="/js/jquery.js"></script>
<script>
window.onload=function () {
var imgs = $('div.mtr_left div'), imgb = $('div.mtr_right'), h = imgb.height(), total = imgs.size(), nowIndex = 0
, timer, delay = 3000, animateDelay = 500;
function animate(isInit) {
if (isInit !== true) {
nowIndex++;
if (nowIndex >= total) nowIndex = 0;
}
imgs.removeClass('alpha').eq(nowIndex).addClass('alpha');
imgb.clearQueue().animate({ 'scrollTop': nowIndex * h }, animateDelay);
}
function Timer(isClear) { if (isClear) clearInterval(timer); else timer = setInterval(animate, delay); }
imgs.mouseenter(function () { Timer(true); nowIndex = $(this).index(); animate(true); }).mouseleave(function () { Timer(); });
imgb.mouseenter(function () { Timer(true); }).mouseleave(function () { Timer(); });
animate(true);
Timer();
};
</script></head><body>
<div class="mt_right">
<div class="mtr_left">
<div class="mtrl_img">
<img id="img1" style="height: 100%; width: 100%;" src="/imgblog/20090710/2009710111824235.png" alt="1"/>
</div>
<div class="mtrl_img">
<img id="img2" style="height: 100%; width: 100%;" src="/imgblog/20090710/2009710115035313.jpg" alt="2" />
</div>
<div class="mtrl_img">
<img id="img3" style="height: 100%; width: 100%;" src="/imgblog/20090710/2009710114857860.jpg" alt="3" />
</div>
</div>
<div class="mtr_right">
<div class="mtr_img">
<a href=""><img style="height: 100%; width: 100%;" src="/imgblog/20090710/2009710111824235.png" alt="" title="1.jpg" /></a>
<a href=""><img style="height: 100%; width: 100%;" src="/imgblog/20090710/2009710115035313.jpg" alt="" title="2.jpg" /></a>
<a href=""><img style="height: 100%; width: 100%;" src="/imgblog/20090710/2009710114857860.jpg" alt="" title="3.jpg" /></a>
</div>
</div>
</div></body></html>