原生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实现的, ...
随机推荐
- 【原创】大叔经验分享（63）kudu vs parquet
一 对比 存储空间对比: 查询性能对比: 二 设计方案 将数据拆分为:历史数据(hdfs+parquet+snappy)+ 近期数据(kudu),可以兼具各种优点: 1)整体低于10%的磁盘占用: 2 ...
- JS基础_非布尔值的与或运算
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- luogu题解 UVA11992 【Fast Matrix Operations】
题目链接: https://www.luogu.org/problemnew/show/UVA11992 题目大意: 一个r*c的矩阵,一开始元素都是0,然后给你m次三种操作,分别是将一个子矩阵中所有 ...
- O040、Migrate Instance 操作详解
参考https://www.cnblogs.com/CloudMan6/p/5538599.html Migrate 操作的作用是将instance 从当前的计算节点迁移到其他的计算节点上. ...
- 09 Python之IO多路复用
四种常见IO模型 阻塞IO(blocking IO).非阻塞IO(nonblocking IO).IO多路复用(IOmultiplexing).异步IO(asynchronous IO) IO发生时涉 ...
- react中怎么写css样式？
JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...
- vue-element-admin 多层路由问题
在二级页面上添加<router-view> 关于页面打包后三级路由无法访问问题 需要将 存放router-view 的页面单独存放一个文件夹 router.js 写法
- 1.Linux文件及目录结构
Linux 文件结构 在Linux中 ,一切皆文件 目录结构
- C# Winform 带水印提示输入框
using System; using System.Drawing; using System.Runtime.InteropServices; using System.Windows.Forms ...
- fragment事务 的基本处理
处理fragment事务 动态加载fragmentMyFragment2 fragment2=new MyFragment2();//new出一个fragment对象FragmentManager f ...