原生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实现的, ...
随机推荐
- hdu 5651 重复全排列+逆元
知识点: n个元素,其中a1,a2,····,an互不相同,进行全排列,可得n!个不同的排列. 若其中某一元素ai重复了ni次,全排列出来必有重复元素,其中真正不同的排列数应为 ,即其重复度为ni! ...
- Swagger学习（一、入门）
简单 入门(效果) SwaggerConfig.class @Configuration //变成配置文件 @EnableSwagger2 //开启swagger2 public class Swag ...
- PHP之配置
1) 错误日志 一.相关配置 需要将php.ini中的配置指令做如下修改: . error_reporting = E_ALL ;将会向PHP报告发生的每个错误 . display_errors = ...
- 解决Eclipse中springBoot中文乱码问题
除了常见的application.properties文件中设置#设置spring-boot 编码格式banner.charset=UTF-8server.tomcat.uri-encoding=UT ...
- StringUtils类API及使用方法详解
StringUtils类API及使用方法详解 StringUtils方法概览 判空函数 1)StringUtils.isEmpty(String str) 2)StringUtils.isNotEmp ...
- Java学习笔记【八、数据结构】
参考资料: http://www.cnblogs.com/janneystory/p/5758958.html array arraylist list linklist的区别 http://www. ...
- 6.JVM技术_java内存模型
1.java内存模型图解 Java虚拟机在执行Java程序的过程中,会把它所管理的内存划分为若干个不同的数据区.这些区域有各自的用途,以及创建和销毁的 时间,有的区域随着虚拟机进程的启动而存在,有的区 ...
- Scala（二）——基础语法（与Java的区分）和函数式编程
Scala快速入门(二) 一.键盘输入 关于基本类型的运算,以及复制运算,条件运算,运算符等知识,均和Java语言一样,这里不过多叙述. val name = StdIn.readLine() Std ...
- 生产者消费者问题--BlockingQueue
# 代码: public class App { public static void main(String[] args) { BlockingQueue<Integer> queue ...
- js实现购物车数量的增加与减少，js实现购物车数量的自增与自减
js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...