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编写的第一人称射击游戏
Feb 25 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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 SQL之where语句生成器
2009/03/24 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
简单实现python画圆功能
2018/01/25 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
企业出纳岗位职责
2014/03/12 职场文书
一般纳税人申请报告
2015/05/18 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
mysql数据库如何转移到oracle
2022/12/24 MySQL