JS实例之图片轮播,实现图片播放效果

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 *{margin:0px auto;padding:0px;}
 6 #wai{width:500px;height:200px;}
 7 </style>
 8 </head>
 9
10 <body>
11 <div id="wai">
12     <img src="file:///D|/我的文档/图片收藏/6cd51674jw1e1q9gwhvwjj.jpg" class="img" width="500" height="200"/>
13     <img src="file:///D|/我的文档/图片收藏/6cd51674jw1e3cddnbahhj.jpg" class="img" width="500" height="200" style="display:none";/>
14 </div>
15 </body>
16 <script type="text/javascript">
17 var suoyin=0;
18 var img=document.getElementsByClassName("img");
19 huan();
20 function huan(){
21     xianshi();
22     if(suoyin>=img.length-1){
23         suoyin=0;
24     }else{
25         suoyin++;
26     }
27     window.setTimeout("huan()",2000);
28 }
29
30 function xianshi(){
31     for(var i=0;i<img.length;i++){
32         img[i].style.display="none";
33     }
34     img[suoyin].style.display="block";
35 }
36
37 </script>
38 </html>
时间: 2024-12-16 17:33:51

JS实例之图片轮播,实现图片播放效果的相关文章

【图片轮播特效插件】--- 效果实现

忙了一段时间,终于能好好静下来写这篇博文了,那废话就不多说,直接开始吧. 按照上一篇对于jQuery插件的学习掌握,首先就是搭好一个合适的框架,定好插件中需要用到的属性,给其他使用者留出使用接口: 1 (function($){ 2 //各种默认的属性参数 3 var defaults = { 4 width: 400, 5 height: 200, 6 direction:'left', 7 imgs:[{ 8 src:'p0.jpg', 9 link:'http://www.cnblogs.

Flexslider图片轮播文字图片相结合滑动切换效果

Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. 在线演示一 在线演示二 在线演示三 在线演示四 源码下载 Fle

图片轮播(定时播放)

$(function(){ var listLen = $(".pic li").length, i=0,setInter,speen = 5000; $(".btn li:last").css({"margin":"0px 0px 0px 0px"}); $(".btn li:first").addClass("on"); $(".pic li:first").sh

Jquery实现图片轮播功能

周末闲暇时,参照http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html实现了个jquery图片轮播特效 界面效果: css实现: *{     margin: 0; } div{     position:relative;     width:600px;     height:400px;     border:1px #000 solid;     overflow:hidden;     margin:aut

带层次感的图片轮播

原文摘自我的前端博客,欢迎大家来访问 http://hacke2.github.io/ 起因 豪哥的JS练习又一波来袭~今天又写了个百度爱玩的东西,暂且叫他带层次感的图片轮播吧 图片可以很有层次感的切换 思路 主要思路有二 图片大小.位置的计算 我的思路是这样的: 因为首尾切换,我想到的就是自己封装一个循环队列 //封装一个循环队列 function CircularQueue(arr) { this.arr = arr || []; } //移除前一个,追加到最后 CircularQueue.

MUI组件二:复选框、对话框、图片轮播、图标和输入框

1.checkbox(复选框) checkbox常用于多选的情况,比如批量删除.添加群聊等: DOM结构 <div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Item 1" type="checkbox" checked> </di

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

图片轮播_支持显示网络图片及下载图片至SD后再显示

现在的移动应用, 很常见的一个交互效果就是在首页顶部添加图片轮播的控件, 焦点图可以放入广告, 也可以放入文章的内容图片, 它们不断自动切换, 点击焦点图即跳至对应的界面. 交互效果很棒. 做图片轮播的效果, 方法并不少. 本文使用了常见的viewpager 去实现. 支持显示网络图片下载在缓存显示, 如果有SD卡则默认将图片下载至SD卡中再显示本地的图片. 其实网上这类代码已经很多,  应该也有很多写得比我好. 今天有点时间, 就做了个来练手, 顺便写下自己第一篇原创文章. 敲代码之前也参考了

图片轮播问题

1.图片轮播效果实现      主要实现思路是:根据图片总数及宽高设置好ScrollView的大小,每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为,并加入定时器,实现自动轮播. 如图所示,设置好ScrollView及PageControl,ScrollView的contentSize根据图片数量确定,注意启用pagingEnabled这个属性,确保整页移动,同样pageControl也是根据图片数量来确定,每一页代表一张图片. contentOffset更新页码. 定时器

【转】 iOS开发UI篇—UIScrollView控件实现图片轮播

原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (w