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 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
javascript中 try catch用法
Aug 16 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
全面了解js中的script标签
Jul 04 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
js性能优化技巧
2015/11/29 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Vuex的各个模块封装的实现
2020/06/05 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python下Fabric的简单部署方法
2015/07/14 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python同步windows和linux文件
2019/08/29 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
小学运动会报道稿
2015/07/22 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android