JS小练习：使用JavaScript实现点击‘上一张’，‘下一张’循环播放图片

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style typle="text/css">{margin: 0px;padding: 0px;}#outer{width: 500px;margin: 50px auto;padding: 10px;background-color: yellowgreen;//设置文本居中text-align:center}</style><script type="text/javascript">window.onload=function(){//点击按钮切换图片var prev=document.getElementById("prev");var next=document.getElementById("next");var img=document.getElementsByTagName("img")[0];//创建数组保存图片路径var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];//创建索引，来保存当前正在显示图片索引var index=0;prev.onclick=function(){index--;if(index<0){index=3;}img.src=imgArr[index];};next.onclick=function(){index++;if(index>3){index=0;}img.src=imgArr[index];}}</script></head><body><div id="outer"><img src="img/1.jpg" alt="冰棍" /><button id="prev">上一张</button><button id="next">下一张</button></div></body>
</html>

注意：图片应放在js文件下，才可以找到该路径img/1.jpg。

JS小练习：使用JavaScript实现点击‘上一张’，‘下一张’循环播放图片相关推荐

点击图片实现上一张下一张JS
用js实现.点击图片的左边,去上一张:点击图片的右边,去下一张. Jquery脚本在http://jquery.com/ 下载 Jquery实现比较简单 <script src="ht ...
js实现图片上一张下一张点击
1.实现效果 2.实现原理根据数组的长度和一个div的宽度,计算出父元素的长度. document.getElementById("goods_bx").style.width= ...
JS中输入钱数，点击按钮，输出由多少张100元，多少张50元，多少张20元，多少张10元，多少张5元，多少张1元。
/** 输入钱数,点击按钮,输出由多少张100元,多少张50元,多少张20元,多少张10元,多少张5元,多少张1元.* 2345* 2345/100 = 23...45* 45/50 = 0...45 ...
java 图片上一张下一张_java实现预览图片,点击实现下一张
项目上需要实现图片预览功能,页面展示图片的预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果 1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件 2.先上效果图加载页面的效果 ...
js小demo2（淘宝点击关闭二维码）
核心思路: 1.利用样式的显示和隐藏完成, display:none 隐藏元素 display:block 显示元素 2.点击按钮,就让这个二维码盒子隐藏起来即可当鼠标点击二维码关闭按钮的时候,则关 ...
js(小程序或JavaScript)中[]、{}、()区别
一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数体 {}表示对象.[]表示对象的属性.方法,()如果用在方法名后面,代表调用如:var LangShen = {&quo ...
jquery img 放大可点击上一张下一张轮点当前页所有图片
效果图首先需引入支持的插件及样式,需要注意的是可能会与页面的其他样式冲突,引用的时候特别要注意,我当时弄的时候很郁闷啊样式冲突很不好调,最后将调好的结果分享给大家 <script src=&q ...
php点击事件下一页,点击上一页下一页信息没有更新
该楼层疑似违规已被系统折叠隐藏此楼查看此楼代码如下: $conn= mysql_connect("localhost","root", "duol ...
用javascript点击小圆点循环播放轮播图片
点击小圆点循环播放图片 <style>*{padding: 0;margin: 0;}.place{position: relative;width: 800px;height: 600p ...

JS小练习：使用JavaScript实现点击‘上一张’，‘下一张’循环播放图片

JS小练习：使用JavaScript实现点击‘上一张’，‘下一张’循环播放图片相关推荐

最新文章

热门文章