JavaScript实现首页图片轮播图效果
更新时间：2022年06月07日 11:15:58 作者： 肥学
这篇文章主要介绍了JavaScript实现首页图片轮播图效果，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
一、轮番图
效果展示：
轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。
二、源码展示
设置body
<body>
<div class="m-view">
<div class="slide" style="left: -800px">
<img src="1.jpg" alt="4">
<img src="2.jpg" alt="0">
<img src="3.jpg" alt="1">
<img src="4.jpg" alt="2">
<img src="5.jpg" alt="3">
<img src="3.jpg" alt="4">
<img src="2.jpg" alt="0">
</div>
<div class="prev"><</div>
<div class="next">></div>
<div class="pointer">
<span class="button on" index="0"></span>
<span class="button" index="1"></span>
<span class="button" index="2"></span>
<span class="button" index="3"></span>
<span class="button" index="4"></span>
</div>
</div>样式设置
<style>
.m-view,.m-view .slide img{
position: relative;/*作为绝对定位的父元素*/
width: 500px;
height: 300px;
}
.m-view{
overflow: hidden;/*将超出该div的子元素隐藏*/
}
.m-view .slide{
position: absolute;
width: 500px;
height: 300px;
}
.m-view .slide img{
margin-right: -5px;
}
.m-view .prev,.m-view .next{
position: absolute;
top: 40%;
font: 60px/60px Microsoft YaHei;
color: #00BFFF;
}
.m-view .prev{
left: 10px;
}
.m-view .next{
right: 10px;
}
.m-view .pointer{
position: absolute;
bottom: 40px;
left: 33%;
}
.m-view .pointer span{
display: inline-block;/*水平排列*/
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 10px;
background-color: #00FF00;
}
.m-view .pointer .on{/*点亮当前图片对应的圆圈*/
background-color: #1E90FF;
}
img{
object-fit: contain;
}
</style>实现轮番
var view=document.getElementsByClassName('m-view')[0];
var slide=document.getElementsByClassName('slide')[0];
var prev=document.getElementsByClassName('prev')[0];
var next=document.getElementsByClassName('next')[0];
var button=document.getElementsByClassName('button');
var curIndex=0;//当前图片的索引位置
var toggled=true;//是否正在切换，true表明切换已完成，此时才能切换
/* Toggle函数实现切换一张图片的功能 */
function Toggle () {
var TIMER=50;//滑动一次所用的时间，它是setInterval的第二个参数
var time=800;//每切换一张图片总共用的时长
var times=time/TIMER;//每切换一张图片需滑动的次数
var stepLenth=800/times;//每次滑动的步长
var leftToggle=function () {
var t1=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
t1--;
if (!t1) {
clearInterval(interval);
curIndex--;
if (curIndex<0) {
slide.style.left=parseInt(slide.style.left)-4000+"px";
curIndex=4;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=0) {
button[curIndex-1].className="button on";
}else{
button[curIndex+4].className="button on";
}
var interval=setInterval(leftStep,TIMER);
};
};
var rightToggle=function () {
var t2=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
t2--;
if (!t2) {
clearInterval(interval);
curIndex++;
if (curIndex>4) {
slide.style.left=parseInt(slide.style.left)+4000+"px";
curIndex=0;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=4) {
button[curIndex+1].className="button on";
}else{
button[curIndex-4].className="button on";
};
var interval=setInterval(leftStep,TIMER);
};
}
this.leftToggle=leftToggle;//输出对外的接口
this.rightToggle=rightToggle;
};
var toggle=new Toggle();
prev.onclick=function () {
toggle.leftToggle();
};
next.onclick=function () {
toggle.rightToggle();
};
/* 点击圆圈跳转功能 */
for (var i = 0; i < button.length; i++) {
button[i].onclick=function () {
var newIndex=parseInt(this.getAttribute("index"));
if (newIndex!=curIndex) {
var distance=-800*(newIndex-curIndex);
slide.style.left=parseInt(slide.style.left)+distance+"px";
button[curIndex].className="button";
button[newIndex].className="button on";
curIndex=newIndex;
};
};
}
/* 自动播放功能，鼠标移上去停止播放，移开再次播放 */
var intervalo=setInterval(toggle.rightToggle,3000);
view.onmouseover=function () {
clearInterval(intervalo);
}
view.onmouseout=function () {
intervalo=setInterval(toggle.rightToggle,3000);
}到此这篇关于JavaScript实现首页图片轮播图效果的文章就介绍到这了,更多相关js 轮播图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等,下面这篇文章主要给大家介绍了关于JS事件监听与事件委托的相关资料,需要的朋友可以参考下2024-07-07
JavaScript ServiceWorker API的好处就是让WEB开发人员轻松的控制缓存。这篇文章主要为大家详细介绍了Javascript缓存API，感兴趣的小伙伴们可以参考一下2016-06-06
项目中遇到table表格单元格不整齐、错位等情况,下面这篇文章主要给大家介绍了关于uniapp中table表格设置宽度无效的原因以及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了JavaScript+canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
下面是完成后的预览图，可以看到，绘制一个表格，耗时0.005毫秒，也就是200分之一秒。效率我还是比较满意的！2010-07-07
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
这篇文章主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下2017-06-06
前端开发中,字符串处理是比较常见的,下面这篇文章主要给大家介绍了关于js中常见切割截取字符串的几种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
这篇文章主要介绍了在webstorm开发微信小程序之使用阿里自定义字体图标 的相关资料,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了js实现仿阿里巴巴城市选择框效果,实例分析了javascript结合css与数组实现城市选择框的方法,需要的朋友可以参考下2015-06-06
reveal.js是一款开源的HTML演示框架,由Hakim El Hattab开发,遵循MIT许可证,它支持嵌套幻灯片、Markdown、自动动画、PDF导出等多种功能,本文就来介绍一下如何使用,感兴趣的可以了解一下2024-09-09
最新评论