jquery实现LED广告牌旋转系统图片切换效果代码分享


Posted in Javascript onAugust 26, 2015

本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考。具体如下:
js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果。
LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈!
运行效果图:

-------------------查看效果 下载源码-------------------

jquery实现LED广告牌旋转系统图片切换效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery实现LED广告牌旋转系统图片切换效果代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现LED广告牌旋转系统图片切换效果</title>
<link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css" />
</head>
<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>
  <script src="js/jquery-1.3.2.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>
</body>
</html>

以上就是为大家分享的jquery实现LED广告牌旋转系统图片切换效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 #Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 #Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 #Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 #Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 #Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 #Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 #Javascript
You might like
web方式ftp
2006/10/09 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
提高php编程效率技巧
2015/08/13 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
建筑安全责任书范本
2014/07/24 职场文书
服务行业演讲稿
2014/09/02 职场文书
解除劳动合同协议书
2014/09/17 职场文书
庆七一主持词
2015/06/29 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫