思路:将想要播放的图片放入集合中,设置一个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. sqlserver全备份,差异备份和日志备份

      差异备份是以上一个全备为基点,这个期间所有差异数据的备份. 日志备份是基于前一个全备+日志备份为基点,这个期间的事务日志的备份.(日志备份用于确保还原数据库到某个时间点)   在利用全备+日志备份 ...

  2. Python使用signal模块实现定时执行

    在liunx系统中要想每隔一分钟执行一个命令,最普遍的方法就是crontab了,如果不想使用crontab,经同事指点在程序中可以用定时器实现这种功能,于是就开始摸索了,发现需要一些信号的知识... ...

  3. 修改apache的默认访问路径

  4. tp5 $this/Db

  5. [Training Video - 4] [Groovy] Object equality and variable equality check

    def x=2 def y=3 if(x == y){ log.info "equal" }else{ log.info "not equal" // prin ...

  6. CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示

    CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...

  7. STL扩展容器

    string | array | hash 1. string - 可以视为以字符为元素的一种容器, 可以在字符上进行遍历, 提供begin()/end() - 为了支持迭代器和迭代器适配器 , st ...

  8. gradle创建spring-boot项目

    刚来新公司,熟悉了公司项目搭建的框架,了解到了一种新的项目管理工具:gradle,从网上了解,据说比maven更加灵活化,于是便学习了一番.在此记录下来,一遍以后使用.gradle的安装就不说了,网上 ...

  9. 【转】Eclipse中10个最有用的快捷键组合

    转载地址:http://blog.csdn.net/seebetpro/article/details/46227005 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合. ...

  10. NIOS II下基于中断的UART接收和发送设计示例代码

    #include "sys/alt_stdio.h" #include "altera_avalon_uart_regs.h" #include "s ...