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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
jQuery使用手册之 事件处理
Mar 24 Javascript
div移动 输入框不能输入的问题
Nov 19 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
javascript实现倒计时提示框
Mar 02 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python利用线程实现多任务
2020/09/18 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
实习心得体会
2014/01/02 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
春季防火方案
2014/05/10 职场文书
端午节演讲稿
2014/05/23 职场文书
python requests模块的使用示例
2021/04/07 Python
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
php去除数组中为0的元素的实例分析
2021/11/17 PHP
redis protocol通信协议及使用详解
2022/07/15 Redis