HTML-制作图片的自动播放和手动切换
思路：将想要播放的图片放入集合中，设置一个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-制作图片的自动播放和手动切换的更多相关文章
- 基于fullpage的自动播放，手动播放，暂停页面的功能
功能如下: 1.默认加载方式为“自动播放 ”方式,即从第1屏至第5屏 页面循环加载显示,每屏每次仅显示1个页面,页面间停留时间为“10”秒2.手动播放过程中,按数字键“1”-“5”,将直接切到指定页面 ...
- jQuery可自动播放动画焦点图插件Koala
Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...
- H5音乐自动播放ios//禁止安卓手机图片点击
定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...
- ionic3 slides轮播图手动滑动后无法自动播放问题
我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...
- 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- （IOS可自动播放）使用bxslider做了一个切换图片跟随播放MP3的功能
代码: <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset=" ...
- Bootstrap之Carousel不能自动播放的解决办法(转)
Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...
- 树莓派USB存储设备自动挂载并通过脚本实现自动拷贝,自动播放视频,脚本自动升级等功能
需求:首先需要树莓派自动挂载USB设备,然后扫描USB指定目录下文件,将相关文件拷贝至树莓派指定目录,然后通过omxplayer循环播放新拷贝文件视频 1. 树莓派实现USB存储设备自动挂载 树莓派U ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...
随机推荐
- 2-R型聚类
将相似的属性聚合在一起 clc, clear; % a = load('E:\a-建模\<数学建模算法与应用>课件资源\数学建模算法与应用\程序及数据\10第10章\gj.txt'); a ...
- sql2008 安装提示重启失败
[转] https://www.cnblogs.com/chenshaogang/p/4313022.html
- Anaconda 安装和配置
Anaconda 安装和配置 1. Anaconda 安装 Anaconda说明及安装过程:Anaconda详细安装使用教程 2. Anaconda和Pip源修改 Anaconda源修改:打开Anac ...
- R Markdown 速查表
- mysql json格式数据处理
1.查询字段所对应的值: SELECT c.result_http->"$.create_time",json_extract(c.result_http,"$.e ...
- [GO]tcp网络通信和实现
服务端的代码 package main import ( "net" "fmt" ) func main() { //监听 listener, err := n ...
- centos 学习总结
我用的是6.4 添加中文输入法 .su root .yum install "@Chinese Support" .exit .回到桌面,system->preference ...
- 使用 console.time() 计算js代码执行时间
console.time('hellor'); for(var i=0;i<100000;i++){} console.timeEnd('hellor');
- SQL server 累加求和
1. SELECT SalesOrderID, ProductID, OrderQty ,SUM(OrderQty) OVER(PARTITION BY SalesOrderID) AS Tot ...
- mybatis 起别名
mybatis.xml文件 typeAliases 节点进行配置别名(有两种配置方法:1.typeAlias 2.package 这个方式比较简单) 也可以省略不写