预览：

应用 HTML + CSS + JS

JS代码分析如下：

html代码比较简短，这里用js生成标签元素，init函数
btnChange函数主要是实现底部的按钮的动态效果
focusControl函数用于设置左右焦点
animate函数用于实现轮播图动画效果

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>Document</title><link rel="stylesheet" href="./css/index.css">
</head><body><div class="content"><ul id="carousel"></ul><ul id="btn"></ul><div id="focus"><div id="left">&lt;</div><div id="right">&gt;</div></div></div><script src="./js/index.js"></script>
</body></html>

CSS

*{margin: 0px;padding: 0px;
}body{background-color: rgba(7, 98, 194, 0.877);
}.content{width: 960px;height: 540px;border: 5px solid rgb(0, 173, 186);margin-left: auto;margin-right: auto;margin-top: 100px;position: relative;overflow: hidden;
}#carousel{list-style: none;height: 540px;width: 11520px;position: absolute;left: 0px;
}#carousel>li{float: left;
}#carousel>li>img{width: 960px;height: 540px;
}#btn{list-style: none;position: absolute;top: 488px;left: 180px;
}#btn>li{height: 40px;width: 40px;background-color: rgba(0, 0, 0, 0.3);float: left;line-height: 40px;text-align: center;margin-left: 10px;color: #fff;border-radius: 50%;border: 3px solid rgb(0, 173, 186);cursor: pointer;
}#btn>.current{background-color: rgb(0, 192, 203);
}#left,#right{height: 100px;width: 50px;background: rgba(0, 0, 0, 0.3);line-height: 100px;text-align: center;font-size: 50px;color: #999;position: absolute;top: 50%;transform: translate(0,-50%);cursor: pointer;
}#focus{display: none;
}#left{left: 0px;border-bottom-right-radius: 5px;border-top-right-radius: 5px;
}
#right{right: 0px;border-bottom-left-radius: 5px;border-top-left-radius: 5px;
}#left:hover{color: #fff;
}#right:hover{color: #fff;
}

JS

var carousel = document.getElementById("carousel");
var btn = document.getElementById("btn");
var contentCarousel = document.getElementsByClassName("content")[0];
var focusPoint = document.getElementById("focus");
var leftFocus = document.getElementById("left");
var rightFocus = document.getElementById("right");
var imageWidth, pic = 0, btnNum = 0;
var timer = null;
// 初始化页面
function init() {// 初始化 carouselfor (var i = 0; i < 11; i++) {var li = document.createElement("li");var img = document.createElement("img");img.setAttribute("src", "./images/img" + (i + 1) + ".jpg");li.appendChild(img);carousel.appendChild(li);}// 将第一张图片 clone 到最后var firstLi = carousel.firstChild.cloneNode(true);carousel.appendChild(firstLi);// 初始化 btnfor (var i = 0; i < carousel.children.length - 1; i++) {var li = document.createElement("li");li.innerHTML = i + 1;btn.appendChild(li);}btn.children[0].className = 'current';imageWidth = carousel.children[1].offsetLeft;
}// 按钮随鼠标改变
function btnChange() {for (var i = 0; i < btn.children.length; i++) {btn.children[i].index = i;btn.children[i].onclick = function () {for (var j = 0; j < btn.children.length; j++) {btn.children[j].className = '';}pic = this.index;btnNum = this.index;this.className = 'current';var target = - pic * imageWidth;animate(carousel, target);}}
}// 控制左右焦点的出现消失
function focusControl() {contentCarousel.onmouseenter = function () {focusPoint.style.display = "block";clearInterval(timer);}contentCarousel.onmouseleave = function () {focusPoint.style.display = "none";timer = setInterval(rightFocus.onclick, 2000);}// 左焦点点击事件leftFocus.onclick = function () {if (pic <= 0) {pic = carousel.children.length - 1;carousel.style.left = -(carousel.children.length - 1) * imageWidth + 'px';}pic--;var target = -pic * imageWidth;animate(carousel, target);btnNum--;if (btnNum < 0) btnNum = carousel.children.length - 2;for (var j = 0; j < btn.children.length; j++) {btn.children[j].className = '';}btn.children[btnNum].className = 'current';}// 右焦点点击事件rightFocus.onclick = function () {if (pic >= carousel.children.length - 1) {pic = 0;carousel.style.left = 0;}pic++;var target = -pic * imageWidth;animate(carousel, target);for (var j = 0; j < btn.children.length; j++) {btn.children[j].className = '';}btnNum++;if (btnNum >= carousel.children.length - 1) {btnNum = 0;}btn.children[btnNum].className = 'current';}// 设置定时器用于自动播放timer = setInterval(rightFocus.onclick, 2000);
}// 动画效果
// function animate(obj, target) {//   clearInterval(obj.timer);
//   obj.timer = setInterval(function () {//     var leader = obj.offsetLeft;
//     var step = 30;
//     step = leader < target ? step : -step;
//     if (Math.abs(leader - target) >= Math.abs(step)) {//       leader += step;
//       obj.style.left = leader + 'px';
//     } else {//       obj.style.left = target + 'px';
//       clearInterval(obj.timer);
//     }
//   }, 15)
// }// 函数覆盖，缓动效果
function animate(obj, target) {clearInterval(obj.timer);obj.timer = setInterval(function () {var leader = obj.offsetLeft;var step = (target - leader) / 30;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader += step;obj.style.left = leader + 'px';if (leader === target) {clearInterval(obj.timer);}}, 10)
}init();
btnChange();
focusControl();

web 完整轮播图前端轮播图详细相关推荐

轮播图最后一张图结束如何平缓回到第一张_产品经理早期如何学习？
关于这个问题,多数同学学习的目的是就业,大学里面也没有产品经理专业,所以不会去考学分,也不需要考证,更不需要考研.产品经理是一个职位,我们学习的目的是如何能够用所学到的能力去就业,去工作.如果达到工作 ...
vue pc端商品轮播图_轮播图高点击商品图
轮播图由背景,商品图,文案三大部分组成,其中商品图是轮播图的主体内容,在轮播主图中,能不能通过一张商品图呈现出商品信息或者卖点,是影响点击率高低的重要因素.本期内容,我们将从商品图出发,为大家讲解的轮 ...
【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤导入 ...
转~~前端轮播简单实现啵啵啵！！！
转~~前端轮播简单实现啵啵啵!!! 2016-09-21 14:32:53 需要实现的效果----> 新闻,shopping ,物品的轮播展示,鼠标点击锁定. 效果图 ...
前端轮播插件banner
写了一个轮播图滑动的动态效果,需要的码友可以来用哦,通过此js脚本可以配置轮播图是由有自动轮播,是否有左右按钮,配置轮播滑动的时长,是否可以通过页码点击来切换轮播图,轮播图页码显示的问题等. gith ...
九宫图-图片轮播-兼容IE8和Chrome浏览器
在线测试打包下载九宫图-图片轮播-兼容IE8和Chrome浏览器
js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
一键生成轮播图，轮播图插件
一键生成轮播图,轮播图插件简介写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
uni-app：多功能轮播图，堆叠试轮播，文本轮播，图文轮播
插件地址[前往] mosowe-swiper:适用于uni-app的轮播图插件轮播组件,本插件兼容H5.APP.微信小程序.支付宝小程序组件功能普通轮播(文本.图片,图文轮播,支持上下.左右轮播 ...

web 完整轮播图前端轮播图详细

web 完整轮播图前端轮播图

预览：

应用 HTML + CSS + JS

HTML

CSS

JS

web 完整轮播图前端轮播图详细相关推荐

最新文章

热门文章

web 完整轮播图 前端 轮播图 详细

web 完整轮播图 前端 轮播图

预览：

应用 HTML + CSS + JS

HTML

CSS

JS

web 完整轮播图 前端 轮播图 详细相关推荐

最新文章

热门文章

web 完整轮播图前端轮播图详细

web 完整轮播图前端轮播图

web 完整轮播图前端轮播图详细相关推荐