原生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>标签添加οnlοad="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

转载于:https://www.cnblogs.com/1138720556Gary/p/10453310.html

原生Js_简易图片轮播模板相关推荐

html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
html原生js实现图片轮播,如何用原生JS实现图片轮播
图片轮播大多应用在商品展示中. 实现方法:主要通过原生javascript编写. 实现原理: 上图中看到中间的图片就是要展示的图片,只要将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中, ...
前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下纯生js实现轮播图链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
原生javascript实现图片轮播
这里是css样式 * {margin: 0;padding: 0;}ul,li {list-style: none;}img {display: block;/*vertical-align: mid ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
原生Javascript实现图片轮播效果
首先引入js运动框架 1 function getStyle(obj,name){ 2 if(obj.currentStyle){ 3 return obj.currentStyle[name]; 4 ...
原生Js_使用setInterval() 方法实现图片轮播功能
用javascript图片轮播功能 <!DOCTYPE html> <html><head><meta charset="utf-8" / ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...

原生Js_简易图片轮播模板

原生Js_简易图片轮播模板相关推荐

最新文章

热门文章