jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701

1、效果及功能说明
仿麦包包商城网站首页全屏图片上下滑动伸缩图片广告代码，设置固定时间图片滑动伸缩的图片广告代码

2、实现原理

先获得显示div的宽度高度自由在将两个图片放到div里显示每次只显示一张图片隐藏时间为1秒下一张显示时间为1秒全部显示和隐藏的动画用时2.5秒内完成显示的div会跟着图片的大小来调节div的高度，所以高度是自由的没有显示出来的图片是处于隐藏的一个状态

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/6413/6ee39746-c204-3f6e-96ec-fdeb1047b55c.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}.advpic{width:960px;margin:0 auto;}</style>

<div class="advpic" style="display:block;" id="js_ads_banner_top"> <a href="http://www.17sucai.com/" target="_blank"><img alt="图片滑动广告" src="data:images/banner_s.jpg" width="960" height="70" /></a></div>

<div class="advpic" style="display:none;" id="js_ads_banner_top_slide">  <a href="http://www.17sucai.com/" target="_blank"><img alt="图片滑动广告" src="data:images/banner_b.jpg" width="960" height="400" /></a> </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function(){  //ready函数仅能用于当前文档，因此无需选择器  if($("#js_ads_banner_top_slide").length){   //调用第二个id的长度      var $slidebannertop = $("#js_ads_banner_top_slide"),$bannertop = $("#js_ads_banner_top");       //实现第二个图片替换掉第一个图片     setTimeout(function(){            $bannertop.slideUp(1000);         //设置第一张图片通过滑动方式隐藏时间为1秒            $slidebannertop.slideDown(1000);          //设置第一张图片通过滑动方式显示时间为1秒        },2500);      //整个图片的消失或者显示用时2.5秒       setTimeout(function(){            $slidebannertop.slideUp(1000,function(){          //设置第二张图片通过滑动方式隐藏时间为1秒                $bannertop.slideDown(1000);               //设置第二张图片通过滑动方式显示时间为1秒            });       },8500);      //整个图片的消失或者显示用时8.5秒   }});</script></body></html>

jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701相关推荐

手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
h5仿android 京东三级联动,jquery仿京东商城三级联动代码插件
2019-3-1更新:location.js文件里第三级县之前使用京东旧域名d.360buy.com的jsonp数据,域名做了跳转首页所以第三加载不出来.现在已经更新为d.jd.com,正常加载.不过 ...
楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
基于Java实现图片滑动验证(包含前端代码)
前言 1.下面是一个效果展示: 2.先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同:内容相同我就不多说 ...
jQuery 仿问卷星自定义修改问卷调查表单代码
jquery 仿问卷星的调查问卷表单编辑代码 1.可以上下移动调整次序.可以编辑删除,如图 2.可新添加问卷信息,包括多选,单选,填空,矩阵等类型的表单源码下载地址:https://download ...
15款商城网站常用的图片放大镜特效
jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery图片放大镜插件鼠标悬停图片放大镜头显示代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东 ...
JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片...
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="sli ...
php图片滑动代码,jQuery如何实现图片滑动效果
图片滑动在很多地方都需要,本文主要介绍了jQuery实现图片滑动效果的实例,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 思路:当鼠标进入元素时,触发hover中的第一个函数,离开 ...

jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701

jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701相关推荐

最新文章

热门文章