javascript点击按钮循序和循环播放轮播图片

循序和循环播放轮播图片

<style>* {padding: 0;margin: 0;}#place{width: 800px;text-align: center;margin: 0 auto;}#box{   width: 800px;height: 525px;border: 1px solid;position: relative;}#box p{position: absolute;width: 100%;line-height: 30px;background: rgba(0,0,0,.3);color: #fff;}#box .taoming1{top: 0;}#box .taoming2{bottom: 0;}#box button{position: absolute;width: 35px;height: 50px;font-size: 30px;top: 50%;margin-top: -25px;background:rgba(0,0,0,.3);color: #fff;}#box .leftBut{left: 0;}#box .rightBut{right: 0;}#box img{width: 100%;height: 100%;}</style></head><body><div id="place"><button>顺序</button><button>循环</button><div id="box"><img src="./img/1.jpg" alt=""><p class="taoming1">1/4</p><p class="taoming2">美女1</p><button class="leftBut"><</button><button class="rightBut">></button></div></div>
</body>
<script type="text/javascript">var img = document.getElementsByTagName('img')[0];var taom = document.getElementsByTagName('p');var btn = document.getElementsByTagName('button');var mg = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];var n = 0; var tag = true;btn[0].onclick = function(){tag = true;}btn[1].onclick = function(){tag = false;}//点击右边的按钮，切换图片btn[3].onclick = function(){n++;if(n == mg.length){if(tag == true){alert('已经是最后一张');n = mg.length - 1;}else{n=0;}}img.src = mg[n];taom[0].innerHTML = n+1+"/4";taom[1].innerHTML = "美女"+(n+1);}
// 点击左边的按钮，切换图片btn[2].onclick = function(){n--;if(n < 0){if(tag == true){alert('已经是最前一张');n=0;}else{n=mg.length - 1;}}img.src = mg[n];taom[0].innerHTML = n+1+"/4";taom[1].innerHTML = "美女"+(n+1);
}</script>

javascript点击按钮循序和循环播放轮播图片相关推荐

用javascript点击小圆点循环播放轮播图片
点击小圆点循环播放图片 <style>*{padding: 0;margin: 0;}.place{position: relative;width: 800px;height: 600p ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...
【重点案例】b站pink老师JavaScript的PC端网页特效案例代码——网页轮播图
目录代码段: 1.index.js部分(全是重点) 2.animate.js部分(重点,是之前封装好的动画函数) 3.index.html部分(重点在标红区) 4.index.css部分(重点在标红 ...
js轮播图片小圆点变化_JavaScript banner轮播左右切换圆点点击切换
JavaScript banner轮播左右切换圆点点击切换 #banner { overflow:hidden; width:100%; height:400px; position:relati ...
Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
点击轮播图片，链接跳转错误
<#if (InfoList?size > 0)><#list InfoList as newsInfo><li class="slider-li1&qu ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...

javascript点击按钮循序和循环播放轮播图片

循序和循环播放轮播图片

javascript点击按钮循序和循环播放轮播图片相关推荐

最新文章

热门文章