jquery焦点图

  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>

 

分类:js图片特效 下载地址
阅读(135)喜欢(0)不喜欢(0)3.21KBjquery 浏览器 点击下载