JS实现图片轮播跑马灯
本文介绍了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
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7389.html
相关推荐
-
内存库长事务告警的自愈之路
认识内存库长事务 我是本际云服务器推荐网的小编小本本，今天要和大家分享内存库长事务告警的自愈之路。首先，我们需要了解什么是内存库长事务。指的是运行时间较长、长时间未提交的事务，往往…
-
使用jsch修改linux主机密码
使用jsch连接linux主机 最近需要修改linux主机过期密码，通过程序来实现的话就比较简单了。首先需要使用jsch工具连接linux主机，获取Session对象，建立chan…
-
疑难诊断之exadata乱斩劈
疑难诊断：exadata乱斩劈 各位老板好啊，我是本站的小编小本本。今天咱们来聊一聊Oracle一体机exadata的问题。在实施Exadata的GIRU时，我遇到了一个问题：Er…
-
安装升级、配置OpenSSH
安装升级OpenSSL 步骤如下： 1. 从以下地址下载最新OpenSSL源码包：https://www.openssl.org/source/ 2. 安装依赖包：yum inst…
-
国内中小跨境电商企业(国家公认的三大跨境电商？)
国家公认的三大跨境电商？ 目前国内比较好的跨境电商平台有海选网、洋码头和原产喜地这三大。其中海选网是通过团购的形式从海外直购的，洋码头是通过商家和买手代购的方式进行交易的，只有原产…
-
服务器、云服务器、高防服务器都有什么优势呢？
云服务器的优点 作为现代互联网技术的一种展现，云服务器在很多方面拥有优于传统独立服务器的表现。比如，从技术角度来看，云服务器将云计算技术集成在内，这意味着云服务器具备更好的软、硬件…
-
python图像处理图象的制作详细说明
Python图像处理实例详细说明 你好，我是本际云服务器推荐网的小编小本本。今天跟大家介绍一下Python图像处理的实例，希望能给大家带来一些帮助。 用Matplotlib绘制图片…
-
strace工具分析调试mem-agent启动故障一例
小编介绍 大家好，我是本际云服务器推荐网的小编小本本。今天我要跟大家介绍一下strace工具的使用。 什么是strace strace是一种Linux用户空间跟踪器，可用于诊断、调…
-
蓝海市场是什么意思(商业中所说的蓝海是什么意思？)
商业中的红海和蓝海 大家都听说过商业中的红海和蓝海，但这两个词分别代表了什么意思呢？红海指的是一个市场已经很成熟，竞争非常激烈，剩余的市场份额很小；而蓝海指的则是刚刚兴起的市场，竞…
-
Arrays.asList这样用是不对的
问题描述 在开发中常常需要将数组转为集合，在本次开发中就用到了Arrays.asList()方法将字符串转为集合。然而向转完之后的集合中添加元素、或者是改变集合结构，都会遇到图中的…