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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
js清理Word格式示例代码
Feb 13 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
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设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
股份合作协议书
2014/04/12 职场文书
社保转移委托书范本
2014/10/08 职场文书
解除处分决定书
2015/06/25 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript