原生Js_简易图片轮播模板
功能：图片自动循环轮播，通过点击“上一张”，“下一张”按钮来控制图片的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gary图片轮播</title>
<style type="text/css">
div{
width: 900px;
height:400px;
margin: 0 auto;
} div img{
width:900px;
height: 400px;
}
</style>
<script type="text/javascript"> // 数组下标从0开始
var index = 0;
var pathArr = new Array(
"img/1.jpg",
"img/1.png",
"img/2.jpg",
"img/2.png"
); function init(){
// 图片两秒进行一次切换
// window.setTimeout(changeImg,2000);
// 图片每隔两秒循环进行切换
window.setInterval(changeImg,2000);
} function changeImg(){
nextImg()
} //点击上一张
function preImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index--;
if(index<0){
index = pathArr.length-1;
}
myimg.src =pathArr[index];
} function nextImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index++;
if(index>pathArr.length){
index = 0;
}
myimg.src =pathArr[index];
} </script> </head> <body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/1.jpg" id="myimg"/>
</div>
</body>
</html>
Gary-图片轮播.html
Learn
一、设置图片的切换
二、设置图片的变更和循环
三、添加上一张和下一张按钮
四、图片轮播的优化
目录结构
一、设置图片的切换
设置图片div样式
<div>
<img src="img/Q1.jpg" id="myimg"/></img>
</div>
设置图片样式居中对齐
<style type="text/css">
div{
width: 900px;
height:400px;
margin: 0 auto;
} div img{
width:900px;
height: 400px;
}
</style>
使用JavaScript脚本去控制图片的切换
<script type="text/javascript"> // 图片两秒进行一次切换
window.setTimeout(changeImg,2000); function changeImg(){
// 得到img标签
myimg = document.getElementById("myimg");
myimg.src ="img/Q2.jpg";
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gary图片轮播</title>
<style type="text/css">
div{
width: 900px;
height:400px;
margin: 0 auto;
} div img{
width:900px;
height: 400px;
}
</style>
<script type="text/javascript"> // 图片两秒进行一次切换
window.setTimeout(changeImg,2000); function changeImg(){
// 得到img标签
myimg = document.getElementById("myimg");
myimg.src ="img/Q2.jpg";
}
</script> </head> <body>
<div>
<img src="img/Q1.jpg" id="myimg"/></img>
</div>
</body>
</html>
Gary-图片轮播.html
二、设置图片的变更和循环
通过给<body>标签添加onload="init()"方法实现当页面加载的时候再调用init()中初始化方法
<body onload="init()">
<div>
<img src="img/1.jpg" id="myimg"/>
</div>
</body>
使用JavaScript控制图片每隔2s循环播放
<script type="text/javascript">
var index = 1;
function init(){
// 图片两秒进行一次切换
// window.setTimeout(changeImg,2000);
// 图片每隔两秒循环进行切换
window.setInterval(changeImg,2000);
}
function changeImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index++;
if(index>2){
index = 1;
}
myimg.src ="img/"+index+".jpg";
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gary图片轮播</title>
<style type="text/css">
div{
width: 900px;
height:400px;
margin: 0 auto;
} div img{
width:900px;
height: 400px;
}
</style>
<script type="text/javascript"> var index = 1; function init(){
// 图片两秒进行一次切换
// window.setTimeout(changeImg,2000);
// 图片每隔两秒循环进行切换
window.setInterval(changeImg,2000);
} function changeImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index++;
if(index>2){
index = 1;
}
myimg.src ="img/"+index+".jpg";
}
</script> </head> <body onload="init()">
<div>
<img src="img/1.jpg" id="myimg"/>
</div>
</body>
</html>
Gary-图片轮播.html
三、添加上一张和下一张按钮
添加两个按钮并设置居中显示
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
添加点击按钮时调用上一张和下一张图片
function changeImg(){
nextImg()
}
//点击上一张
function preImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index--;
if(index<1){
index = 2;
}
myimg.src ="img/"+index+".jpg";
}
function nextImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index++;
if(index>2){
index = 1;
}
myimg.src ="img/"+index+".jpg";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gary图片轮播</title>
<style type="text/css">
div{
width: 900px;
height:400px;
margin: 0 auto;
} div img{
width:900px;
height: 400px;
}
</style>
<script type="text/javascript"> var index = 1; function init(){
// 图片两秒进行一次切换
// window.setTimeout(changeImg,2000);
// 图片每隔两秒循环进行切换
window.setInterval(changeImg,2000);
} function changeImg(){
nextImg()
} //点击上一张
function preImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index--;
if(index<1){
index = 2;
}
myimg.src ="img/"+index+".jpg";
} function nextImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index++;
if(index>2){
index = 1;
}
myimg.src ="img/"+index+".jpg";
} </script> </head> <body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/1.jpg" id="myimg"/>
</div>
</body>
</html>
Gary-图片轮播.html
四、图片轮播的优化
为防止图片名不一定都是按Q1.jpg,Q2.jpg这种类型顺序排序，可以在先前的图片按钮点击遍历的基础上使用数组来存储图片的路径
// 数组下标从0开始
var index = 0;
var pathArr = new Array(
"img/1.jpg",
"img/1.png",
"img/2.jpg",
"img/2.png"
);
点击上一张图片和下一张图片判定范围设置成pathArr.length
function changeImg(){
nextImg()
}
//点击上一张
function preImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index--;
if(index<0){
index = pathArr.length-1;
}
myimg.src =pathArr[index];
}
function nextImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index++;
if(index>pathArr.length){
index = 0;
}
myimg.src =pathArr[index];
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gary图片轮播</title>
<style type="text/css">
div{
width: 900px;
height:400px;
margin: 0 auto;
} div img{
width:900px;
height: 400px;
}
</style>
<script type="text/javascript"> // 数组下标从0开始
var index = 0;
var pathArr = new Array(
"img/1.jpg",
"img/1.png",
"img/2.jpg",
"img/2.png"
); function init(){
// 图片两秒进行一次切换
// window.setTimeout(changeImg,2000);
// 图片每隔两秒循环进行切换
window.setInterval(changeImg,2000);
} function changeImg(){
nextImg()
} //点击上一张
function preImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index--;
if(index<0){
index = pathArr.length-1;
}
myimg.src =pathArr[index];
} function nextImg(){
// 得到img标签
myimg = document.getElementById("myimg");
index++;
if(index>pathArr.length){
index = 0;
}
myimg.src =pathArr[index];
} </script> </head> <body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/1.jpg" id="myimg"/>
</div>
</body>
</html>
Gary-图片轮播.html
原生Js_简易图片轮播模板的更多相关文章
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- JavaScript学习---简易图片轮播
效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...
- 原生Javascript实现图片轮播效果
首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...
- jquery的图片轮播 模板类型
先说一下用到的几个重要的事件 j jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) ...
- 原生JS实现图片轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS: 图片轮播模板——左右移动，点击编码移动，自动轮播
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- 原生Js_使用setInterval() 方法实现图片轮播功能
用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
随机推荐
- ubuntu下安装python-selenuim自动化测试的谷歌浏览器驱动安装的位置
谷歌插件下载地址 https://npm.taobao.org/mirrors/chromedriver selenium下载地址 https://pypi.org/simple/selenium/ ...
- servlel出现404问题★ 出现不自动映射 设置XML的问题时候
★ 出现不自动映射 设置XML的问题时候 可能是 web.xml配置可能是复制的 错误原因来自于name的匹配 <display-name>webdemo1</display-na ...
- GridView 二维排布
与ListView一维排布相对 public class MainActivity extends Activity implements AdapterView.OnItemClickListene ...
- C++实例 分解质因数
分解质因数: 每个合数都可以写成几个质数相乘的形式.其中每个质数都是这个合数的因数,叫做这个合数的分解质因数.分解质因数只针对合数. 分解质因数的算式叫短除法.求一个数分解质因数,要从最小的质数除起, ...
- moment.js 使用方法记录
操作 设值/赋值 1. 具体方法. 1)毫秒(millisecond) moment().millisecond(Number); moment().millisecond(); // Number ...
- MyBatis: Invalid bound statement (not found)错误的可能原因
MyBatis: Invalid bound statement (not found)错误的可能原因 其他原因导致此问题解决参考: 1.检查 xml 文件所在 package 名称是否和 Mappe ...
- 同一电脑如何安装多个jdk
1.安装对应的jdk 本机测试只安装jdk1.7和1.8 2.切换jdk 以我的环境为例,一开始装的是jdk1.7,要切换到jdk1.8时,需修改以下内容 环境变量,该为对应jdk的bin路径 修改注 ...
- netstat Recv-Q和Send-Q判断包在哪端
通过netstat -anp可以查看机器的当前连接状态: Active Internet connections (servers and established) Proto Recv-Q Se ...
- [Ahoi2009]self 同类分布
1799: [Ahoi2009]self 同类分布 Time Limit: 50 Sec Memory Limit: 64 MBSubmit: 2357 Solved: 1079[Submit][ ...
- 8张图，让你彻底理解三极管的开关功能 && 經典線路圖
三极管除了可以当作交流信号放大器之外,也可以作为开关之用.严格说起来,三极管与一般的机械接点式开关在动作上并不完全相同,但是它却具有一些机械式开关所没有的特点. 为了很好的理解三极管的开关功能,下面以 ...