史上最简单的原生JS实现轮播图效果

原生JS实现轮播图效果

上篇文章我们说到了怎样利用原生JS实现Tab切换的效果，现在我们来说一下Tab切换的“升级版”。如何利用原生JS实现轮播图效果。如图：

HTML代码：

    <div class="box"><img src="img/0.jpg" alt=""><!-- <img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""> --><div class="btn btn_l"> &lt; </div><div class="btn btn_r"> &gt; </div><ul class="points"><li class="blue"></li><li></li><li></li><li></li></ul></div>

CSS代码：

    *{margin: 0;padding: 0;list-style: none;}.box{width: 500px;height: 300px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}img{width: 500px;height: 300px;}.btn,.points{position: absolute;cursor: pointer;}.btn{width: 20px;height: 40px;background: green;color: white;font-size: 20px;text-align: center;line-height: 40px;top: 50%;margin-top: -20px;z-index: 999;}.btn_l{left: 0;}.btn_r{right: 0;}.points{width: 100px;height: 20px;border-radius: 20px;background: skyblue;left: 50%;margin-left: -50px;bottom: 30px;}.points li{width: 15px;height: 15px;border-radius: 50%;background-color: red;float: left;margin: 2.5px 5px;}.points li.blue{background: blue;}

JS代码：

    // 1.点击4个点   切换成对应的图片// 2.点击左右按钮   图片切换// 3.切换图片时  改变图片的src// 4.左右按钮 和 下面四个点  需要控制同一个变量// 1.获取元素var oImg=document.getElementsByTagName("img")[0];var oBtn_l=document.getElementsByClassName("btn_l")[0];var oBtn_r=document.getElementsByClassName("btn_r")[0];var aLi=document.getElementsByTagName("li");// 2.声明全局变量var index=0;function point(){for(var i=0;i<aLi.length;i++){aLi[i].className="";}aLi[index].className="blue";}// 3.点击左按钮   index--   0临界点oBtn_l.onclick=function(){// if(index==0){//     index=3;// }else{//     index--;// }index==0?index=3:index--;oImg.src="img/"+index+".jpg";point();}// 4.点击右按钮   index++   3临界点oBtn_r.onclick=function(){index==3?index=0:index++;oImg.src="img/"+index+".jpg";point();}// 5.下面4个点  for(var i=0;i<aLi.length;i++){aLi[i].a=i;//给li添加 自定义的属性    储存 i aLi[i].onclick=function(){index=this.a;oImg.src="img/"+index+".jpg";point(); }}// aLi[0].οnclick=function(){//     index=0;//     oImg.src="img/"+index+".jpg";//     point();// }// aLi[1].οnclick=function(){//     index=1;//     oImg.src="img/"+index+".jpg";//     point();// }// aLi[2].οnclick=function(){//     index=2;//     oImg.src="img/"+index+".jpg";//     point();// }// aLi[3].οnclick=function(){//     index=3;//     oImg.src="img/"+index+".jpg";//     point();// }

注意：写轮播图效果的时候需要注意一点，声明一个全局变量，使左右按钮，以及下边的几个切换点在点击时控制的是同一个变量在改变。

视频讲解链接：
https://www.bilibili.com/video/BV1L5411x7Ao/

史上最简单的原生JS实现轮播图效果相关推荐

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

史上最简单的原生JS实现轮播图效果

原生JS实现轮播图效果

史上最简单的原生JS实现轮播图效果相关推荐

最新文章

热门文章