轮播广告图jQuery改进版【原创】

web前端 杭州-小白 轮播广告图jQuery改进版【原创】

如图效果:

(ps:这个样类似的效果我前面也写过好多次了,不过每次写这个效果想法都不一样呢。嘎嘎)

其实这样的效果网上也是屡见不鲜了,这里是一个jquery版的,而且是一个朋友要求修改处理一个小地方,才临时写的。其实这个发上来的时候,准备改成面向对象的,但是后来想了下。我这效果就是给刚入门的童鞋借鉴的。就没有改成面向对象版本,就一个普通的版本。这个效果主要的地方是轮播到最后一个位置的时候。鼠标移开 开始自动轮播的时候做了下处理。【因为很多这样的效果都没有处理这个地方,就自动切到第一个了。这样感觉不好。】

这个效果有点类似 之前发的一个demo 但是这2个的写法和功能要求是不同的。。

好了不说废话咯。请看这个的 demo

我的这个demo的js那个地方有注释,大家不信可以把解释的那个地方下面一句删了。跟没删的对比2个是不同的效果的。这样的小处理我相信应该很多人都会的。嘎嘎。。

好了。下面在附带一个简单的带左右控制的jquery轮播效果。没有自动轮播。不过。如果把上面的demo效果和这个附件的效果结合的话。就可以做的更强大了。这里就不详细说了。。只为让新手更容易理解。。。如果不对请指正,谢谢!

附加 demo

9人评论了“轮播广告图jQuery改进版【原创】”

  1. 广州小黑

    如果去掉下面的百度统计代码,就无法正常播放图片。
    另外,在Chrome和IE6下的测试也不正常

    1. 杭州-小白

      这样子哇,我现在看看.马上修正,因为之前的是好的。

    2. 杭州-小白

      这个如果li没有设置高度。在谷歌里面是有这样子的情况发生的,谷歌主要是因为img图片的处理方式不同,我这里直接li的高度写死了。跟图片高度一样,才不会有问题呢。

  2. 广州小黑

    chrome 下 var olHeight=$ol.find(“li”).height(); 为0;
    IE6下经过测试是因为我在外面嵌套了DIV之css原因,与本代码无关.

    1. 杭州-小白

      奥奥,问题的原因有很多,可以发过来瞧瞧嘛。。。

      1. 广州小黑

        .main{
        width: 100%;
        text-align: center;
        background-image: url(images/main_bg.jpg);
        background-repeat: repeat-y;
        background-position: center center;

        }

        //嵌套一层后,IE下图片只出现前半边

        ……

评论区已关闭。