jQuery实现仿路边灯箱广告图片轮播效果


Posted in Javascript onApril 15, 2015

特效介绍

本图片幻灯就像路边灯箱广告,路边大广告牌效果,LED切换效果,并且会一直保持在页面最低端。

演示图

jQuery实现仿路边灯箱广告图片轮播效果

使用方法

1、在head区域引入style.css。

<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>

2、html代码放在</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>

注:由于切换的一张图片实际上是22张35*340的图片组成。所以,如果想更换切换的图片,必须把图片切成连续的35*340的图片集,然后按照顺序依次写成如下的格式:

<div id="ad_N" class="ad_N">
 <img class="slice_1" src="ads/图片1.jpg"/>
 <img class="slice_2" src="ads/图片2.jpg"/>
 <img class="slice_3" src="ads/图片3.jpg"/>
 <img class="slice_4" src="ads/图片4.jpg"/>
 <img class="slice_5" src="ads/图片5.jpg"/>
 <img class="slice_6" src="ads/图片6.jpg"/>
 <img class="slice_7" src="ads/图片7.jpg"/>
 <img class="slice_8" src="ads/图片8.jpg"/>
 <img class="slice_9" src="ads/图片9.jpg"/>
 <img class="slice_10" src="ads/图片10.jpg"/>
 <img class="slice_11" src="ads/图片11.jpg"/>
 <img class="slice_12" src="ads/图片12.jpg"/>
 <img class="slice_13" src="ads/图片13.jpg"/>
 <img class="slice_14" src="ads/图片14.jpg"/>
 <img class="slice_15" src="ads/图片15.jpg"/>
 <img class="slice_16" src="ads/图片16.jpg"/>
 <img class="slice_17" src="ads/图片17.jpg"/>
 <img class="slice_18" src="ads/图片18.jpg"/>
 <img class="slice_19" src="ads/图片19.jpg"/>
 <img class="slice_20" src="ads/图片20.jpg"/>
 <img class="slice_21" src="ads/图片21.jpg"/>
 <img class="slice_22" src="ads/图片22.jpg"/>
</div>

3、js代码放在文档最底端:

<script src="jquery/jquery-1.8.3.min.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>

以上所述就是本文的全部内容,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
script标签属性用type还是language
Jan 21 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
js实现动态显示时间效果
Mar 06 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
详细解密jsonp跨域请求
Apr 15 #Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 #Javascript
You might like
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
XENON基于JSON变种
2010/07/27 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python 画条形图(柱状图)实例
2020/04/24 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
关于赌博的检讨书
2014/01/24 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
协会周年庆活动方案
2014/08/26 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
县委务虚会发言材料
2014/10/20 职场文书
先进典型发言材料
2014/12/30 职场文书
公司表扬稿范文
2015/05/05 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
springboot读取resources下文件的方式详解
2022/06/21 Java/Android