原生js+css 实现轮播图完整代码

利用原生的js实现轮播图，可以添加到自己的UI库中，在以后的项目中对其进行修改然后添加到已有项目中。

先写出css部分和html部分，直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3</title>
</head>
<style>* {padding: 0;margin: 0;list-style: none;border: 0;}.all {position: relative;width: 500px;height: 200px;border: 1px solid black;padding: 7px;margin: 100px auto;}.silder {overflow: hidden;width: 500px;height: 200px;position: relative;}.silder ul {position: absolute;top: 0;width: 3000px;height: 200px;}.silder li {height: 200px;float: left;}.silder ol {position: absolute;bottom: 5px;right: 20px;height: 20px;}.silder ol li {margin: 0 5px;background: #fff;line-height: 20px;width: 20px;height: 20px;text-align: center;}.current {background: yellow !important;}.arr span{width: 40px;height: 40px;position: absolute;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}.left{left: 5px;}.right{right: 5px;}
</style>
<body>
<div class="all"><div class="silder" id="silder"><ul><li><img src="./img/1.jpg" width="500" height="200"/></li><li><img src="./img/2.jpg" width="500" height="200"/></li><li><img src="./img/3.jpg" width="500" height="200"/></li></ul><ol></ol><div class="arr"><span class="left"><</span><span class="right">></span></div></div>
</div>
</body>
<script>
</script>
</html>

轮播图的主体思想：设置了ul的position为absolute，然后通过改变left，拉动图片在silder框中显示不同的内容

轮播图步骤分解
1、最简单的轮播图，是图片1、2、3定时更换，那么我们实现
图片1——>图片2——>图片3——>图片1
我们在script标签加入以下代码

 window.onload=function () {var silder=document.getElementById('silder')var ul=silder.children[0]var imgWidth=silder.offsetWidthvar key=0;setInterval(function () {key++if(key>ul.children.length-1){key=0;}ul.style.left=-key*imgWidth+'px'},1000)}

这样子的是一个独立更换图片的轮播图，如果我们想要丝滑地更换图片，如下

2、丝滑地切换图片
想要丝滑地切换图片，主要思想：设置定时器，一点点移动图片（ul的绝对定位位置即left属性）直到移动到最后的定位位置，取消定时器
问题：那么最后一张图片和第一张，怎么连接起来呢？
解决：在最后一张放上第一张图片，然后内部偷梁换柱定位到之前即可

 window.onload=function () {var silder=document.getElementById('silder')var ul=silder.children[0]var imgWidth=silder.offsetWidthvar key=0;// 添加第一张图到最后ul.appendChild(ul.children[0].cloneNode(true))setInterval(function () {key++var innerTimer;var speed=-10;// 切换图片时每次移动距离innerTimer=setInterval(function () {//距离目标还需移动distance pxvar distance=Math.abs(key*imgWidth)-Math.abs(ul.offsetLeft)// 如果distance距离目的地不够再微移一次，则停止微移if(distance<Math.abs(speed)){clearInterval(innerTimer)ul.style.left=-key*imgWidth+'px'if(key===ul.children.length-1){//如果是从最后一张图开始移动，则偷梁换柱到第一张图key = 0;ul.style.left=0}}else{ul.style.left=ul.offsetLeft+speed+'px'}},10)},1000)}

3、添加图片的数字导航及鼠标移入停止轮播
代码如下

var silder = document.getElementById('silder')var ul = silder.children[0]var imgWidth = silder.offsetWidthvar ol = silder.children[1]var globalTimer, key = 0;window.onload = function () {for (var i = 0, len = ul.children.length; i < len; i++) {var newLi = document.createElement('li')const index = i// 给数字下标设置鼠标移入事件，若newLi.onmouseover = function () {// 取消轮播定时器，clearInterval(globalTimer)setLiCurrent(index)key = index;animate(-key*imgWidth)};newLi.innerHTML = i + 1;ol.appendChild(newLi)}// 初始化选中的下标setLiCurrent(0)// 添加第一张图到最后ul.appendChild(ul.children[0].cloneNode(true))// 播放轮播图globalTimer = setInterval(autoPlay, 1000)silder.onmouseover = function () {clearInterval(globalTimer)}silder.onmouseout = function () {globalTimer = setInterval(autoPlay, 1000)}}function setLiCurrent(index) {for (var i = 0, len = ol.children.length; i < len; i++) {ol.children[i].className = ''}ol.children[index].className = 'current'}var ulTimerfunction animate(goal) {clearInterval(ulTimer)var distance = goal - ul.offsetLeft;const speed = distance > 0 ? 10 : -10ulTimer = setInterval(function () {if (Math.abs(goal - ul.offsetLeft) >= Math.abs(speed)) {ul.style.left = ul.offsetLeft + speed + 'px'} else {ul.style.left = goal}}, 10)}function autoPlay() {key++if(key>ul.children.length-1){ul.style.left=0key=1;}animate(-key*imgWidth)setLiCurrent(key>ol.children.length-1?0:key)}

4、添加左右滑动按钮
代码如下

var silder = document.getElementById('silder')var ul = silder.children[0]var imgWidth = silder.offsetWidthvar ol = silder.children[1]var silder_btn = silder.children[2]var globalTimer, key = 0;window.onload = function () {for (var i = 0, len = ul.children.length; i < len; i++) {var newLi = document.createElement('li')const index = i// 给数字下标设置鼠标移入事件，若newLi.onmouseover = function () {// 取消轮播定时器，clearInterval(globalTimer)setLiCurrent(index)key = index;animate(-key * imgWidth)};newLi.innerHTML = i + 1;ol.appendChild(newLi)}// 初始化选中的下标setLiCurrent(0)// 对滑动按钮进行点击事件注册silder_btn.children[0].onclick = function () {console.log(key)key = key - 1 >= 0 ? key - 1 : 0animate(-key * imgWidth)setLiCurrent(key)}silder_btn.children[1].onclick = function () {console.log(key)key = key + 1 >= ol.children.length-1?ol.children.length-1: key + 1animate(-key * imgWidth)setLiCurrent(key)}// 添加第一张图到最后ul.appendChild(ul.children[0].cloneNode(true))// 播放轮播图globalTimer = setInterval(autoPlay, 1000)silder.onmouseover = function () {clearInterval(globalTimer)setSilderBtn('block')}silder.onmouseout = function () {globalTimer = setInterval(autoPlay, 1000)setSilderBtn('none')}}function setLiCurrent(index) {for (var i = 0, len = ol.children.length; i < len; i++) {ol.children[i].className = ''}ol.children[index].className = 'current'}var ulTimerfunction animate(goal) {clearInterval(ulTimer)var distance = goal - ul.offsetLeft;const speed = distance > 0 ? 10 : -10ulTimer = setInterval(function () {if (Math.abs(goal - ul.offsetLeft) >= Math.abs(speed)) {ul.style.left = ul.offsetLeft + speed + 'px'} else {ul.style.left = goal}}, 10)}function autoPlay() {key++if (key > ul.children.length - 1) {ul.style.left = 0key = 1;}animate(-key * imgWidth)setLiCurrent(key > ol.children.length - 1 ? 0 : key)}function setSilderBtn(option) {for (var i = 0, len = silder_btn.children.length; i < len; i++) {silder_btn.children[i].style.display = option}}

至此，整个轮播图就算已经完工了

原生js+css 实现轮播图完整代码相关推荐

JS原生实现简单的轮播图(完整代码,一看就懂)
实现完后的效果图: 实现思路: 先实现能左右箭头点击能实现图片的更换,也就是五张图片先隐藏然后看一下当前要现在第几张就让它显示,其他四张隐藏. 需要注意的地方是当前图片是第一张或第五张的时候我们要加判 ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
HTML轮播图完整代码 (原生Javascript）
HTML轮播图完整代码 (原生Javascript) <!DOCTYPE html> <html><head><meta charset="utf- ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
单机按钮来图片轮播_原生js如何实现轮播图效果？
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
js判断定时器是否启动_原生js如何做出轮播图的效果
<div class="box"><ul><li class="active"><img src="./im ...
原生JS实现小米轮播图和网易云轮播图
文章目录小米轮播图网易云轮播图小米轮播图实现功能: 定时切换(2s) 点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点,并进行相应的切换效果: 代码如下: <!DO ...

原生js+css 实现轮播图完整代码

轮播图的主体思想：设置了ul的position为absolute，然后通过改变left，拉动图片在silder框中显示不同的内容

至此，整个轮播图就算已经完工了

原生js+css 实现轮播图完整代码相关推荐

最新文章

热门文章

原生js+css 实现轮播图 完整代码

轮播图的主体思想：设置了ul的position为absolute，然后通过改变left，拉动图片在silder框中显示不同的内容

至此，整个轮播图就算已经完工了

原生js+css 实现轮播图 完整代码相关推荐

最新文章

热门文章

原生js+css 实现轮播图完整代码

原生js+css 实现轮播图完整代码相关推荐