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 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
JS的get和set使用示例
Feb 20 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
详解webpack 入门与解析
Apr 09 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP函数超时处理方法
2016/02/14 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
调试php程序的简单步骤
2019/10/04 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
利用Python进行异常值分析实例代码
2017/12/07 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python实现上下文管理器的方法
2020/08/07 Python
小学生安全保证书
2014/02/01 职场文书
公司户外活动总结
2014/07/04 职场文书
英语课外活动总结
2014/08/27 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
党员剖析材料范文
2014/09/30 职场文书
个性与发展自我评价
2015/03/06 职场文书
2016新年年会主持词
2015/07/06 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript