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

整体代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>图片轮播</title>

<style>

*{margin:0px auto; padding:0px;}

#kuangjia

{width:600px; height:450px; border:#F00 solid 3px; background-size:cover; background-repeat:no-repeat;}

.t1

{width:40px; height:40px; background-repeat:no-repeat; background-size:contain; cursor:pointer;}

#t2

{float:left; margin:205px 0px 0px 20px; background-image:url(zuo.png);}

#t3

{float:right; margin:205px 20px 0px 0px; background-image:url(you.png);}

</style>

</head>

<body>

<div id="kuangjia"><!--大div作为框架-->

    <div class="t1" id="t2" onclick="(dd(-1))"></div>

    <div class="t1" id="t3" onclick="(dd(1))"></div>

</div>

</body>

</html>

<script>

var jh=new Array();

jh[]="url(1-1.jpg)";

jh[]="url(2-2.jpg)";

jh[]="url(3-3.jpg)";

jh[]="url(4-4.jpg)";

jh[]="url(5-5.jpg)";

var kj=document.getElementById("kuangjia");<!--获取框架div的标签，在下面进行更改背景-->

var x=-;<!--定义变量x，建立索引-->

var l=jh.length;<!--获取集合中元素个数-->

function lb()

{

    x++;

    if (x==l)

    {

        x=;

    }

    kj.style.backgroundImage=jh[x];

    window.setTimeout("lb()",);<!--2s后再次播放集合中的图片-->

}

window.setTimeout("lb()",);<!--开始进行轮播-->

function dd(m)

{

    x=x+m;

    if(x==l)

    {x=;}

    else if(x==-)

    {x=l;}

    kj.style.backgroundImage=jh[x];

}

</script>

图片轮播全部代码

下面为步骤及分步代码：

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

<title>图片轮播</title>

<style>

*{margin:0px auto; padding:0px;}

#kuangjia

{width:600px; height:460px; border:#F00 solid 3px; background-size:contain; background-repeat:no-repeat;}

.t1

{width:60px; height:60px; background-repeat:no-repeat; background-size:contain;}

#t2

{float:left; margin:200px 0px 0px 20px; background-image:url(zuo.png);}

#t3

{float:right; margin:200px 20px 0px 0px; background-image:url(you.png);}

</style>

</head>

<body>

<div id="kuangjia"><!--大div作为框架-->

    <div class="t1" id="t2"></div>

    <div class="t1" id="t3"></div>

</div>

</body>

搭建框架

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

</html>

<script>

var jh=new Array();

jh[]="url(1-1.jpg)";

jh[]="url(2-2.jpg)";

jh[]="url(3-3.jpg)";

jh[]="url(4-4.jpg)";

jh[]="url(5-5.jpg)";

</script>

var jh=new Array();

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

var kj=document.getElementById("kuangjia");<!--获取框架div的标签，在下面进行更改背景-->

var x=-;<!--定义变量x，建立索引-->

var l=jh.length;<!--获取集合中元素个数-->

function lb()

{

    x++;

    if (x==l)

    {

        x=;

    }

    kj.style.backgroundImage=jh[x];

    window.setTimeout("lb()",);<!--2s后再次播放集合中的图片-->

}

window.setTimeout("lb()",);<!--开始进行轮播-->

</script>

轮播

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

body中

<div id="kuangjia"><!--大div作为框架-->

    <div class="t1" id="t2" onclick="(dd(-1))"></div>

    <div class="t1" id="t3" onclick="(dd(1))"></div>

</div>

</html>后

function dd(m)

{

    x=x+m;

    if(x==l)

    {x=;}

    else if(x==-)

    {x=l;}

    kj.style.backgroundImage=jh[x];

}

单击按钮

点左按钮变量-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. Runnable和Thread实现多线程的区别（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17161237 Java中实现多线程有两种方法:继承Thread类.实现Runnable接口 ...

  2. spring4-3-AOP-面向切面编程

    AOP常用的两个用户:日志和验证.也就是程序追踪和数据验证. 直接使用代码实现,距离如下:

  3. 2015年2月编程语言排行榜：JavaScript排名达到历史最高

    JavaScript在赢得2014年最后一个月的TIOBE编程语言奖后,并且还在不断走强.在二月份JavaScript就超过了PHP,并 且达到它有史以来最高的位置,排行到TOP 6.另一方面,Obj ...

  4. HBase环境搭建随记

    ====软件版本==== jdk:jdk-8u77-linux-x64.tar.gz zookeeper:zookeeper-3.4.6.tar.gz hadoop:hadoop-2.7.4.tar. ...

  5. zigbee组播通信原理

    组播: 在zigbee网络里面,把网络节点标记为组的方式来进行通信:发送模块如果发送的组号和网络里标记模块的组号相对应,那么这些模块就可以拿到这些无线数据包. 特点: 1.分组中组的编号有两个字节. ...

  6. 使用Selenium&PhantomJS的方式爬取代理

    前面已经爬取了代理,今天我们使用Selenium&PhantomJS的方式爬取快代理 :快代理 - 高速http代理ip每天更新. 首先分析一下快代理,如下 使用谷歌浏览器,检查,发现每个代理 ...

  7. kcp结构体字段含义

    conv 会话IDmtu 最大传输单元mss 最大分片大小state 连接状态(0xFFFFFFFF表示断开连接)snd_una 第一个未确认的包snd_nxt 下一个待分配的包的序号rcv_nxt ...

  8. java修饰符 protect public protected

    1.private修饰词,表示成员是私有的,只有自身可以访问: 2.protected,表示受保护权限,体现在继承,即子类可以访问父类受保护成员(子类是可以访问父类的带protected修饰符的成员的 ...

  9. UVa 10766 Organising the Organisation (生成树计数)

    题意:给定一个公司的人数,然后还有一个boss,然后再给定一些人,他们不能成为直属上下级关系,问你有多少种安排方式(树). 析:就是一个生成树计数,由于有些人不能成为上下级关系,也就是说他们之间没有边 ...

  10. 用word发CSDN blog

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...