图片轮换效果

作者:周星 发布:2017-10-07

    近些年各种网站都在主页上放置一个图片轮换效果,看上去非常美观非常炫,以前这种效果通常是用flash制作,现在有了js,我们可以很方便的模仿这个效果,下面我们做一个带索引的、更高端的图片轮换效果。

这个效果是把鼠标放到数字“1,2,3,4,5”时,会对应显示第“1,2,3,4,5”张图片
对应的Html代码为:
<div class="ad">
    <ul class="slider">
        <li><img src="images\ads\1.gif" alt="" /></li>
        <li><img src="images\ads\2.gif" alt="" /></li>
        <li><img src="images\ads\3.gif" alt="" /></li>
        <li><img src="images\ads\4.gif" alt="" /></li>
        <li><img src="images\ads\5.gif" alt="" /></li>
    </ul>
    <ul class="num">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div><!-- ad-->
    这个效果的原理是:取得产品广告的高(宽)度,然后利用setInterval函数,每隔一段时间调用animate函数。当鼠标滑到数字索引时,运动的高(宽)度 x 索引。整个效果的关键在于索引的使用。
当鼠标移动到广告上时,停止自动动画(clearInterval),鼠标离开时触发(setInterval),默认情况下利用trigger("mouseleave")达到默认的动画。

首先获取的是哪张图片被触发了
index = $(".num li").index(this);

然后把index传入动画函数中
showImg(index);

还有获得总的li的个数,当index等于总数时,图片又回到第一张
var len = $(".num li").length;

总体的jquery代码为:
var len = $(".num > li").length;
var index = 0; /*默认索引*/
var adTimer;
$(".num li").mouseover(function() {
    index = $(".num li").index(this);
    showImg(index);
}).eq(0).mouseover();
//滑入停止动画,滑出开始动画
$(".ad").hover(function() {
    clearInterval(adTimer);
}, function() {
    adTimer = setInterval(function(){
    showImg(index);
    index++;
    if(index == len){index = 0;}
    }, 3000);
}).trigger('mouseleave');
    function showImg(index){
        var adHeight = $(".ad").height();
        $(".slider").stop(true, false).animate({top: -adHeight * index}, 1000);
        $(".num li").removeClass('on').eq(index).addClass('on');
    }
})

一个需要注意的CSS细节是
最外面的框必须要有position:relative;


支付宝扫码赞助博主


评论(3)

周星

周星第1楼

图挂了,每次部署完图都会挂掉,需要排查

2014-03-08 12:36:13

周星

周星第2楼

这个问题终于解决了,感谢格格的指点

2014-03-09 13:59:59

周星

周星第3楼

先作为线上测试

2014-04-22 11:27:01