jQuery实现仿路边灯箱广告图片轮播效果

特效介绍

本图片幻灯就像路边灯箱广告，路边大广告牌效果，发光二极管切换效果，并且会一直保持在页面最低端。

演示图

使用方法

1、在头区域引入style.css。

复制代码代码如下：link rel='样式表href=' CSS/style。CSS ' type=' text/CSS ' charset=' utf-8 '/

2、html代码放在/body上面：

div class=' palm trees '/div class=' power line '/div class=' city '/div class=' container ' div class=' ad ' div id=' ad _ 1 ' class=' ad _ 1 ' img class=' slice _ 1 ' src=' http : ads/ad1 _ slice e 01。jpg '/img class=' slice _ 2 ' src=' http : ads/ad1 _ slice 02。jpg '/img class=' slice _ 3 '/div div id=' ad _ 2 ' class=' ad _ 2 ' img class=' slice _ 1 ' src=' http : ads/ad2 _ slice 01。jpg '/img class=' slice _ 2 ' src=' http : ads/ad2 _ slice 02。jpg '/img class=' slice _ 3 ' src=' http : ads/ad2 _ slice 03。jpg '/img类=' slice _ 4 ' src='注：由于切换的一张图片实际上是22张35*340的图片组成。所以，如果想更换切换的图片，必须把图片切成连续的35*340的图片集，然后按照顺序依次写成如下的格式：

div id=' ad _ N ' class=' ad _ N ' img class=' slice _ 1 ' src=' http : ads/图片1 .jpg '/img class=' slice _ 2 ' src=' http : ads/图片2 .jpg '/img class=' slice _ 3 ' src=' http : ads/图片3 .jpg '/img class=' slice _ 4 ' src=' http : ads/图片4 .jpg '/img class=' slice _ 5 ' src=' http : ads/图片5 .jpg '/img class=' slice _ 6 ' src=' http : ads/图片6 .jpg '/img class=' slice _ 7 ' src=' http : ads/图片7 .jpg '/img class=' slice _ 8 ' src=' http : ads/图片8 .jpg '/img class=' slice _ 9 ' src=' http : ads/图片9 .jpg '/img class=' slice _ 10 ' src=' http : ads/图片10 .jpg '/img class=' slice _ 11 ' src=' http : ads/图片11 .jpg '/img class=' slice _ 12 ' src=' http : ads/图片12 .jpg '/img class=' slice _ 13 ' src=' http : ads/图片13 .jpg '/img class=' slice _ 14 ' src=' http : ads/图片14 .jpg '/img class=' slice _ 15 ' src=' http : ads/图片15 .jpg '/img class=' slice _ 16 ' src=' http : ads/图片16 .jpg '/img class=' slice _ 17 ' src=' http : ads/图片17 .jpg '/img class=' slice _ 18 ' src=' http : ads/图片18 .jpg '/img class=' slice _ 19 ' src=' http : ads/图片19 .jpg '/img class=' slice _ 20 ' src=' http : ads/图片20 .jpg '/img class=' slice _ 21 ' src=' http : ads/图片21 .jpg '/img class=' slice _ 22 ' src=' http : ads/图片22 .jpg '/div 3、js代码放在文档最底端：

脚本src=' http : jquery/jquery-1。8 .3 .量滴js ' type=' text/JavaScript '/script script $(function(){ $(' # ad _ 1 img ')).每个（函数(I，e){ rotate($(this)，500，3000，I)；});函数旋转(elem1，速度，超时，I){ ele m1。animate({ '左边距' : ' 18px '，' width':'0px'}，speed，function(){ var other；if(elem1.parent().attr(' id ')==' ad _ 1 ')other=$(' # ad _ 2 ').儿童(' img ').情商(一)；else other=$('#ad_1 ').儿童(' img ').情商(一)；其他。animate({ '左边距' : ' 0px '，' width':'35px'}，speed，function(){ var f=function(){ rotate(other，speed，timeout，I)}；setTimeout(f，超时);});});}});/script特效下载效果演示

以上所述就是本文的全部内容，希望大家能够喜欢。