思路：将想要播放的图片放入集合中，设置一个div，将图片依次从集合中定时取出放到div中展示；设置一个变量，通过变量与集合元素索引联系起来，点击改变时，获取当前图片的索引以切换图片

整体代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>图片轮播</title>
  6. <style>
  7. *{margin:0px auto; padding:0px;}
  8. #kuangjia
  9. {width:600px; height:450px; border:#F00 solid 3px; background-size:cover; background-repeat:no-repeat;}
  10. .t1
  11. {width:40px; height:40px; background-repeat:no-repeat; background-size:contain; cursor:pointer;}
  12. #t2
  13. {float:left; margin:205px 0px 0px 20px; background-image:url(zuo.png);}
  14. #t3
  15. {float:right; margin:205px 20px 0px 0px; background-image:url(you.png);}
  16. </style>
  17. </head>
  18. <body>
  19. <div id="kuangjia"><!--大div作为框架-->
  20.     <div class="t1" id="t2" onclick="(dd(-1))"></div>
  21.     <div class="t1" id="t3" onclick="(dd(1))"></div>
  22. </div>
  23. </body>
  24. </html>
  25. <script>
  26. var jh=new Array();
  27. jh[]="url(1-1.jpg)";
  28. jh[]="url(2-2.jpg)";
  29. jh[]="url(3-3.jpg)";
  30. jh[]="url(4-4.jpg)";
  31. jh[]="url(5-5.jpg)";
  32.  
  33. var kj=document.getElementById("kuangjia");<!--获取框架div的标签，在下面进行更改背景-->
  34. var x=-;<!--定义变量x，建立索引-->
  35. var l=jh.length;<!--获取集合中元素个数-->
  36. function lb()
  37. {
  38.     x++;
  39.     if (x==l)
  40.     {
  41.         x=;
  42.     }
  43.     kj.style.backgroundImage=jh[x];
  44.     window.setTimeout("lb()",);<!--2s后再次播放集合中的图片-->
  45. }
  46. window.setTimeout("lb()",);<!--开始进行轮播-->
  47.  
  48. function dd(m)
  49. {
  50.     x=x+m;
  51.     if(x==l)
  52.     {x=;}
  53.     else if(x==-)
  54.     {x=l;}
  55.     kj.style.backgroundImage=jh[x];
  56. }
  57. </script>

图片轮播全部代码

下面为步骤及分步代码：

1、设置大div框架及向左向右按钮

  1. <title>图片轮播</title>
  2. <style>
  3. *{margin:0px auto; padding:0px;}
  4. #kuangjia
  5. {width:600px; height:460px; border:#F00 solid 3px; background-size:contain; background-repeat:no-repeat;}
  6. .t1
  7. {width:60px; height:60px; background-repeat:no-repeat; background-size:contain;}
  8. #t2
  9. {float:left; margin:200px 0px 0px 20px; background-image:url(zuo.png);}
  10. #t3
  11. {float:right; margin:200px 20px 0px 0px; background-image:url(you.png);}
  12. </style>
  13. </head>
  14. <body>
  15. <div id="kuangjia"><!--大div作为框架-->
  16.     <div class="t1" id="t2"></div>
  17.     <div class="t1" id="t3"></div>
  18. </div>
  19. </body>

搭建框架

2、定义一个集合，将要播放的图片放入集合

  1. </html>
  2. <script>
  3. var jh=new Array();
  4. jh[]="url(1-1.jpg)";
  5. jh[]="url(2-2.jpg)";
  6. jh[]="url(3-3.jpg)";
  7. jh[]="url(4-4.jpg)";
  8. jh[]="url(5-5.jpg)";
  9. </script>

var jh=new Array();

3、设置自动播放功能：每隔2s切换一张图（）

  1. var kj=document.getElementById("kuangjia");<!--获取框架div的标签，在下面进行更改背景-->
  2. var x=-;<!--定义变量x，建立索引-->
  3. var l=jh.length;<!--获取集合中元素个数-->
  4. function lb()
  5. {
  6.     x++;
  7.     if (x==l)
  8.     {
  9.         x=;
  10.     }
  11.     kj.style.backgroundImage=jh[x];
  12.     window.setTimeout("lb()",);<!--2s后再次播放集合中的图片-->
  13. }
  14. window.setTimeout("lb()",);<!--开始进行轮播-->
  15. </script>

轮播

4、建立点击左或右进行切图事件

  1. body中
  2. <div id="kuangjia"><!--大div作为框架-->
  3.     <div class="t1" id="t2" onclick="(dd(-1))"></div>
  4.     <div class="t1" id="t3" onclick="(dd(1))"></div>
  5. </div>
  6.  
  7. </html>后
  8. function dd(m)
  9. {
  10.     x=x+m;
  11.     if(x==l)
  12.     {x=;}
  13.     else if(x==-)
  14.     {x=l;}
  15.     kj.style.backgroundImage=jh[x];
  16. }

单击按钮

点左按钮变量-1，判断是否小于0，如果小于0则让x=l;点右按钮变量+1，如果等于l，则让x=0

HTML-制作图片的自动播放和手动切换的更多相关文章

  1. 基于fullpage的自动播放，手动播放，暂停页面的功能

    功能如下: 1.默认加载方式为“自动播放 ”方式,即从第1屏至第5屏 页面循环加载显示,每屏每次仅显示1个页面,页面间停留时间为“10”秒2.手动播放过程中,按数字键“1”-“5”,将直接切到指定页面 ...

  2. jQuery可自动播放动画焦点图插件Koala

    Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...

  3. H5音乐自动播放ios//禁止安卓手机图片点击

    定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...

  4. ionic3 slides轮播图手动滑动后无法自动播放问题

    我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...

  5. 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. （IOS可自动播放）使用bxslider做了一个切换图片跟随播放MP3的功能

    代码: <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset=" ...

  7. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  8. 树莓派USB存储设备自动挂载并通过脚本实现自动拷贝,自动播放视频,脚本自动升级等功能

    需求:首先需要树莓派自动挂载USB设备,然后扫描USB指定目录下文件,将相关文件拷贝至树莓派指定目录,然后通过omxplayer循环播放新拷贝文件视频 1. 树莓派实现USB存储设备自动挂载 树莓派U ...

  9. 解决移动端浏览器 HTML 音频不能自动播放的三种方法

    https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...

随机推荐

  1. java读取properties配置文件[转]

    网上文章常见的几种读取.properties文件的方式 1.使用java.util.Properties类的load()方法 示例: InputStream in = lnew BufferedInp ...

  2. Ext.data.association.hasMany一对多模型使用示例

    来自<sencha touch权威指南>第11章,323页开始 --------------------------------------------------- index.html ...

  3. python中执行命令的3种方法小结-乾颐堂

    目前我使用到的python中执行cmd的方式有三种: 1. 使用os.system("cmd") 特点是执行的时候程序会打出cmd在linux上执行的信息. import os o ...

  4. Perl 学习笔记－标量数据

    最近学习Perl, 准备看一遍入门指南,关键的东西还是记录下来,以便以后复习和查看参考． 笔记来自<<Perl语言入门第5版>> 1. 在Perl内部,不区分整数值和浮点数值, ...

  5. unity 小地图的制作

    利用 Transform.InverseTransformDirection  变换位置从世界坐标到自身坐标. 以第一人称控制器为坐标原点(忽视y轴),x轴z轴转为屏幕坐标. 若物体在地图范围外,可以 ...

  6. 编写高质量代码改善C#程序的157个建议——建议118：使用SecureString保存密钥等机密字符串

    建议118:使用SecureString保存密钥等机密字符串 托管代码中的字符串是一类特殊的对象,它们不可用被改变.每次使用System.String类张的方法之一时,或者使用此类型进行运算时(如赋值 ...

  7. myeclipse设置默认的jsp打开方式

  8. zookeeper DataTree内存模型介绍及对Znode的四大特性介绍和Stat结构分析

    一. zookeeper的内存模型   1. zookeeper是一个由 znode节点组成的一个树形结构 2. 每个znode都可以做成一个subject...     3. 客户端可以监控每一个节 ...

  9. MVC4 路由解析 同名Controller的解决方案

    通常我们在MVC中通过Area建立子站的时候会有 controller名称重复的情况,这是后如何区分路由优先级, 我们知道 在Route对象中存在RouteValueDictionary 类型的Dat ...

  10. HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版

    <HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...