原生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实现的, ...
随机推荐
- 日历控件datetimepicker（IE11）
1.安装 smalot.bootstrap-datetimepicker 2.引用 bootstrap.css bootstrap-datetimepicker.min.css jquery-1.10 ...
- 【原创】大叔经验分享（59）kudu查看table size
kudu并没有命令可以直接查看每个table占用的空间,可以从cloudera manager上间接查看 CM is scrapping and aggregating the /metrics pa ...
- HashMap工作原理总结
看了不少关于HaskMap工作原理的博客,下面自己总结记录一下: 1.了解HashMap之前,需要知道Object类的两个方法:hashCode和equals: 默认实现方法: /** JNI,调用底 ...
- ES6入门四：对象字面量扩展与字符串模板字面量
简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...
- 不支持javascript的浏览器将JS脚本显示为页面内容
不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“tex ...
- 【Git的基本操作二】添加、提交、查看状态
添加.提交.查看状态操作 查看状态: git status
- react中怎么写css样式？
JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...
- 4.Linux用户与权限管理
Linux 系统是一个多用于多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统 新增用户: useradd 新用户名 设置密码:pa ...
- 解决GitHub下载资源慢的问题
打开 C:\Windows\System32\drivers\etc\hosts 添加 # GitHub 解决下载速度慢的问题 192.30.253.113 github.com 151.101.18 ...
- smbfs
Hi I tried to mount a network share (smbfs) but it complains about the lack of kernel support. To so ...