js实现网页图片轮换播放
本文实例为大家分享了js实现网页图片轮换播放的具体代码，供大家参考，具体内容如下
1、实现效果如下：
2、实现功能：
（1）点击左右箭头之后，下面显示的图片会换成对应的上一张或下一张图片
（2）点击导航的某一张图片时，下面的就会显示对应的图片，而且再次点击上一张或者下一张时会显示对应的图片
（3）图片的地址可以来自网络上，也可以是自己的服务器发送过来的字符串数组。
3、实现代码：
（1）目录结构：
（2）index.html的代码内容如下：
<!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>
<script type="text/javascript" src="js/showPic.js"></script>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
<img id="picture" src="image/1.jpg"alt="my image"/>
<div id="navigate">
<ul id="image">
<li>
<a href="#" title="左箭头" οnclick="clickTurnLeft();">
<img src="image/left_aim.jpg" id="leftAim">
</a>
</li>
<li>
<a href="image/1.jpg" title="鲜花" οnclick="showPic(this);return false;">
<img src="image/1.jpg" id="smallPic" alt="花缩略图">
</a>
</li>
<li>
<a href="image/2.jpg" title="白雪" οnclick="showPic(this);return false;">
<img src="image/2.jpg" id="smallPic"alt="雪缩略图">
</a>
</li>
<li>
<a href="image/3.jpg" title="飞鸟" οnclick="showPic(this);return false;">
<img src="image/3.jpg" id="smallPic"alt="鸟缩略图">
</a>
</li>
<li>
<a href="image/4.jpg" title="岩石" οnclick="showPic(this);return false;">
<img src="image/4.jpg" id="smallPic"alt="石头缩略图">
</a>
</li>
<li>
<a href="#" title="右箭头" οnclick="clickTurnRight();">
<img src="image/right_aim.jpg" id="rightAim"alt="向右轮换">
</a>
</li>
</ul>
</div>
</body>
</html>
（3）mystyle.css的代码内容如下：
/* mystyle.css 代码*/
body {
text-align:center
}
#navigate{
margin:0 auto;
width:1100px;
height:100px;
}
ul{
margin-right:auto;margin-left:auto;
}
li{
float:left;
padding:10px;
list-style:none;
}
#leftAim{
width:100px;
height:100px;
}
#smallPic{
width:180px;
height:120px;
border:2px solid black;
}
#rightAim{
width:100px;
height:100px;
}
#picture{
display:block;
width:800px;
height:600px;
margin:0 auto;
}
（4）showPic.js的代码内容如下：
//showPic.js
var href = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg") ;
var index = 0 ;
function clickTurnLeft() {
if (index == 0) {
index = href.length - 1 ;
} else {
index = --index % href.length ;
}
var picture = document.getElementById("picture");
picture.setAttribute("src",href[index]);
}
function clickTurnRight(){
index = ++index % href.length ;
var picture = document.getElementById("picture");
picture.setAttribute("src",href[index]);
}
function showPic(whichPic){
var source = whichPic.getAttribute("href");
index = href.indexOf(source);
var picture = document.getElementById("picture");
picture.setAttribute("src",source);
}
4、总结：
在JS文件里面定义了一个图片名称的数组，这个数组可以是服务器返回来的图片地址数据，也可以是网络上的图片地址。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js下拉菜单中自动信息轮换播放
要完成此效果把如下代码加入到<body>区域中 Welcome To Typhoon Start. JavaScript Fairyland. 我们_www.jb51.net. 我只是提出这种思路,其它要靠自己发挥喽. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js 新浪的一个图片播放图片轮换效果代码
核心代码 复制代码 代码如下: function slide(src,link,text,target,attr,desc) { this.desc = desc this.src = src; this.link = link; this.text = text; this.target = target; this.attr = attr; if (document.images) { this.image = new Image(); } thi
-
js实现网页图片轮换播放
本文实例为大家分享了js实现网页图片轮换播放的具体代码,供大家参考,具体内容如下 1.实现效果如下: 2.实现功能: (1)点击左右箭头之后,下面显示的图片会换成对应的上一张或下一张图片 (2)点击导航的某一张图片时,下面的就会显示对应的图片,而且再次点击上一张或者下一张时会显示对应的图片 (3)图片的地址可以来自网络上,也可以是自己的服务器发送过来的字符串数组. 3.实现代码: (1)目录结构: (2)index.html的代码内容如下: <!DOCTYPE html PUBLIC "-
-
JS获取网页图片name属性的方法
本文实例讲述了JS获取网页图片name属性的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以用来获取网页图片的name属性 <!DOCTYPE html> <html> <body> <img id="compman" name="compman" src="compman.gif" alt="Computerman" width="107" height
-
JS设置网页图片vspace和hspace属性的方法
本文实例讲述了JS设置网页图片vspace和hspace属性的方法.分享给大家供大家参考.具体分析如下: hspace可以以像素为单位,指定图像左边和右边的文字与图像之间的间距:vspace 值则是上面的下面的文字与图像之间的距离的像素数 <!DOCTYPE html> <html> <head> <script> function setSpace() { document.getElementById("compman").hspac
-
js实现网页图片延时加载 提升网页打开速度
提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法.代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间.本文采用图片异步延迟加载的方法,来提升本站页面加载速度. 图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验. 有很多技术
-
JS特效实现图片自动播放并可控的效果
不多说了,实现方法请看下面代码. 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" /> <link re
-
原生JS实现网页手机音乐播放器 歌词同步播放的示例
整了一下 之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个
-
封装了一个js图片轮换效果的函数
其中如果有问题,有更好的意见或者建议都可在最后留言,都将对您感激不尽. 具体的代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>图片轮换效果</title> <style type="t
-
js控制网页背景音乐播放与停止的方法
本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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
-
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //
-
js实现网页随机切换背景图片的方法
本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = []; //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB