js实现简单轮播图效果
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了js实现简单轮播图效果的具体代码，供大家参考，具体内容如下
使用transform = translateX()实现的图片切换
<style>
.box {
position: relative;
overflow: hidden;
margin: 200px auto;
width: 600px;
height: 400px;
}
.img {
width: 3000px;
height: 400px;
}
img {
float: left;
width: 600px;
height: 400px;
}
.btn {
position: absolute;
top: 350px;
left: 245px;
width: 110px;
height: 20px;
}
.dian {
float: left;
margin: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.left,
.right {
display: none;
box-sizing: border-box;
position: absolute;
top: 150px;
width: 50px;
height: 100px;
background-color: rgba(0, 0, 0, 0.521);
font-size: 40px;
line-height: 100px;
color: #fff;
}
.box:hover .left,
.box:hover .right {
display: block;
}
.left {
padding-left: 10px;
left: 0;
}
.right {
padding-right: 10px;
text-align: right;
right: 0;
}
</style>
<div class="box">
<div class="img">
<img class="lazy" data-src="./img/1.jpeg" alt="">
<img class="lazy" data-src="./img/2.jpeg" alt="">
<img class="lazy" data-src="./img/3.jpeg" alt="">
<img class="lazy" data-src="./img/4.jpeg" alt="">
<img class="lazy" data-src="./img/5.jpeg" alt="">
</div>
<div class="btn">
<span class="dian"></span>
<span class="dian"></span>
<span class="dian"></span>
<span class="dian"></span>
<span class="dian"></span>
</div>
<div class="left">< </div>
<div class="right">></div>
</div>
<script>
var btn = document.getElementsByClassName('btn')[0];
var imgBox = document.getElementsByClassName('img')[0];
var imgs = imgBox.getElementsByTagName('img');
var btnChild = document.getElementsByClassName('dian');
var k = 0;
// 向按钮添加自定义属性
for (var i = 0; i < btnChild.length; i++) {
btnChild[i].dataset.num = i * 600;
}
// 默认为 第一张图片，第一个按钮为白色
btnChild[0].style.background = 'rgba(255, 255, 255, 0.8)';
// 点击按钮切换图片，按钮变色
btn.onclick = function(e) {
if (e.target.nodeName === 'SPAN') {
// 先让所有按钮为默认颜色
for (var i = 0; i < btnChild.length; i++) {
btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
}
// 点击的按钮变色
k = +e.target.dataset.num;
console.log(k);
btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
// 切换图片
imgBox.style.transform = `translateX(-${e.target.dataset.num}px)`;
}
}
// 获取图片长度
// var imgWidth = +getComputedStyle(imgs[0]).width.slice(0, -2);
var imgWidth = imgs[0].offsetWidth;
// 定时器 移动图片
var interval1 = setInterval(move, 1000);
var interval;
// 函数 移动图片，改变按钮
function move() {
k += imgWidth;
if (k === imgWidth * imgs.length) {
k = 0;
}
// 移动图片
imgBox.style.transform = `translateX(-${k}px)`;
// 改变按钮颜色
for (var i = 0; i < btnChild.length; i++) {
btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
}
btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
}
// 鼠标移动到图片上 删除定时器
var box = document.getElementsByClassName('box')[0];
box.onmouseover = function() {
clearInterval(interval1);
clearInterval(interval);
}
// 鼠标移出 启动定时器
box.onmouseout = function() {
interval = setInterval(move, 1000);
}
var leftBtn = document.getElementsByClassName('left')[0];
var rightBtn = document.getElementsByClassName('right')[0];
rightBtn.onclick = function() {
k += imgWidth;
if (k === imgWidth * imgs.length) {
k = 0;
}
// 移动图片
imgBox.style.transform = `translateX(-${k}px)`;
// 改变按钮颜色
for (var i = 0; i < btnChild.length; i++) {
btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
}
btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
}
leftBtn.onclick = function() {
k -= imgWidth;
if (k < 0) {
k = imgWidth * (imgs.length - 1);
}
imgBox.style.transform = `translateX(-${k}px)`;
// 改变按钮颜色
for (var i = 0; i < btnChild.length; i++) {
btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
}
btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
}
</script>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
