本篇内容主要讲解“怎么用原生JS实现简单的轮播图效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用原生JS实现简单的轮播图效果”吧!
实现效果:
功能需求:
1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理。
3.图片播放的同时,下面的小圆圈模块也跟随一起变化。
5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片。
轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法
(1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,a标签里面再放img;ul需要采用定位,目的是为了后面使用缓动画(要使用缓动画必须有定位),然后ul里面的li都浮动起来在一行显示,ul的宽度可以设置成轮播图宽度的600%(这里只要比400%大就可以,因为这里放的是四张轮播图),然后给轮播图模块设置overflow:hidden就只会展示一张图片了。下面小圆点采用绝对定位,左右两边按钮也采用绝对定位。
(2)功能1:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
非常简单,就是给轮播图模块添加mouseenter和mouseleave事件即可。
(3)功能2:根据图片张数动态添加小圆点
通过获得ul里面li的个数来判断一共需要添加多少个小圆点,但是这里要注意,因为后面需要实现轮播图效果,所以最后一张图片放的第一张图片,相当于会比原本的图片多一张,所以这里小圆点生成的个数是图片张数减一,通过document.createElement('li')创建小圆点,然后通过appendChild添加到小圆点列表中。
(4)功能3:点击右侧按钮一次,图片往左播放一张,左侧按钮同理。
这个功能是最复杂的功能,这个功能做好了,后面的自动播放功能就很简单了,那么现在来说说这个功能的思路:
(5)功能4:图片播放的同时,下面的小圆圈模块也跟随一起变化。
再声明一个变量circle,点击一次按钮,自增1,然后这个变量对应小圆点坐标,把当前坐标的小圆点的类改为current(即变色),但是要注意,在滚动到最后一张图片的时候,因为ul会快速不做动画跳到最左侧,同时把num设置为0,然后再进行num++执行滑动到第二张图片,相当于这一次点击操作执行了两个步骤:滑动到最左侧同时执行缓动画移动到第二张图片,这样看起来就会很顺畅,看起来像是从最后一张图片滚动到第一张图片。但是小圆点并没有最后一张图的坐标,也就是小圆点数量和图片数量并不是相等的,这样就会导致当滑动到最后一张图片(与第一张图片相同的那张图片)的时候小圆点一个都没有选中,所以需要提前判断是否滑动到最后一张,要是滑动到最后一张就把最后一个小圆点的类设置成current。
(6)功能5:点击小圆圈,可以播放相应的图片。
这个功能采用给小圆圈设置自定义属性实现。
(7)功能6:鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片。
这个功能其实就是鼠标离开的时候手动调用点击右边按钮的函数,放上去的时候就清除定时器即可。
完整代码如下:
<!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>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.w {
overflow: hidden;
position: relative;
width: 720px;
height: 454px;
margin: 200px auto;
}
ul li {
list-style: none;
}
.main .focus ul {
position: absolute;
left: 0;
top: 0;
width: 600%;
}
.main .focus ul li {
float: left;
}
.main .focus ul li img {
width: 720px;
}
a[class^='arrow'] {
/* 开始时隐藏箭头 */
display: none;
z-index: 1;
position: absolute;
cursor: pointer;
width: 30px;
height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
font-weight: 700;
background-color: rgba(0, 0, 0, .3);
}
.arrow-left {
left: 0;
top: 50%;
transform: translateY(-50%);
}
.arrow-right {
right: 0;
top: 50%;
transform: translateY(-50%);
}
.main .focus ol {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
border-radius: 15px;
background-color: rgba(255, 255, 255, .5);
}
.main .focus ol li {
cursor: pointer;
float: left;
margin: 6px 6.5px;
list-style: none;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
}
.main .focus .current {
background-color: #f76211;
}
</style>
</head>
<body>
<div class="main w">
<div class="focus">
<!-- 左边按钮 -->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-left"><</a>
<!-- 右边按钮 -->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-right">></a>
<!-- 轮播图部分 -->
<ul>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../upload/focus3.jpg" alt=""></a>
</li>
<!-- 这一张的作用是为了后面做无缝链接 -->
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../upload/focus.jpg" alt=""></a>
</li>
</ul>
<!-- 下面小圆点部分 -->
<ol class="circle">
</ol>
</div>
</div>
</body>
<script>
// 滑动函数
function moves(obj, target, callback) {
window.clearInterval(obj.timer);
obj.timer = window.setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
window.clearInterval(obj.timer);
if (callback) {
callback();
}
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15)
}
// 移动到图片上的时候左右的箭头才显示出来 离开后又隐藏
var focusing = document.querySelector('.focus');
// 获取左箭头
var arrowleft = document.querySelector('.arrow-left');
// 获取右箭头
var arrowright = document.querySelector('.arrow-right');
var ul = document.querySelector('ul');
// 获得图片张数
var len = ul.children.length;
// 动态生成下面的小圆点
var ol = document.querySelector('ol');
for (var i = 0; i < len - 1; i++) {
var newcircle = document.createElement('li');
ol.appendChild(newcircle);
}
// 把ol里面的第一个li的类名设置成current
ol.children[0].className = 'current';
// 收移动到focus的时候显示箭头
focusing.addEventListener('mouseenter', function() {
// 鼠标移动到图片的时候清除定时器
window.clearInterval(timer);
timer = null;
arrowleft.style.display = 'block';
arrowright.style.display = 'block';
})
// 鼠标离开又隐藏
focusing.addEventListener('mouseleave', function() {
// 鼠标离开又重新设置定时器
// 自动播放轮播图
timer = window.setInterval(function() {
// 手动调用点击事件
arrowright.click();
}, 2000)
arrowleft.style.display = 'none';
arrowright.style.display = 'none';
})
// 给每个小圆点设置自定义属性
for (var i = 0; i < len - 1; i++) {
ol.children[i].setAttribute('index', i);
}
// 点击哪个小圆圈哪个小圆圈就变色 -排他思想
for (var i = 0; i < len - 1; i++) {
ol.children[i].addEventListener('click', function() {
for (var j = 0; j < len - 1; j++) {
ol.children[j].className = '';
}
// 点击第几个小圆点ul就移动小圆点坐标乘以图片宽度
// alert(-(this.getAttribute('index') * ul.children[0].offsetWidth));
moves(ul, -this.getAttribute('index') * ul.children[0].offsetWidth)
num = this.getAttribute('index');
circle = this.getAttribute('index');
this.className = 'current';
// ul.style.left = "-720px";
})
}
// 点击右边箭头 设置一个num进行移动距离
var num = 0;
// 点击右边的箭头小圆圈也变色
var circle = 0;
arrowright.addEventListener('click', function() {
if (num == len - 1) {
ul.style.left = 0;
num = 0;
circle = 0
}
num++;
moves(ul, -num * ul.children[0].offsetWidth);
circle++;
for (var i = 0; i < len - 1; i++) {
ol.children[i].className = '';
}
// 在加到最后一张重复图片的时候就把第一个圆点变色
if (circle == len - 1) {
// alert('haha')
ol.children[0].className = 'current';
}
ol.children[circle].className = 'current';
})
// 点击左边箭头
arrowleft.addEventListener('click', function() {
if (num == 0) {
num = len - 1;
ul.style.left = -num * ul.children[0].offsetWidth;
circle = len - 1;
}
num--;
moves(ul, -num * ul.children[0].offsetWidth);
circle--;
for (var i = 0; i < len - 1; i++) {
ol.children[i].className = '';
}
// 在减到最后一张重复图片的时候就把第一个圆点变色
if (circle == 0) {
// alert('haha')
ol.children[0].className = 'current';
}
ol.children[circle].className = 'current';
})
// 自动播放轮播图
var timer = window.setInterval(function() {
// 手动调用点击事件
arrowright.click();
}, 2000)
</script>
</html>
到此,相信大家对“怎么用原生JS实现简单的轮播图效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。