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对象、属性、事件手册集合方便查询
Jul 04 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
Vue响应式原理详解
Apr 18 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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中使用curl入门教程
2015/07/02 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
php输出图像的方法实例分析
2017/02/16 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python translator使用实例
2008/09/06 Python
分析python服务器拒绝服务攻击代码
2014/01/16 Python
解决Python传递中文参数的问题
2015/08/04 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
电子商务自荐书范文
2014/01/04 职场文书
高三语文教学反思
2014/01/15 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
考试没考好检讨书
2015/05/06 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP