使用JavaScript实现轮播图效果
更新时间：2022年01月07日 10:41:57 作者：我莫得感情_
这篇文章主要为大家详细介绍了使用JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下
纯js，不使用轮播图控件怎么做轮播图呢，往下看吧
效果图：
1.可点击小圆点切换图片
2.可点击左右按钮切换图片
3.可自动播放
先上CSS和HTML代码：
<body> <div class="main"> <div class="focus fl"> <a href="javascript:;" class="arrow-l"><</a> <a href="javascript:;" class="arrow-r"> > </a> <ul> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus.jpg" alt=""></a> </li> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus1.jpg" alt=""></a> </li> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus2.jpg" alt=""></a> </li> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus3.jpg" alt=""></a> </li> </ul> <ol class="circle"> </ol> </div> </div> </body>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
ol {
list-style: none;
}
.main {
width: 980px;
height: 455px;
margin-left: 440px;
margin-top: 10px;
}
.focus {
position: relative;
width: 721px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
list-style: none;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
</style>最后就是JS代码部分了
window.addEventListener('load', function() {
// 获取要使用到的元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
//鼠标移动到图片上，显示左右切换的按钮
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
//清除定时器，不再自动播放
clearInterval(timer);
timer = null; //清除定时器变量
});
//鼠标离开，左右切换按钮隐藏
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function() {
arrow_r.click();
}, 2000)
});
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
console.log(ol);
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
//创建自定义属性index
li.setAttribute('index', i);
//根据li（图片）的个数自动添加左下角的小圆点
ol.appendChild(li);
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
num = index;
circle = index;
animate(ul, -index * focusWidth);
})
}
ol.children[0].className = 'current';
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
var num = 0;
var circle = 0;
var flag = true;
//点击'>'进行图片向右切换
arrow_r.addEventListener('click', function() {
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
circle++;
if (circle == ol.children.length) {
circle = 0;
}
circleChange();
});
//点击'<'进行图片向左切换
arrow_l.addEventListener('click', function() {
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth);
circle--;
circle = circle < 0 ? ol.children.length - 1 : circle;
circleChange()
});
//清除样式函数，排他思想
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
//定时器+click（）实现自动播放
var timer = setInterval(function() {
arrow_r.click();
}, 2000)
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要跟大家分享了一次围绕setTimeout展开的前端面试经验，是一篇有意思的围绕setTimeout展开的前端开发考题，考察了for循环、定时器setTimeout()、JavaScript闭包、匿名函数和Promise等，一不小心你可能就会做错，快来看看你有没有掌握了上面的知识。2017-06-06
这篇文章主要介绍了如何使用JavaScript修改浏览器URL地址栏，需要的朋友可以参考下2013-10-10
Google韩国首页图标动画效果...2007-08-08
我们日常开发中经常需要用到图片上传功能,这篇文章主要给大家介绍了关于微信小程序实现图片上传功能的思路与源码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了javascript实现智能手环时间显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了vscode使用Prettier Code插件的详细教程,本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
使用原生js获取execl里面的值，想必有很多的朋友都不会吧，下面有个不错的方法主要是使用ActiveXObject来实现，感兴趣的朋友可不要错过2013-11-11
这篇文章主要介绍了Javascript中默认参数值的设置，很简单，但很实用，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了javascript 动态生成css代码的两种方法，有时候我们需要利用js来动态生成页面上style标签中的css代码,下面就给大家介绍两种方法，需要的朋友可以参考下2017-03-03
下面小编就为大家带来一篇老生常谈javascript的类型转换。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论