DW —— 静态图片的交替更换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>静态页面</title><script>var picsArr = new Array();picsArr[0] = "images/01.jpg";picsArr[1] = "images/02.jpg";picsArr[2] = "images/03.jpg";picsArr[3] = "images/04.jpg";picsArr[4] = "images/05.jpg";var timer, index = 0;window.onload = showPic;function showPic(){document.getElementById("pic").src = picsArr[index];if(index<(picsArr.length-1))index++;elseindex = (index+1) % picsArr.length;timer = setTimeout("showPic()",2000)}function showPerpic(){if(index>0)index--;elseindex = 4;document.getElementById("pic").src = picsArr[index];timer = setTimeout("showPerpic()",2000);}function showNext(){clearTimeout(timer);showPic();}function showPre(){clearTimeout(timer);showPrepic();}</script><style type="text/css">*{margin: 0;padding: 0;}ul,li{list-style: none;}img{border: 0;}.warpper {width: 800px;margin: 0 auto;padding-bottom: 50px;}#focus{width: 800px;height: 280px;overflow: hidden;position: relative;}#focus ul{height: 380px;position: absolute;}#focus ul li{float: left;width: 800px;height: 280px;overflow: hidden;position: relative;background: #000;}#focus ul li div{position: absolute;overflow: hidden;}#focus .preBtn{width: 45px;height: 100px;left: 0;top: 90px;background: url(images/spirte.png)no-repeat 0 0;background-color: #000;cursor: pointer;opacity: 0.4;filter:alpha(opacity = 40);}#focus .nextBtn{width: 45px;height: 100px;right: 0px;top: 90px;background: url(images/spirte.png)no-repeat right top;background-color: #000;cursor: pointer;opacity: 0.4;filter: alpha(opacity = 40);}
</style>
</head><body>
<div class="warpper"><div id="focus"><ul><li><a href="#" target="_blank"><img src="data:images/01.jpg" alt="" id="pic"/></a><div class="preBtn" onClick="showPre()"></div><div class="nextBtn" onClick="showNext()"></div></li></ul></div>
</div>
</body>
</html>

DW —— 静态图片的交替更换相关推荐

android 静态图片gif视频轮流播放
最近做了一个关于广告视频的项目,双屏异显,并且在数千台广告屏上运行这个APP,而且要同步,核心的功能是图片gif视频轮流播放的功能,在此做个总结: 1.静态图片gif视频轮播: 我用的都是原生的插件, ...
HTML5期末大作业：鲜花超市网站设计——鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:鲜花超市网站设计--鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作作品介绍 1.网页作品简介 ...
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
c语言静态图片做成动态效果,如何使静态图片做成动态效果？怎么让静态图片动起来...
原标题:如何使静态图片做成动态效果?怎么让静态图片动起来如果用手机拍了一组张片,想要将这些静态图片合成动态的该怎么操作呢?将多张图片合成一张gif动图的方式,既能够占据更少的内存,还能够提升图片的趣 ...
Premiere Pro CC2017教程(二) 修改导入静态图片的时间
导入静态图片修改时间: 导入静态图片默认是5秒,可以在首选项中设置.
介绍一个好用的静态图片合成为 gif 动画的在线网站
本人编写技术文章时,经常需要把屏幕操作步骤制作成 gif 动画,这样让读者看起来一目了然.网上很多 gif 制作软件都需要购买会员,最近找到了这个好用的 gif 图片制作的在线网站,完全免费:http ...
vue 直接访问静态图片_vue中本地静态图片路径写法
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧这里写图片描述需求:如何components里面的index.vue怎样能把assets里面的 ...
Vue-在data中引入静态图片路径
在data中引入静态图片路径首先tempate中内容都一样: <template slot="pic" slot-scope="{ row }"> ...
vue本地静态图片的路径问题解决方案
vue本地静态图片的路径问题解决方案参考文章: (1)vue本地静态图片的路径问题解决方案 (2)https://www.cnblogs.com/ranyonsue/p/11608760.html ...

DW —— 静态图片的交替更换

DW —— 静态图片的交替更换相关推荐

最新文章

热门文章