JS实现图片轮播效果（自动和手动）
2024-04-26 16:06:47
本次轮播效果图如下：
具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换
ps:由于很多同志反馈无法总有各种奇怪的情况，所以有需要的直接下载整个工程：JS实现图片轮播效果
以下为实现代码：
首先是html代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>最简单的轮播效果</title>
</head>
<body>
<div class="box" id="box"><div class="inner"><!--轮播图--><ul><li><a href="#"><img src="data:images/1.jpg" alt=""></a></li><li><a href="#"><img src="data:images/2.jpg" alt=""></a></li><li><a href="#"><img src="data:images/3.jpg" alt=""></a></li><li><a href="#"><img src="data:images/4.jpg" alt=""></a></li><li><a href="#"><img src="data:images/5.jpg" alt=""></a></li></ul><ol class="bar">小按钮数量无法确定，由js动态生成</ol><!--左右焦点--><div id="arr"><span id="left"> <</span><span id="right">></span></div></div>
</div></body>
</html>接下来是css样式：
<style>* {margin: 0;padding: 0}.box {width: 500px;height: 300px;border: 1px solid #ccc;margin: 100px auto;padding: 5px;}.inner{width: 500px;height: 300px;position: relative;overflow: hidden;}.inner img{width: 500px;height: 300px;vertical-align: top}ul {width: 1000%;position: absolute;list-style: none;left:0;top: 0;}.inner li{float: left;}ol {position: absolute;height: 20px;right: 20px;bottom: 20px;text-align: center;padding: 5px;}ol li{display: inline-block;width: 20px;height: 20px;line-height: 20px;background-color: #fff;margin: 5px;cursor: pointer;}ol .current{background-color: red;}#arr{display: none;}#arr span{width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #fff;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #000;opacity: 0.5;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}第三部分是最主要的js代码：
<script>/**** @param id 传入元素的id* @returns {HTMLElement | null} 返回标签对象，方便获取元素*/function my$(id) {return document.getElementById(id);}//获取各元素，方便操作var box=my$("box");var inner=box.children[0];var ulObj=inner.children[0];var list=ulObj.children;var olObj=inner.children[1];var arr=my$("arr");var imgWidth=inner.offsetWidth;var right=my$("right");var pic=0;//根据li个数，创建小按钮for(var i=0;i<list.length;i++){var liObj=document.createElement("li");olObj.appendChild(liObj);liObj.innerText=(i+1);liObj.setAttribute("index",i);//为按钮注册mouseover事件liObj.onmouseover=function () {//先清除所有按钮的样式for (var j=0;j<olObj.children.length;j++){olObj.children[j].removeAttribute("class");}this.className="current";pic=this.getAttribute("index");animate(ulObj,-pic*imgWidth);}}//设置ol中第一个li有背景颜色olObj.children[0].className = "current";//克隆一个ul中第一个li,加入到ul中的最后=====克隆ulObj.appendChild(ulObj.children[0].cloneNode(true));var timeId=setInterval(onmouseclickHandle,1000);//左右焦点实现点击切换图片功能box.onmouseover=function () {arr.style.display="block";clearInterval(timeId);};box.onmouseout=function () {arr.style.display="none";timeId=setInterval(onmouseclickHandle,1000);};right.onclick=onmouseclickHandle;function onmouseclickHandle() {//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,//所以,如果用户再次点击按钮,用户应该看到第二个图片if (pic == list.length - 1) {//如何从第6个图,跳转到第一个图pic = 0;//先设置pic=0ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置}pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,if (pic == list.length - 1) {//第五个按钮颜色干掉olObj.children[olObj.children.length - 1].className = "";//第一个按钮颜色设置上olObj.children[0].className = "current";} else {//干掉所有的小按钮的背景颜色for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}olObj.children[pic].className = "current";}}left.onclick=function () {if (pic==0){pic=list.length-1;ulObj.style.left=-pic*imgWidth+"px";}pic--;animate(ulObj,-pic*imgWidth);for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}//当前的pic索引对应的按钮设置颜色olObj.children[pic].className = "current";};//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}
</script>所有用图片如下：
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
下面是完整的代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>最简单的轮播效果</title><style>* {margin: 0;padding: 0}.box {width: 500px;height: 300px;border: 1px solid #ccc;margin: 100px auto;padding: 5px;}.inner{width: 500px;height: 300px;position: relative;overflow: hidden;}.inner img{width: 500px;height: 300px;vertical-align: top}ul {width: 1000%;position: absolute;list-style: none;left:0;top: 0;}.inner li{float: left;}ol {position: absolute;height: 20px;right: 20px;bottom: 20px;text-align: center;padding: 5px;}ol li{display: inline-block;width: 20px;height: 20px;line-height: 20px;background-color: #fff;margin: 5px;cursor: pointer;}ol .current{background-color: red;}#arr{display: none;}#arr span{width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #fff;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #000;opacity: 0.5;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body>
<div class="box" id="box"><div class="inner"><!--轮播图--><ul><li><a href="#"><img src="data:images/1.jpg" alt=""></a></li><li><a href="#"><img src="data:images/2.jpg" alt=""></a></li><li><a href="#"><img src="data:images/3.jpg" alt=""></a></li><li><a href="#"><img src="data:images/4.jpg" alt=""></a></li><li><a href="#"><img src="data:images/5.jpg" alt=""></a></li></ul><ol class="bar"></ol><!--左右焦点--><div id="arr"><span id="left"><</span><span id="right">></span></div></div>
</div>
<script>/**** @param id 传入元素的id* @returns {HTMLElement | null} 返回标签对象，方便获取元素*/function my$(id) {return document.getElementById(id);}//获取各元素，方便操作var box=my$("box");var inner=box.children[0];var ulObj=inner.children[0];var list=ulObj.children;var olObj=inner.children[1];var arr=my$("arr");var imgWidth=inner.offsetWidth;var right=my$("right");var pic=0;//根据li个数，创建小按钮for(var i=0;i<list.length;i++){var liObj=document.createElement("li");olObj.appendChild(liObj);liObj.innerText=(i+1);liObj.setAttribute("index",i);//为按钮注册mouseover事件liObj.onmouseover=function () {//先清除所有按钮的样式for (var j=0;j<olObj.children.length;j++){olObj.children[j].removeAttribute("class");}this.className="current";pic=this.getAttribute("index");animate(ulObj,-pic*imgWidth);}}//设置ol中第一个li有背景颜色olObj.children[0].className = "current";//克隆一个ul中第一个li,加入到ul中的最后=====克隆ulObj.appendChild(ulObj.children[0].cloneNode(true));var timeId=setInterval(onmouseclickHandle,1000);//左右焦点实现点击切换图片功能box.onmouseover=function () {arr.style.display="block";clearInterval(timeId);};box.onmouseout=function () {arr.style.display="none";timeId=setInterval(onmouseclickHandle,1000);};right.onclick=onmouseclickHandle;function onmouseclickHandle() {//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,//所以,如果用户再次点击按钮,用户应该看到第二个图片if (pic == list.length - 1) {//如何从第6个图,跳转到第一个图pic = 0;//先设置pic=0ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置}pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,if (pic == list.length - 1) {//第五个按钮颜色干掉olObj.children[olObj.children.length - 1].className = "";//第一个按钮颜色设置上olObj.children[0].className = "current";} else {//干掉所有的小按钮的背景颜色for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}olObj.children[pic].className = "current";}}left.onclick=function () {if (pic==0){pic=list.length-1;ulObj.style.left=-pic*imgWidth+"px";}pic--;animate(ulObj,-pic*imgWidth);for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}//当前的pic索引对应的按钮设置颜色olObj.children[pic].className = "current";};//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}
</script>
</body>
</html>JS实现图片轮播效果（自动和手动）相关推荐
- html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果 图片轮播效果: 会自动 向左 || 向右 切换图片 能手动点击按钮切换图片 多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
- 2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
- 纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下 纯生js实现轮播图 链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
- js实现图片轮播效果
感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈. 要好好的纪念下这个东西,以后忘了再来这边看看!超赞, 当自己做出这个效果的时候,很有成就感的(ノω<.)ノ))☆.. <!DOC ...
- php中实现图片自动轮播,基于vue.js实现图片轮播效果
轮播图效果: html {{sd.title}} js export default { components: { }, ready: function() { var _this=this; va ...
- 移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
- html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
最新文章
- R语言ggplot2可视化分面图（faceting）：自定义分面图可视化、ggplot2可视化分面图并移除分面图之间的边框线条（Remove Panel Border Lines in a facet
- 磁金融宣布完成1.2亿元B轮融资，宽带资本领投
- edge浏览器设置默认浏览器
- vue中 mock使用教程
- c语言如何调用外部文件的函数调用,keil 中如何调用其他文件的函数
- stdlib.h函数请单
- pdf-lib给pdf添加水印并预览、下载、打印
- 服务器整体爆率如何修改,传奇服务端gom引擎提升爆率脚本
- 校园网自动登录Python版
- UESTC 男神的礼物
- 我心中的linux，和我如何用GNU linux工作！【强帖，精彩，真精彩】
- python gevent async_谈谈Python协程技术的演进
- Debug和Release是什么意思？
- Java 基础语法知识 - 万丈高楼平地起
- 2021京东校招实习生面试 一面
- 升级至4K超高清12G-SDI接口时需要考虑的三件事
- 32位计算机中内存地址如何表示,内存地址是什么
- 有关计算机启动过程的书籍,操作系统—计算机的启动过程
- 梅特卡夫定律：社交网络的滚雪球效应
- teradata ttu_Teradata Studio中文乱码解决方法