原生js实现轮播图效果

注意图片大小最好设置成统一规格

                                <!-- 轮播图 --><div class="swiper-wrapper"><div class="swiper-slide"><div class="swapimg" id="swapimg0"><a href=""><img src="img/bgimg1.webp" alt=""></a></div><div class="swapimg" id="swapimg1"><a href=""><img src="img/bgimg2.jpg" alt=""></a></div><div class="swapimg" id="swapimg2"><a href=""><img src="img/bgimg3.jpg" alt=""></a></div><div class="swapimg" id="swapimg3"><a href=""><img src="img/bgimg4.jpg" alt=""></a></div><!-- 左右翻页按钮 --><div id="leftbtn" class="iconfont swiper-btn button-left"></div><div id="rightbtn" class="iconfont swiper-btn button-right"></div></div>  </div>

接下来就是用js操控这些图片实现轮播效果了

这是主要逻辑部分

//首先获取元素
var wrap = document.querySelector(".swiper-slide");
//再定义一个变量用来存储下标
var indexi = 0;
//我这里是用透明度来控制轮播效果
function swap(){//首先充值所有图片的初始样式，使所有图片的初始透明度都为for(i=0;i<wrap.length;i++){wrap.children[i].style.opacity=0;}//判断一下当图片到达最边缘图片时返回，否则图片继续下一张if(indexi>=3){indexi=0;}else if(indexi<0){indexi=3;}else{indexi++;};wrap.children[indexi].style.opacity=1}

接下来就是进行一些操作让图片实现自动播放，这里就需要用到定时器

//定时器每隔3s执行一遍swap（即每3sindex++）
var timeImg = setInterval(swap,3000);
//定义一个变量用来重启定时器之后清楚定时器（重启之后的定时器并不是之前自动播放的定时器）
var timeer ="";
//鼠标移入轮播区域取消定时器
wrap.onmouseover =function(){//一劳永逸，因为我们并不知道我们此时需要清楚哪一个定时器，索性直接全部清楚clearInterval(timeImg);clearInterval(timeer);
}
//移除重启定时器
wrap.onmouseout =function(){timeer = setInterval(swap,3000);
}

接下来是实现左右按钮翻页功能

//获取到左右翻页按钮
var leftbtn = document.getElementById("leftbtn");
var rightbtn = document.getElementById("rightbtn");
//绑定翻页事件
//这里我直接复制了swap(),只是修改了index--
leftbtn.onclick =function(){for(i=0;i<4;i++){wrap.children[i].style.opacity=0;}if(indexi<=0){indexi=3;}else{indexi--;}wrap.children[indexi].style.opacity=1
}
//向右翻页的逻辑与自动播放是一样的，所以可以直接调用swap()
rightbtn.onclick= function(){swap();
}

原生js实现轮播图效果相关推荐

史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
原生js横幅广告轮播图
手把手原生js简单轮播图原生js实现图片轮播效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
原生js实现轮播图-滑入滑出效果
滑入滑出轮播图 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
js轮播图片小圆点变化_原生js实现轮播图(两种方法)
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
原生JS实现轮播图方法总结
方法总结: 方法一: 利用绝对定位absolute偏移量的改变来实现具有往左往右滑动的效果演示代码: 位移滑动轮播图1 方法二: 利用 display/opacity/visibility状态切换 ...

原生js实现轮播图效果

原生js实现轮播图效果相关推荐

最新文章

热门文章