轮播图详解（完整代码在最后）

01 先写出基本标签布局，这里用父级div嵌套子级ul和div标签。ul是存储图片，子级div是圆点导航的父级div。代码如下：

<div class="banner"><ul class="imglist"><li><img src="./banner/1.png" alt=""></li><li><img src="./banner/2.jpg" alt=""></li><li><img src="./banner/3.jpg" alt=""></li><li><img src="./banner/4.jpg" alt=""></li></ul><div class="cir"></div>
</div>

02 进行基本布局，css代码如下：

第一步先清除可能有的内外边距，然后进行布局

        *{padding: 0px;margin: 0px;}/* 可视边框的样式 */.banner{width: 600px;height: 350px;margin: auto;border: 10px solid #999;position: relative;overflow: hidden;}/* ul标签的样式 */.imglist{position: absolute;}li{list-style: none;margin-right: 10px;float: left;}img{width: 600px;height: 350px;}/* 圆点导航父级div标签的样式 */.cir{position: absolute;left: 50%;bottom: 15px;transform: translateX(-50%);}/* 圆点导航的设置 */.cir a{display: block;width: 15px;height: 15px;border-radius: 50%;background-color: green;margin-right: 10px;float: left;}/* 圆点导航点击后样式 */.cir a.hover{background-color: black;opacity: .5;}

03 编写javascript部分，首先获取对象，并定义变量

        var banner = document.querySelector('.banner');   //获取可视边框var imglist = document.querySelector(".imglist");  //获取ul标签var cir = document.querySelector('.cir');          //获取圆点导航父级divvar lis = imglist.children;                       //所有li标签在一个伪数组中var thisindex = 0;var flag = true;

04 在上面的css样式中，ul标签没有设置宽度，这里用图片的个数来获取宽度，并且以图片数目添加圆点导航。代码如下：

 //由图片width和个数获取ul的width
imglist.style.width = lis.length*610+'px';      //注意：01width是小写  02不要忘记加单位‘px’//根据图片个数添加圆点导航for (var i = 0; i < lis.length; i++) {var anode = document.createElement('a');    //创建<a></a>cir.appendChild(anode);                     //在父级div里面添加<a>}

05 圆点导航的点击事件。这里的第一行代码是为了后面的恢复圆点点击后效果设置的，后面注释有解释。

cir.children[0].classList.add('hover');     //页面必须先存在hover类//建立圆点导航anode和ul图片的对应关系for(var i=0; i<lis.length; i++){cir.children[i].setAttribute('index',i);     //li添加自定义属性'index'}//圆点点击事件cirClick();function cirClick(){cir.addEventListener('click',function(e){if(e.target.nodeName != 'A'){return false;}if(flag){                       //节流阀flag = false;thisindex = e.target.getAttribute('index');// imglist.style.left = -thisindex*610+'px';move(imglist,-thisindex*610,function(){flag = true;})cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）e.target.classList.add('hover');                            //圆点点击后样式}})  }

05 缓动函数，实现轮播图的图片的移动（由快到慢）。

            //缓动函数var num = 0;function move(box,target,callback){box.myTime = setInterval(function(){var osleft = box.offsetLeft;     //这里是属性，不能加()var num = (target-osleft) / 10;num = num>0 ? Math.ceil(num):Math.floor(num);if(osleft == target){clearInterval(box.myTime);callback && callback();}else{box.style.left = num+osleft+'px';}},30)}

08 实现轮播图的自动播放

            //自动轮播auto();function auto(){setInterval(function(){if(flag){flag = false;if(thisindex == lis.length){thisindex = 0;}move(imglist,-thisindex*610,function(){flag = true;})cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）cir.children[thisindex].classList.add('hover');thisindex++;}}, 2000);}

完整代码如下

在完整代码里面，再获取对象和定义变量后全部放在window.onload();函数中，使得页面加载完成后再执行轮播效果。

ps:有疑问可以评论看到会回复。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><style>*{padding: 0px;margin: 0px;}/* 可视边框的样式 */.banner{width: 600px;height: 350px;margin: auto;border: 10px solid #999;position: relative;overflow: hidden;}/* ul标签的样式 */.imglist{position: absolute;}li{list-style: none;margin-right: 10px;float: left;}img{width: 600px;height: 350px;}/* 圆点导航父级div标签的样式 */.cir{position: absolute;left: 50%;bottom: 15px;transform: translateX(-50%);}/* 圆点导航的设置 */.cir a{display: block;width: 15px;height: 15px;border-radius: 50%;background-color: green;margin-right: 10px;float: left;}/* 圆点导航点击后样式 */.cir a.hover{background-color: black;opacity: .5;}</style>
</head>
<body><div class="banner"><ul class="imglist"><li><img src="./banner/1.png" alt=""></li><li><img src="./banner/2.jpg" alt=""></li><li><img src="./banner/3.jpg" alt=""></li><li><img src="./banner/4.jpg" alt=""></li></ul><div class="cir"></div></div><script>var banner = document.querySelector('.banner');   //获取可视边框var imglist = document.querySelector(".imglist");  //获取ul标签var cir = document.querySelector('.cir');          //获取圆点导航父级divvar lis = imglist.children;                       //所有li标签在一个伪数组中var thisindex = 0;var flag = true;window.onload = function(){//由图片width和个数获取ul的widthimglist.style.width = lis.length*610+'px';      //注意：01width是小写  02不要忘记加单位‘px’//根据图片个数添加圆点导航for (var i = 0; i < lis.length; i++) {var anode = document.createElement('a');    //创建<a></a>cir.appendChild(anode);                     //在父级div里面添加<a>}cir.children[0].classList.add('hover');     //页面必须先存在hover类//建立圆点导航anode和ul图片的对应关系for(var i=0; i<lis.length; i++){cir.children[i].setAttribute('index',i);     //li添加自定义属性'index'}//圆点点击事件cirClick();function cirClick(){cir.addEventListener('click',function(e){if(e.target.nodeName != 'A'){return false;}if(flag){                       //节流阀flag = false;thisindex = e.target.getAttribute('index');// imglist.style.left = -thisindex*610+'px';move(imglist,-thisindex*610,function(){flag = true;})cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）e.target.classList.add('hover');                            //圆点点击后样式}})  }//自动轮播auto();function auto(){setInterval(function(){if(flag){flag = false;if(thisindex == lis.length){thisindex = 0;}move(imglist,-thisindex*610,function(){flag = true;})cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）cir.children[thisindex].classList.add('hover');thisindex++;}}, 2000);}//缓动函数var num = 0;function move(box,target,callback){box.myTime = setInterval(function(){var osleft = box.offsetLeft;     //这里是属性，不能加()var num = (target-osleft) / 10;num = num>0 ? Math.ceil(num):Math.floor(num);if(osleft == target){clearInterval(box.myTime);callback && callback();}else{box.style.left = num+osleft+'px';}},30)}     }</script>
</body>
</html>

轮播图详解（完整代码在最后）相关推荐

js轮播图片小圆点变化_纯js实现轮播图,详解(简单，无缝，小圆点,左右手动切换,自动轮动)...
无论用什么语言开发可视化界面,都有一个叫轮播图的东西.我们现在有个需求,如图: slideshow1.PNG 左右切换按钮默认为隐藏,当鼠标进入图片时,左右切换按钮时显示的,当鼠标离开图片时左右切换按 ...
jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写 ...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解自动播放+手动播放
轮播图已经成了页面开发中不可缺少的一部分,日常生活中随处都能见到轮播图的身影,例如平常我们购物的淘宝,京东等等,都靠着轮播图在一片有限的区域内展现出更多的商品.这也是前端程序员最早接触到的练手小项目 ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
jquery轮播图详解
我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...
JS完成轮播图（全部JS代码，自动轮播）
需求: 1.点击左右方向图标切换图片 2.点击图片中的小圆点切换对应图片 3.切换图片改变对应小圆点的颜色 4.鼠标离开时自动轮播,鼠标滑入停止轮播 5.不能有空白思路: 1.先布局,创建轮播图显示 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
轮播图高度自适应_干货！弘成教你写轮播图全自动适应封装代码
点击蓝字关注我们在弘成教育任UI讲师,带了几十个班数百个学生了,我发现学生们最头疼的不是网站界面的设计,各种网站的设计,专题页,详情页,店铺装修,他们都能设计得漂漂亮亮.也不是HTML+CSS的静 ...
原生js实现轮播图的思路、代码及知识点！
一.轮播图实现思路: 1.自动轮播: (1)使所有的图片的层级为0,并且li的背景颜色设置为默认颜色: (2)使当前下标的图片的层级为1,并且当前li的背景颜色设置为白色: (3)时间函数每隔1秒执行 ...

轮播图详解（完整代码在最后）

完整代码如下

轮播图详解（完整代码在最后）相关推荐

最新文章

热门文章