web前端 杭州-小白 轮播广告图jQuery改进版【原创】
如图效果:
(ps:这个样类似的效果我前面也写过好多次了,不过每次写这个效果想法都不一样呢。嘎嘎)
其实这样的效果网上也是屡见不鲜了,这里是一个jquery版的,而且是一个朋友要求修改处理一个小地方,才临时写的。其实这个发上来的时候
,准备改成面向对象的,但是后来想了下。我这效果就是给刚入门的童鞋借鉴的。就没有改成面向对象版本,就一个普通的版本。这个效果主要的地方是轮播到最后一个位置的时候。鼠标移开 开始自动轮播的时候做了下处理。【因为很多这样的效果都没有处理这个地方,就自动切到第一个了。这样感觉不好。】
这个效果有点类似 之前发的一个demo 但是这2个的写法和功能要求是不同的。。
好了不说废话咯。请看这个的 demo ,
我的这个demo的js那个地方有注释,大家不信可以把解释的那个地方下面一句删了。跟没删的对比2个是不同的效果的。这样的小处理我相信应该很多人都会的。嘎嘎。。
好了。下面在附带一个简单的带左右控制的jquery轮播效果。没有自动轮播。不过。如果把上面的demo效果和这个附件的效果结合的话。就可以做的更强大了。这里就不详细说了。。只为让新手更容易理解。。。如果不对请指正,谢谢!
附加 demo
如果去掉下面的百度统计代码,就无法正常播放图片。
另外,在Chrome和IE6下的测试也不正常
这样子哇,我现在看看.马上修正,因为之前的是好的。
这个如果li没有设置高度。在谷歌里面是有这样子的情况发生的,谷歌主要是因为img图片的处理方式不同,我这里直接li的高度写死了。跟图片高度一样,才不会有问题呢。
chrome 下 var olHeight=$ol.find(“li”).height(); 为0;
IE6下经过测试是因为我在外面嵌套了DIV之css原因,与本代码无关.
奥奥,问题的原因有很多,可以发过来瞧瞧嘛。。。
.main{
width: 100%;
text-align: center;
background-image: url(images/main_bg.jpg);
background-repeat: repeat-y;
background-position: center center;
}
//嵌套一层后,IE下图片只出现前半边
……
这个兼容性问题,可以自行寻找解决方案嘛
最好再写个渐变版本的哈
这个可以有,哈哈