js轮播（三种方式）

方式一

1.先将图片信息封装成一个数组的全局变量。
2.创建一个全局变量 i 用于操作数组的下标。
3.点击上、下一个按钮时，触发函数，使 i 自增或自减
4.通过字符串拼接的方式，拼接 url。

js代码：

<script type="text/javascript">//images 用于存储图片信息。可通过下标获取var images = ["01.webp","02.webp","03.jpg","04.webp",];var i = 0;//用于操作数组的下标//点击下一个按钮时，触发的函数。function next(){i++;i = i>images.length-1 ? 0:i ;//控制i的范围在 数组元素的取值范围内。实现循环播放update(i);}function prev(){i--;i = i<0 ? images.length-1 : i ;//控制i的范围在 数组元素的取值范围内。实现循环播放update(i);}//接收不同的下标，将对应下标的图片，写进url。function update(n){var div = document.getElementById("pic_show");div.style.backgroundImage="url(img/"+images[i]+")" ;}</script>

效果截图

方式二

根据定位。
通过dom操作元素的位置，实现轮播。

js代码

<script type="text/javascript">var arr = document.getElementsByClassName("show_pic");//获取显示图片的元素。var brr = new Array(arr.length); //创建一个数组用来保存图片的定位信息。//点击下一个按钮时触发function next(){//为brr赋值for(var i=0;i<=arr.length-1;i++){brr[i] = arr[i].offsetLeft - 220 ;//获取元素的位置信息，并且改变//控制图片的循环播放if (brr[i] < -200 ){brr[i] += 1320;} //console.log(brr[i]);}//重写元素的位置for(var i =0;i<=brr.length-1;i++){arr[i].style.left= brr[i]+"px";}}//点击上一个按钮时触发function pre(){for(var i=0;i<=arr.length-1;i++){brr[i] = arr[i].offsetLeft + 220 ;//获取元素的位置信息，并且改变//控制图片的循环播放if (brr[i] > 900 ) {brr[i] -= 1320;} //console.log(brr[i]);}//重写元素的位置for(var i =0;i<=brr.length-1;i++){arr[i].style.left= brr[i]+"px";}}
</script>

页面代码

<html><head><meta charset="utf-8"><title></title></head><style type="text/css">.pic{width: 900px;height: 400px;background-color: antiquewhite;overflow: hidden; position: relative;}.show_pic{width:200px ;height: 300px;background-color: aqua;float: left;margin-top: 20px;position: absolute;/* transition: left 10s; */}.control{width: 100%;height: 30px;text-align: right;}#pic1{left: -200px;}#pic2{left: 20px;}#pic3{left: 240px;}#pic4{left: 460px;}#pic5{left: 680px;}#pic6{left: 900px;}</style><body><div class="pic"><div class="control"><button  onclick="pre();"> &lt </button><button  onclick="next();"> &gt </button></div><div class="show_pic" id="pic1">第一个</div><div class="show_pic" id="pic2">第二个</div><div class="show_pic" id="pic3">第三个</div><div class="show_pic" id="pic4">第四个</div><div class="show_pic" id="pic5">第五个</div><div class="show_pic" id="pic6">第六个</div></div></body>
</html>

运行截图

方式三

为图片设置两种样式。
1.图片的默认样式为不显示——透明度为0。
2.图片的class样式设置为显示——图片的透明度为1。
3.通过dom为图片的className属性赋值。即可实现轮播效果。

js代码

<script type="text/javascript">function prev(){// 获取ulvar ul = document.getElementById("pic_ul");//通过ul获取 里面的带有active 的<li>var li = ul.getElementsByClassName("active")[0];//将这个li设置成不显示li.className="";//获取当前li的上一个li——preLivar preLi = li.previousElementSibling;//判断preLi 的元素是否为空，若为空，则将 preLi 赋值成最后一个。实现循环if(preLi == null){var arr = ul.getElementsByTagName("li");preLi = arr[arr.length-1];}//将nextLi 设置成显示preLi.className = "active";}function next(){// 获取ulvar ul = document.getElementById("pic_ul");//通过ul获取 里面的带有active 的<li>var li = ul.getElementsByClassName("active")[0];//将这个li设置成不显示li.className="";//获取当前li的下一个li——nextLivar nextLi = li.nextElementSibling;//判断nextLi 的元素是否为空，若为空，则将 nextLi 赋值成第一个。实现循环if(nextLi == null){// 通过 ByTagName 获取到ul 下的 第一个 li。nextLi = ul.getElementsByTagName("li")[0];}//将nextLi 设置成显示nextLi.className = "active";}</script>

html代码

<html><head><meta charset="utf-8"><title></title></head><style type="text/css">*{margin: 0px;padding: 0px;}.container{width: 1260px;height: 460px;margin: 100px auto;/* background-color: #00FFFF; */position: relative;}.container ul {list-style: none;}.container ul li{position: absolute;top: 0px;opacity: 0;transition: opacity 5s; /* 过渡，设置时间长一点，方便展示*/}.container ul li.active{opacity: 1;}.container ul li>img{width: 1260px;height: 460px;} </style><body><div class="container"><ul id="pic_ul"><li class= "active" ><img src="img/01.webp" ></li><li><img src="img/02.webp" ></li><li><img src="img/03.jpg" ></li><li><img src="img/04.webp" ></li></ul></div><button type="button" onclick="prev();">pre</button><button type="button"οnclick="next();">next</button></body>
</html>

运行截图

点击按钮后，过渡时截图。

js轮播（三种方式）相关推荐

在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
js 函数定义三种方式
Js 函数定义的三种方式: 方式一:function <script type="te ...
JS绑定事件三种方式
三种方式 1.在DOM中直接绑定 2.在JS代码中直接绑定 3.使用事件监听函数绑定事件一.在DOM中直接绑定也就是直接在html标签中通过 onXXX="" 来绑定.举个例子 ...
HTML嵌入JS代码的三种方式
目录一.HTML嵌入JS代码的第一种方式:直接加一个事件句柄跟表达式二.HTML嵌入JS代码的第二种方式:脚本块三.HTML嵌入JS代码的第三种方式:外部引入js文件一.HTML嵌入JS代码的 ...
js声明变量三种方式
变量声明的三种方式: let const var var 声明与 let 相似.大部分情况下,我们可以用 let 代替 var 或者 var 代替 let,都能达到预期的效果. let和var的区别: ...
前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...
点击返回页面顶部（h5、js、jQuery 三种方式）
当页面过长时,通常会在滚动条到一定位置时设置按钮,点击可以快速返回顶部或者指定的位置处. 参考文档:jQuery中页面返回顶部的方法总结方法一:锚点定位当点击a标签,会直接返回到顶部:如果p标签有 ...
Web前端 | HTML嵌入JS代码的三种方式
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
js输出的三种方式:页面输出、对话框输出、控制台输出
1.页面输出 document.write("图片上传失败") 2.对话框输出 window.alert("图片上传失败") 必须点击确定才能进行后续操作,打断 ...

js轮播（三种方式）

方式一

方式二

方式三

js轮播（三种方式）相关推荐

最新文章

热门文章