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


Posted in Javascript onApril 15, 2015

特效介绍

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

演示图

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

使用方法

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

<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>

2、html代码放在</body>上面:

<div class="palmtrees"></div>
<div class="powerline"></div>
<div class="city"></div>
<div class="container">
 <div class="ad">
   <div id="ad_1" class="ad_1">
     <img class="slice_1" src="ads/ad1_slice01.jpg"/>
     <img class="slice_2" src="ads/ad1_slice02.jpg"/>
     <img class="slice_3" src="ads/ad1_slice03.jpg"/>
     <img class="slice_4" src="ads/ad1_slice04.jpg"/>
     <img class="slice_5" src="ads/ad1_slice05.jpg"/>
     <img class="slice_6" src="ads/ad1_slice06.jpg"/>
     <img class="slice_7" src="ads/ad1_slice07.jpg"/>
     <img class="slice_8" src="ads/ad1_slice08.jpg"/>
     <img class="slice_9" src="ads/ad1_slice09.jpg"/>
     <img class="slice_10" src="ads/ad1_slice10.jpg"/>
     <img class="slice_11" src="ads/ad1_slice11.jpg"/>
     <img class="slice_12" src="ads/ad1_slice12.jpg"/>
     <img class="slice_13" src="ads/ad1_slice13.jpg"/>
     <img class="slice_14" src="ads/ad1_slice14.jpg"/>
     <img class="slice_15" src="ads/ad1_slice15.jpg"/>
     <img class="slice_16" src="ads/ad1_slice16.jpg"/>
     <img class="slice_17" src="ads/ad1_slice17.jpg"/>
     <img class="slice_18" src="ads/ad1_slice18.jpg"/>
     <img class="slice_19" src="ads/ad1_slice19.jpg"/>
     <img class="slice_20" src="ads/ad1_slice20.jpg"/>
     <img class="slice_21" src="ads/ad1_slice21.jpg"/>
     <img class="slice_22" src="ads/ad1_slice22.jpg"/>
   </div>
   <div id="ad_2" class="ad_2">
     <img class="slice_1" src="ads/ad2_slice01.jpg"/>
     <img class="slice_2" src="ads/ad2_slice02.jpg"/>
     <img class="slice_3" src="ads/ad2_slice03.jpg"/>
     <img class="slice_4" src="ads/ad2_slice04.jpg"/>
     <img class="slice_5" src="ads/ad2_slice05.jpg"/>
     <img class="slice_6" src="ads/ad2_slice06.jpg"/>
     <img class="slice_7" src="ads/ad2_slice07.jpg"/>
     <img class="slice_8" src="ads/ad2_slice08.jpg"/>
     <img class="slice_9" src="ads/ad2_slice09.jpg"/>
     <img class="slice_10" src="ads/ad2_slice10.jpg"/>
     <img class="slice_11" src="ads/ad2_slice11.jpg"/>
     <img class="slice_12" src="ads/ad2_slice12.jpg"/>
     <img class="slice_13" src="ads/ad2_slice13.jpg"/>
     <img class="slice_14" src="ads/ad2_slice14.jpg"/>
     <img class="slice_15" src="ads/ad2_slice15.jpg"/>
     <img class="slice_16" src="ads/ad2_slice16.jpg"/>
     <img class="slice_17" src="ads/ad2_slice17.jpg"/>
     <img class="slice_18" src="ads/ad2_slice18.jpg"/>
     <img class="slice_19" src="ads/ad2_slice19.jpg"/>
     <img class="slice_20" src="ads/ad2_slice20.jpg"/>
     <img class="slice_21" src="ads/ad2_slice21.jpg"/>
     <img class="slice_22" src="ads/ad2_slice22.jpg"/>
   </div>
 </div>
</div>
<div class="billboard"></div>

注:由于切换的一张图片实际上是22张35*340的图片组成。所以,如果想更换切换的图片,必须把图片切成连续的35*340的图片集,然后按照顺序依次写成如下的格式:

<div id="ad_N" class="ad_N">
 <img class="slice_1" src="ads/图片1.jpg"/>
 <img class="slice_2" src="ads/图片2.jpg"/>
 <img class="slice_3" src="ads/图片3.jpg"/>
 <img class="slice_4" src="ads/图片4.jpg"/>
 <img class="slice_5" src="ads/图片5.jpg"/>
 <img class="slice_6" src="ads/图片6.jpg"/>
 <img class="slice_7" src="ads/图片7.jpg"/>
 <img class="slice_8" src="ads/图片8.jpg"/>
 <img class="slice_9" src="ads/图片9.jpg"/>
 <img class="slice_10" src="ads/图片10.jpg"/>
 <img class="slice_11" src="ads/图片11.jpg"/>
 <img class="slice_12" src="ads/图片12.jpg"/>
 <img class="slice_13" src="ads/图片13.jpg"/>
 <img class="slice_14" src="ads/图片14.jpg"/>
 <img class="slice_15" src="ads/图片15.jpg"/>
 <img class="slice_16" src="ads/图片16.jpg"/>
 <img class="slice_17" src="ads/图片17.jpg"/>
 <img class="slice_18" src="ads/图片18.jpg"/>
 <img class="slice_19" src="ads/图片19.jpg"/>
 <img class="slice_20" src="ads/图片20.jpg"/>
 <img class="slice_21" src="ads/图片21.jpg"/>
 <img class="slice_22" src="ads/图片22.jpg"/>
</div>

3、js代码放在文档最底端:

<script src="jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(function() {      
 $('#ad_1 > img').each(function(i,e){
 rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
 elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
   var other;
   if(elem1.parent().attr('id') == 'ad_1')
     other = $('#ad_2').children('img').eq(i);
   else
     other = $('#ad_1').children('img').eq(i);
     other.animate({'marginLeft':'0px','width':'35px'},speed,function(){
     var f = function() { rotate(other,speed,timeout,i) };
     setTimeout(f,timeout);
   });
});
}
});
</script>

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

Javascript 相关文章推荐
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
详细解密jsonp跨域请求
Apr 15 #Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 #Javascript
You might like
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
Python实现的爬虫功能代码
2017/06/24 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
中国好声音华少广告词
2014/03/17 职场文书
白血病捐款倡议书
2014/05/14 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers