超详细轮播图，让你彻底明白轮播图！

个人博客地址：http://www.zhsh666.xyz/

刚开始学JavaScript时候很多新手都会尝试写一些简单的小项目，轮播图应该是写的最多的。但是很多时候对于基础不是很好的新手，虽然参照别人的代码能写出来一些轮播图，但其中的一些细节和过程可能还是一知半解甚至不懂，我作为一个新手刚刚写了几种常见的轮播图，里面的各种细节也花了不少时间弄懂，这里为大家介绍一种简单易懂且很完善的轮播图写法。里面的细节我会一一详细说明，希望和各位初入JavaScript的小伙伴一起进步。

　　轮播图的思路其实很简单：就是用JavaScript来控制轮播的图片的样式，可以控制display：none or block 可以控制opacity：‘0’ or ‘1’ 也可以通过z-index来控制图片的摆放顺序。(注意：这里的图片一般是通过绝对定位放在一个div盒子里面，图片堆叠在一起)。思路很清晰，那么我们就来看看代码(代码是本人自己手写的)。具体细节我会在代码中一一解释：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}#main{width: 730px;height: 454px;margin: 100px auto;position: relative;}#main .scollimg{width: 730px;height: 454px;position: relative;}#main .scollimg img{position: absolute;top: 0;left: 0;}#main .btn{width: 730px;height: 220px;position: absolute;top:117px;left: 0;}#main .btn>div{width: 100px;height: 220px;background: #fff;opacity: 0;}#main .btn：hover>div{opacity: 0.35;}#main .btn #btnleft{position: absolute;top: 0;left: 0;}#main .btn #btnright{position: absolute;top: 0;right:0;}/*左右button里的三角形*/.triangle{margin-top: 50px;width: 0;height: 0;border-width:70px 40px;border-style: solid;}#main .btn #btnleft .triangle{border-color: transparent #ccc transparent  transparent;}#main .btn #btnright .triangle{margin-left: 20px;border-color: transparent transparent transparent #ccc;}#main .item{position: absolute;bottom: 30px;left: 70px;width: 200px;height: 16px;}#main .item span{width: 16px;height: 16px;background: #ccc;display: inline-block;border-radius: 50%;}#main .item span:hover{cursor: pointer;}</style>
</head>
<body><div id="main"><div class="scollimg"><img src="data:images/1.jpg" alt=""><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""></div><div class="btn"><div id="btnleft"><div class="triangle"></div></div><div id="btnright"><div class="triangle"></div></div></div><div class="item"><span></span><span></span><span></span></div></div><script type="text/javascript">window.onload=function(){autoMove('img','span');}//轮播图函数function autoMove(tagImg,tagSpan){var imgs=document.getElementsByTagName(tagImg);var spans=document.getElementsByTagName(tagSpan);//每次轮播后样式/*轮播到哪个位置，就对哪个位置的图片样式进行设置，首先让所有的图片样式opacity变为0，然后对移动到的位置的样式进行设置opacity为1*/function InitMove(index){for(var i=0;i<imgs.length;i++){imgs[i].style.opacity='0';spans[i].style.background='#ccc';}imgs[index].style.opacity='1';spans[index].style.background='red';}//第一次初始化InitMove(0);//轮播过程的变换函数/*前面已经初始化了图片最开始看到的效果，接着轮播的话会隐藏第一张出现第二张*这里count从1开始（图片的初始化位置是count为0的情况），count=1执行一次Init*Move(count),使第一张隐藏第二张出现，依次执行。当count==imgs.leghth时由于*图片最后一张的位置是imgs.length-1,所以此时把count置为0；相当于轮播图轮回*依次重新开始。*/var count=1;function fMove(){if(count==imgs.length){count=0;}InitMove(count);count++;}//设置自动轮播定时器；var scollMove=setInterval(fMove,2500);//点击移动图片；/*这里就是点击左右移动的button来让图片根据用户的点击左右移动；需要注意一点就*是每次点击左移动或右移动需要首先清除定时器，等移动完了在重新添加定时器不然的*话你点击移动后图片虽然该变了，但是由于定时器还没移动到这张图片上面，所以就需*要等待定时器移动到你移动到的那张图片上面让后才开始定时轮播。比如如果你从开始*就点击移动图片，一直移动到最后一张那么你就要等待两个定时器的时间才能看到自动*轮播。*/var btnleft=document.getElementById('btnleft');var btnright=document.getElementById('btnright');btnleft.onclick=function(){clearInterval(scollMove);if(count==0){count=imgs.length;}count--;InitMove(count);scollMove=setInterval(fMove,2500);};btnright.onclick=function(){clearInterval(scollMove);fMove();scollMove=setInterval(fMove,2500);}}</script>
</body>
</html>

这就是最基本的轮播图，效果基本没有什么问题。通用性强。

超详细轮播图，让你彻底明白轮播图！相关推荐

Jquery版轮播图超详细
目录主要功能介绍: 1.先搭建框架 2.html和css代码三.jquery代码原生js的轮播图也写过,如需观看请您移步我的其他文章~ 主要功能介绍: 鼠标移动到轮播图中显示左右按钮,轮播图片的 ...
超详细八大排序+基数排序（图文并茂+动图演示+C语言代码演示）
超详细八大排序+基数排序(图文并茂+动图演示+C语言代码演示) 插入排序-直接插入排序插入排序-希尔排序选择排序-直接选择排序选择排序-堆排序交换排序-冒泡排序交换排序-快速排序-三种方法( ...
maven配置阿里云_阿里云OSS PicGo 配置图床教程超详细
阿里云OSS和PicGo配置图床教程超详细废话不多说,直接开始购买阿里云OSS服务登录阿里云打开侧边栏,选择对象存储OSS,如下图: 对象存储界面右部选择创建Bucket,如下图所示: 之后 ...
win10图标变白纸_超详细的纯净版win10安装教程，手把手教你学会，小白秒变大神！...
最近很多用户问怎么安装纯净版的win10系统,那么今天针对这个问题,和大家分享一下超详细的纯净版win10安装教程,手把手教学,大伙们赶紧收藏哦! 如何安装?这一完整教程分为4个部分: 准备工作→系统 ...
css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构以8张图片的3D轮播图为例,它的基本H ...
java轮播图_RxJava 实现ViewPager的轮播图
前言在App中实现一个轮播图已经是很多产品的标配了,很多人都会想到使用ViewPager + Handler来完成轮播图的效果.但是在RxJava快速发展的情况下,已经可以使用RxJava来代替Ha ...
超详细超快的免费图床设置教程
[已失效:Gitee已禁止用户搭建图床]超详细超快的免费图床教程新的图床设置方案:https://blog.csdn.net/qq_44430911/article/details/12514235 ...
超详细的集合思维导图
超详细的集合思维导图本人自学期间做的笔记,感觉比较适合新手
撼龙图怎么开鸿蒙炁灵,【一人之下】新手入门必看攻略，萌新技巧超详细攻略...
<一人之下>新手该怎么玩呢?新手需要掌握什么技巧呢?小编为大家整理了<一人之下>新手入门超详细攻略,一起来看看吧. 一.装备 6件防具.1把武器.6个饰品.还有炁灵和铭文. 装 ...

超详细轮播图，让你彻底明白轮播图！

超详细轮播图，让你彻底明白轮播图！

超详细轮播图，让你彻底明白轮播图！相关推荐

最新文章

热门文章