当前位置：
凯发k8官方网 >
前端技术
> javascript
>内容正文
javascript
超详细轮播图的三种实现方法html css javascript -凯发k8官方网
凯发k8官方网
收集整理的这篇文章主要介绍了
超详细轮播图的三种实现方法html css javascript
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
对代码不理解的可以参考我的个人视频
https://www.bilibili.com/video/bv1ja411y7ek/
1.带箭头焦点轮播图js完成版
1.1 html部分
1.2 css部分
* {margin: 0px;padding: 0px;list-style: none; }.wrap {position: relative;margin: 50px auto;width: 490px;height: 170px;overflow: hidden; }ul {position: absolute;top: 0;width: 600%;left: 0; }li {width: 490px;height: 170px;float: left; }/* 导航栏 */.left, .right {position: absolute;width: 20px;height: 30px;line-height: 30px;top: 50%;margin-top: -15px;background: rgba(0, 0, 0, .2);text-decoration: none;color: white;display: none; }.left {left: 0; }.right {right: 0;text-align: right; }/* 圆点 */#list {position: absolute;bottom: 10px;right: 10px; }#list li {float: left;background: #ccc;color: #fff;font-weight: bold;height: 20px;width: 20px;font-size: 15px;margin-right: 1px;line-height: 20px;text-align: center;border-radius: 50%; }#list .on {background: #088bcf;color: red; }1.3 js部分
window.addeventlistener('load', function() {var left = document.queryselector('.left');var right = document.queryselector('.right');var wrap = document.queryselector('.wrap');wrap.addeventlistener('mouseenter', function() {left.style.display = 'block';right.style.display = 'block';clearinterval(timer);timer = null;})wrap.addeventlistener('mouseleave', function() {left.style.display = 'none';right.style.display = 'none';timer = setinterval(function() {right.click();}, 2000);})// 动态生成圆点var ul = wrap.queryselector('ul');var ol = wrap.queryselector('ol');var wrapwidth = wrap.offsetwidth;for (var i = 0; i < ul.children.length; i) {// 创建节点var li = document.createelement('li');// 插入节点ol.appendchild(li);// 设置自定义属性li.setattribute('index', i);// 绑定点击事件li.addeventlistener('mouseover', function() {// 排他思想for (var i = 0; i < ol.children.length; i) {ol.children[i].classname = '';}this.classname = 'on';// 点击圆圈移动图片，ul//animate(obj,target,callback)// 获取轮播区域宽度var index = this.getattribute('index');num = index;circle = index;// console.log(index);// 拿到索引号// console.log(wrapwidth);animate(ul, -index * wrapwidth);})}// 设置当前类名ol.children[0].classname = 'on';// 克隆第一张图片var first = ul.children[0].clonenode(true);ul.appendchild(first);// 点击右侧按钮，滚动图片var num = 0;var circle = 0;var flag = true;right.addeventlistener('click', function() {if (flag) {flag = false;// 无缝滚动if (num == ol.children.length - 1) {ul.style.left = 0;num = 0;}num;animate(ul, -num * wrapwidth, function() {flag = true; //打开节流阀});// 点击按钮使圆圈相应变化circle;// 排他思想if (circle == ol.children.length) {circle = 0;}circlechange();}});// 左侧按钮left.addeventlistener('click', function() {if (flag) {flag = false;// 无缝滚动if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * wrapwidth 'px';}num--;animate(ul, -num * wrapwidth, function() {flag = true;});// 点击按钮使圆圈相应变化circle--;// 排他思想// if (circle < 0) {// circle = ol.children.length - 1;// }circle = circle < 0 ? ol.children.length - 1 : circle;circlechange();}})function circlechange() {for (var i = 0; i < ol.children.length; i) {ol.children[i].classname = '';}ol.children[circle].classname = 'on';}// 自动播放var timer = setinterval(function() {right.click();}, 2000);// 节流阀，防止轮播过快（回调函数）})js调用animate动画函数
function animate(obj, target, callback) {// console.log(callback); callback = function() {} 调用的时候 callback()// 先清除以前的定时器，只保留当前的一个定时器执行clearinterval(obj.timer);obj.timer = setinterval(function() {// 步长值写到定时器的里面// 把我们步长值改为整数 不要出现小数的问题// var step = math.ceil((target - obj.offsetleft) / 10);var step = (target - obj.offsetleft) / 10;step = step > 0 ? math.ceil(step) : math.floor(step);if (obj.offsetleft == target) {// 停止动画 本质是停止定时器clearinterval(obj.timer);// 回调函数写到定时器结束里面// if (callback) {// // 调用函数// callback();// }callback && callback();}// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetleft step 'px';}, 15); }代码1实现的效果是比较好的，自动生成圆点，节流阀，无缝滚动，代码也较完整
2.轮播图
2.1 html部分
2.2 css部分
* {padding: 0px;margin: 0px;list-style: none;}body {height: 2000px;}/*图片start*/#wrap {margin: 100px auto;width: 490px;height: 170px;overflow: hidden;position: relative;}ul li {width: 490px;height: 170px;}/*图片 end*//*数字start*/#list {position: absolute;bottom: 10px;right: 10px;}#list li {float: left;background-color: #f90;color: #fff;font-weight: bold;font-size: 15px;height: 20px;line-height: 20px;width: 20px;margin-right: 1px;text-align: center;border-radius: 50%;cursor: pointer;}#list .on {background: #088bcf;color: #fff;}/*两侧导航栏*/a {position: absolute;width: 20px;height: 30px;line-height: 30px;top: 50%;margin-top: -15px;background: rgba(0, 0, 0, .2);text-decoration: none;color: white;display: none;}.left {left: 0;/*border-top-right-radius: 15px;border-bottom-right-radius: 15px;*/}.right {right: 0;text-align: right;/*border-top-left-radius: 15px;border-bottom-left-radius: 15px;*/}#wrap:hover a {display: block;}2.3 js部分
var div = document.queryselector('div'),ul = document.queryselector('ul'),list = document.queryselector('#list'),lis = list.queryselectorall('li'),left = document.queryselector('.left'),right = document.queryselector('.right'),index = 0,timer = null;// 自动轮播function auto() {timer = setinterval(function() {index;if (index >= lis.length) {index = 0;}change(index)}, 2000)}auto();// 轮播函数，切换图片，切换圆点function change(curindex) {// ul偏移距离，切换图片，改变ul上边距实现图片切换效果ul.style.margintop = -170 * curindex "px";// 排他思想，切换圆点，让当前圆点添加on类名for (var i = 0; i < lis.length; i) {lis[i].classname = "";}lis[curindex].classname = "on";//更新索引index = curindex;}div.onmouseover = function() {ul.style.cursor = "pointer";// 鼠标移动到轮播区域时停止轮播clearinterval(timer);}// 离开时开启自动轮播div.onmouseout = auto;// 鼠标滑动到圆点对应id上时，切换到对应图片for (var i = 0; i < lis.length; i) {lis[i].index = i;lis[i].onmouseover = function() {change(this.index);}}var num = 0;var circle = 0;// 右侧按钮right.addeventlistener('click', function() {if (num == ul.children.length - 1) {ul.style.margintop = 0;num = 0;}ul.style.margintop = -170 * num "px";num;// 点击右侧按钮圆点跟着变化circle;console.log(ul.children.length);if (index == ul.children.length - 1) {circle = 0;}change(circle);});// 左侧按钮left.addeventlistener('click', function() {if (num == 0) {ul.style.margintop = -170 * num "px";num = ul.children.length - 1;}ul.style.margintop = -170 * num "px";num--;// 点击左侧按钮圆点跟着变化circle--;// console.log(ul.children.length);if (index == 0) {circle = ul.children.length - 1;}change(circle);})2轮播图代码实现比较简洁，也最容易理解，轮播图功能也基本实现了，
当然后期也可以改进添加
3.轮播图
3.1 html部分
3.2 css部分
* {margin: 0px;padding: 0px;list-style: none;}#main {margin: 100px auto;width: 750px;height: 315px;overflow: hidden;position: relative;}#banner li {width: 750px;height: 315px;}.banner-slide,img {width: 750px;height: 315px;}/*数字*/#dots {position: absolute;bottom: 10px;right: 10px;}#dots li {float: left;background-color: #f90;color: #fff;font-weight: bold;font-size: 15px;height: 20px;line-height: 20px;width: 20px;margin-right: 1px;text-align: center;border-radius: 50%;cursor: pointer;}#dots .li1 {color: red;}/*按钮*/.move {position: absolute;width: 20px;height: 30px;line-height: 30px;top: 50%;margin-top: -15px;background: rgba(0, 0, 0, .2);text-decoration: none;color: white;display: none;}#next {text-align: right;right: 0;}#main:hover .move {display: block;}.move:hover {color: orange;}3.3 js部分
var main = document.queryselector('#main');var pics = document.queryselector('#banner').queryselectorall('div');var dots = document.queryselector('#dots').queryselectorall('li');var banner = document.queryselector('#banner');var prev = document.queryselector('#prev');var next = document.queryselector('#next');var len = pics.length;var index = 0;var timer = null;function solide() {// 鼠标移动到main区域停止计时器main.onmouseover = function() {if (timer) {clearinterval(timer);}}banner.onmouseout = function() {// 鼠标离开main区域开启计时器timer = setinterval(function() {index;if (index >= len) {index = 0;}changimg();}, 2000);}banner.onmouseout();// 圆点切换for (var j = 0; j < len; j) {dots[j].index = j;dots[j].onmouseover = function() {index = this.index;changimg();}}// 左键切换prev.onclick = function() {index--;if (index < 0) {index = len - 1;}changimg();}// 右键切换next.onclick = function() {index;if (index >= len) {index = 0;}changimg();}}solide();/*图片自动切换*/function changimg() {for (var i = 0; i < len; i) {pics[i].style.display = 'none';dots[i].classname = "";}pics[index].style.display = 'block';dots[index].classname = 'li1';}3的代码实现轮播通过修改图片和圆点样式来实现图片切换效果
比较新奇。也曾看过纯css实现图片切换
以上代码仅参考，你也可以写出自己的轮播图代码，让它实现的效果
比我下面这张更好
效果图如下
总结
以上是凯发k8官方网为你收集整理的超详细轮播图的三种实现方法html css javascript的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： github/gitee码云文件上传提交
- 下一篇： 记录输入框本地记录用户名效果