滴滴官网图片切换效果

演示Demo： https://brights2017.gitee.io/test1/test1-34/

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="flexible" content="initial-dpr=2" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>滴滴官网首页特效</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><style type="text/css">html,body {max-width: 750px;margin: 0 auto;}img {width: 100%;height: 100%;}</style></head><body><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(function() {var arryImages = ['001.jpg', '002.jpg', '003.jpg', '004.jpg', '005.jpg', '006.jpg', '007.jpg', '008.jpg', '009.jpg', '010.jpg', '011.jpg', '012.jpg', '013.jpg', '014.jpg', '015.jpg', '016.jpg', '017.jpg', '018.jpg', '019.jpg', '020.jpg', '021.jpg', '022.jpg', '023.jpg', '024.jpg', '025.jpg', '026.jpg', '027.jpg', '028.jpg', '029.jpg', '030.jpg', '031.jpg', '032.jpg', '033.jpg', '034.jpg', '035.jpg', '036.jpg', '037.jpg', '038.jpg', '039.jpg', '040.jpg', '041.jpg', '042.jpg', '043.jpg', '044.jpg', '045.jpg', '046.jpg', '047.jpg', '048.jpg', '049.jpg', '050.jpg', '051.jpg', '052.jpg', '053.jpg', '054.jpg', '055.jpg', '056.jpg', '057.jpg', '058.jpg', '059.jpg', '060.jpg', '061.jpg', '062.jpg', '063.jpg', '064.jpg', '065.jpg','066.jpg', '067.jpg', '068.jpg', '069.jpg', '070.jpg', '071.jpg', '072.jpg', '073.jpg', '074.jpg', '075.jpg', '076.jpg', '077.jpg', '078.jpg', '079.jpg', '080.jpg', '081.jpg', '082.jpg', '083.jpg', '084.jpg', '085.jpg', '086.jpg', '087.jpg', '088.jpg', '089.jpg', '090.jpg', '091.jpg', '092.jpg', '093.jpg', '094.jpg', '095.jpg', '096.jpg', '097.jpg', '098.jpg', '099.jpg', '100.jpg', '101.jpg', '102.jpg', '103.jpg', '104.jpg', '105.jpg', '106.jpg', '107.jpg', '108.jpg', '109.jpg', '110.jpg', '111.jpg', '112.jpg', '113.jpg', '114.jpg', '115.jpg', '116.jpg', '117.jpg', '118.jpg', '119.jpg', '120.jpg', '121.jpg', '122.jpg', '123.jpg', '124.jpg', '125.jpg', '126.jpg', '127.jpg', '128.jpg', '129.jpg', '130.jpg','131.jpg', '132.jpg', '133.jpg', '134.jpg', '135.jpg', '136.jpg', '137.jpg'];for(var k=0;k<arryImages.length;k++){var txt='<img src="img/'+ arryImages[k] +'" alt="图片丢失" />';$("body").append(txt);}$("img").hide();var i = -1;var t1 = setInterval(function() {i++;$("img").eq(i).show().siblings().hide();if(i == arryImages.length - 1) {i = -1;}}, 100);});</script></body></html>

滴滴官网图片切换效果相关推荐

Vue实现类似Spring官网图片滑动效果
先来看一下Spring官网首页的一个图片滑动显示效果可以看到, 随着鼠标的滑动,绿色图片和灰色图片可以无缝的在鼠标俩两边切换显示. 显示这样的效果其实很简单,利用固定定位保证两张图片在同一位置下, ...
腾讯首页js图片切换效果
很漂亮的腾讯网图片切换效果代码 < HTML > < HEAD > < TITLE > 腾讯软件 - 图片滑动效果,阿里西西整理收集. < / TITLE& ...
[原型设计]Axure制作首页轮播图片切换效果
1.新建Axure PR文件,取名"Axure制作首页轮播图片切换效果" 2.获取素材,进入36Kr官网主页,获取轮播图片素材. 获取素材 3.拖拽动态面板控件Dynamic Pa ...
精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
android如何自定义viewpager,Android自定义ViewPager实现个性化的图片切换效果
第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开始让ViewPager来做.时间长了,ViewPager的 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...

滴滴官网图片切换效果

滴滴官网图片切换效果相关推荐

最新文章

热门文章