JS实现图片轮播跑马灯代码

3403771864 发布于2022-10-10 21:58 / 420人阅读

　　今天为大家讲述的就是JS实现图片轮播跑马灯的具体代码，不说废话直接看下面：

　　实现原理：

　　1、准备一个展示区域的盒子，设置宽高；

　　2、准备一个存放所有图片的盒子，将所有图片依次放入，设置溢出隐藏

　　一、HTML布局　

　<div class="wrapper">
　　<div id="container"><!--图片展示区域盒子-->
　　<ul id="imglist"><!--将所有图片并列展示盒子-->
　　<li>
　　<img src="./img/banner.jpg" alt="暂无图片">
　　</li>
　　<li>
　　<img src="./img/banner0.jpg" alt="暂无图片">
　　</li>
　　<li>
　　<img src="./img/banner.jpg" alt="暂无图片">
　　</li>
　　<li>
　　<img src="./img/banner0.jpg" alt="暂无图片">
　　</li>
　　</ul>
　　<ul id="point">
　　<li class="selected"></li>
　　<li></li>
　　<li></li>
　　<li></li>
　　</ul>
　　</div>
　　</div>

　　二、CSS样式

　.wrapper{
　　position: relative;
　　overflow: hidden;
　　width: 100%;
　　height: 870px;
　　}
　　#container{
　　width: 1920px;
　　height: 870px;
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　overflow: hidden;
　　transform: translate(-50%,-50%);
　　-webkit-transform: translate(-50%,-50%);
　　-moz-transform: translate(-50%,-50%);
　　-ms-transform: translate(-50%,-50%);
　　-o-transform: translate(-50%,-50%);
　　background-color: #aa201c;
　　}
　　#imglist{
　　width: 7680px;
　　height: 870px;
　　list-style-type: none;
　　position: absolute;
　　top: 0;
　　left: 0;
　　z-index: 1;
　　}
　　#imglist>li{
　　width: 1920px;
　　height: 870px;
　　float: left;
　　overflow: hidden;
　　}
　　#point{
　　list-style-type: none;
　　position: absolute;
　　bottom: 5px;
　　left: 50%;
　　/* right: 0; */
　　/* margin: auto; */
　　width: 100%;
　　height: 29px;
　　line-height: 29px;
　　z-index: 10;
　　}
　　#point>.selected{
　　background-color: #aa201c;
　　}
　　#point>li{
　　width: 16px;
　　height: 16px;
　　float: left;
　　background-color: #c5c8ce;
　　border-radius: 100%;
　　margin-right: 10px;
　　-webkit-border-radius: 100%;
　　}

　　三、JS代码

　　var wrap = document.getElementById("container");
　　var inner = document.getElementById("imglist");
　　var spanList = document.getElementById("point").getElementsByTagName("li");
　　var left = document.getElementById("left");
　　var right = document.getElementById("right");
　　var clickFlag = true;//设置左右切换标记位防止连续按
　　var time//主要用来设置自动滑动的计时器
　　var index = 0;//记录每次滑动图片的下标
　　var Distance = wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度
　　//定义图片滑动的函数
　　function AutoGo() {
　　var start = inner.offsetLeft;//获取移动块当前的left的开始坐标
　　var end = index * Distance * (-1);//获取移动块移动结束的坐标。
　　//计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
　　var change = end - start;//偏移量
　　var timer;//用计时器为图片添加动画效果
　　var t = 0;
　　var maxT = 30;
　　clear();//先把按钮状态清除,再让对应按钮改变状态
　　if (index == spanList.length) {
　　spanList[0].className = "selected";
　　} else {
　　spanList[index].className = "selected";
　　}
　　clearInterval(timer);//开启计时器前先把之前的清
　　timer = setInterval(function () {
　　t++;
　　if (t >= maxT) {//当图片到达终点停止计时器
　　clearInterval(timer);
　　clickFlag = true;//当图片到达终点才能切换
　　}
　　inner.style.left = change / maxT * t + start + "px";//每个17毫秒让块移动
　　if (index == spanList.length && t >= maxT) {
　　inner.style.left = 0;
　　index = 0;
　　//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
　　}
　　}, 17);
　　}
　　//编写图片向右滑动的函数
　　function forward() {
　　index++;
　　//当图片下标到最后一张把小标换0
　　if (index > spanList.length) {
　　index = 0;
　　}
　　AutoGo();
　　}
　　//编写图片向左滑动函数
　　function backward() {
　　index--;
　　//当图片下标到第一张让它返回到倒数第二张，
　　//left值要变到最后一张才不影响过渡效果
　　if (index < 0) {
　　index = spanList.length - 1;
　　inner.style.left = (index + 1) * Distance * (-1) + "px";
　　}
　　AutoGo();
　　}
　　//开启图片自动向右滑动的计时器
　　time = setInterval(forward, 3000);
　　//设置鼠标悬停动画停止
　　wrap.onmouseover = function () {
　　clearInterval(time);
　　}
　　wrap.onmouseout = function () {
　　time = setInterval(forward, 3000);
　　}
　　//遍历每个按钮让其切换到对应图片
　　for (var i = 0; i < spanList.length; i++) {
　　spanList[i].onclick = function () {
　　index = this.innerText - 1;
　　AutoGo();
　　}
　　}
　　//清除页面所有按钮状态颜色
　　function clear() {
　　for (var i = 0; i < spanList.length; i++) {
　　spanList[i].className = "";
　　}
　　}

　　代码已展示完毕，希望大家好好运用。

服务器托管私有云 php轮播图片代码 asp 图片轮播代码 js实现轮播原生JS实现轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127985.html

单页多张图片轮播效果用AntDesignVue走马灯实现

　　项目中要求单页多图一次滚动一张图片的轮播效果，且项目组件库是antd　　在使用antd后展现的走马灯　　其实很想吐槽，但还是不说了吧。　　在https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3中　　简单来说就是太多知识，脑子一团浆糊，怎么办那？...

3403771864 2022-10-23 14:31 评论0 收藏0
iOS开发特效源码：swift轮播图导航渐变跑马灯分段选择下拉菜单物流时间轴

摘要：轮播图纯实现导航渐变，并保持状态跑马灯上下跑马灯分段选择，自定义，项目简单搭建一个简单的弹性动画，类似微信评价点赞按钮的弹出动画内置调试工具下拉菜单列表选择图片预览框架关于自定义返回按钮物流时间轴自动匹配电话号码可点击拨打 1、轮播图（纯swift实现） showImg(https://segmentfault.com/img/remote/1460000013731963?w=22...

Ververica 2019-06-25 16:40 评论0 收藏0
手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

jasperyang 2019-08-23 10:57 评论0 收藏0
最简单的无缝轮播

摘要：昨天学习了轮播的原理，今天再来看看无缝轮播的技术。无缝轮播无缝轮播的原来大致类似小时候跳大绳，小朋友一个个进入，一个个出来，出来后排到队伍末尾，等在着进入，无缝轮播也类似这种机制。昨天学习了轮播的原理，今天再来看看无缝轮播的技术。昨天学习的轮播机制类似于走马灯，所有图片排成一排，轮流在你眼前走过，你就会感觉他们动起来了，今天学的无缝轮播就不能用昨天的思路了，它和昨天最大的区别是，从...

Kyxy 2019-08-22 17:25 评论0 收藏0
用element-ui的走马灯carousel轻松实现自适应全屏banner图

摘要：写在前面网站轮播图建议使用组件，非常方便快捷。接手一个项目，轮播图是用的实现的，看起来效果还不错，只是固定宽高，并未做适配，于是将就代码做下修改，以适配各种显示器屏幕。写在前面：网站轮播图建议使用swiper组件，非常方便快捷。接手一个项目，轮播图是用element-ui的carousel实现的，看起来效果还不错，只是固定宽高，并未做适配，于是将就代码做下修改，以适配各种显示器屏幕...

Mr_houzi 2019-08-05 13:49 评论0 收藏0