js制作轮播图效果
更新时间：2021年10月18日 10:35:50 作者：楠瓜楠瓜南
这篇文章主要为大家详细介绍了js制作轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轮播图在前端开发中我认为是一个比较重要的点，因为包含了很多原生js知识点，以下是我学习制作轮播图的过程
难点：
1、如何让底下圆圈和图片所对应自动动态生成
2、如何让底下圆圈和图片所对应的起来
3、上一页和下一页所在盒子所移动的距离
4、图片切换时的渐出动画效果
5、节流阀的概念
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: white;
line-height: 50px;
text-align: center;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 700px;
height: 300px;
margin: auto;
overflow: hidden;
}
.tb-promo .imgg {
position: absolute;
top: 0;
left: 0;
width: 3000px;
}
.tb-promo .imgg li {
float: left;
}
.tb-promo .imgg li img {
width: 700px;
height: 300px;
}
.tb-promo .prev {
display: none;
position: absolute;
top: 125px;
left: 0;
width: 25px;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
z-index: 999;
}
.tb-promo .prev:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.tb-promo .next {
display: none;
position: absolute;
top: 125px;
right: 0;
width: 25px;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
z-index: 999;
}
.tb-promo .next:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.tb-promo .promo-nav {
position: absolute;
top: 270px;
left: 50%;
margin-left: -40px;
height: 25px;
}
.tb-promo .promo-nav li {
float: left;
width: 16px;
height: 16px;
background-color: white;
border-radius: 8px;
margin: 4px;
}
.tb-promo .promo-nav .one {
background-color: tomato;
}
</style>
</head>
<body>
<div class="tb-promo">
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
<ul class="imgg">
<li><img src="./61.jpeg" alt=""></li>
<li><img src="./62.jpeg" alt=""></li>
<li><img src="./63.jpeg" alt=""></li>
</ul>
<ol class="promo-nav">
</ol>
</div>
<script>
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var tbpromo = document.querySelector('.tb-promo');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
//动画函数
function animate(obj, target) {
clearInterval(obj.timer);//调用防止点击多次调用
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step); //正直和负值取整
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 10)
}
//生成动态导航圈圈
var tbpromWidth = tbpromo.offsetWidth;
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
//记录索引号 通过自定义属性
li.setAttribute('index', i);
//排他思想 写圆圈变色
li.addEventListener('click', function () {
//清除所有圈圈颜色
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'one';
var index = this.getAttribute('index');
//点击li 把li 的索引号分别给控制变量
num = index;
circle=index;
animate(ul, -index * tbpromWidth);
})
ol.children[0].className = 'one';
}
//克隆第一张图片li放在最后面 无缝切换
var frist = ul.children[0].cloneNode(true);
ul.appendChild(frist);
//隐藏显示 下一页上一页
tbpromo.addEventListener('mouseenter', function () {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer=0;//清除定时器变量
})
tbpromo.addEventListener('mouseleave', function () {
prev.style.display = 'none';
next.style.display = 'none';
timer=setInterval(function () {
next.click();//手动调动点击事件
},1500)
})
//next prev动画
var num = 0;
//控制圆圈
var circle = 0;
//节流阀变量
var flag=true;
//下一页
next.addEventListener('click', function () {
//最后一张进行判断 ul复原 left为0
if (num == (ul.children.length - 1)) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * tbpromWidth);
circle++;
if (circle == 3) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'one';
})
//上一页
prev.addEventListener('click', function () {
if (num == 0) {
num = ul.children.length-1;
ul.style.left = -num*tbpromWidth+'px';
}
else {
num--;
animate(ul, -num * tbpromWidth);
circle--;
if (circle <0) {
circle = 2;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'one';
}
})
//自动播放
var timer=setInterval(function () {
next.click();//手动调动点击事件
},2000)
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章介绍了JS获取地址栏参数的小例子，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家详细介绍了Bootstrap表格的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了JavaScript日期对象(Date)基本用法,结合实例形式较为详细的分析了JavaScript日期对象(Date)获取日期、时间戳、年月日、星期及日期比对等操作技巧,需要的朋友可以参考下2017-01-01
下面小编就为大家带来一篇js判断数组key是否存在(不用循环)的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
整理的比较全的event对像在ie与firefox浏览器中的区别
event对像在IE与FF中的区别，本文整理了很多，个人感觉还是比较全面的，需要的朋友可以收藏下2013-11-11
这篇文章介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下2013-08-08
这篇文章主要介绍了小程序使用wxs解决wxml保留2位小数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了BootStrap下拉菜单和滚动监听插件实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了JavaScript函数的使用教程，JavaScript函数是被设计为执行特定任务的代码块。JavaScript函数会在某代码调用它时被执行。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
BootStrap Validator使用注意事项(必看篇)
针对bootstrap2和bootstrap3有不同的版本，在使用bootstrap validator时需要了解其注意事项，下面小编把我遇到的注意事项分享给大家，供大家参考2016-09-09
最新评论