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

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

如图效果:

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

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

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

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

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

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

附加 demo

本文固定链接: http://www.xiaobai8.com/Blog/541.html | web前端,杭州小白的个人博客,小白的个人博客

该日志由 杭州-小白 于2012年07月06日发表在 jQuery 分类下,
原创文章转载请注明: 轮播广告图jQuery改进版【原创】 | web前端,杭州小白的个人博客,小白的个人博客
关键字: , ,

轮播广告图jQuery改进版【原创】:目前有9 条留言

  1. 地板
    广州小黑:

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

    2012-09-30 19:29
    • 杭州-小白:

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

      2012-10-03 10:33
    • 杭州-小白:

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

      2012-10-03 11:00
  2. 板凳
    广州小黑:

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

    2012-09-30 20:55
    • 杭州-小白:

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

      2012-10-03 10:33
      • 广州小黑:

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

        }

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

        ……

        2012-10-03 20:19
        • 杭州-小白:

          这个兼容性问题,可以自行寻找解决方案嘛

          2012-10-08 10:50
  3. 沙发
    广州小黑:

    最好再写个渐变版本的哈

    2012-10-03 22:58
    • 杭州-小白:

      这个可以有,哈哈

      2012-10-08 10:50