超详细轮播图的三种实现方法html+css+javascript
对代码不理解的可以参考我的个人视频
https://www.bilibili.com/video/BV1jA411Y7Ek/
1.带箭头焦点轮播图js完成版
1.1 html部分
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carouseltitle>
<link rel="stylesheet" href="css/index.css">
<script src="js/animate.js">script>
<script src="js/index.js">script>
head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:;"><img src="images/01.jpg">a>
li>
<li>
<a href="javascript:;"><img src="images/02.jpg">a>
li>
<li>
<a href="javascript:;"><img src="images/03.jpg">a>
li>
<li>
<a href="javascript:;"><img src="images/04.jpg">a>
li>
<li>
<a href="javascript:;"><img src="images/05.jpg">a>
li>
ul>
<a href="javascript:;" class="left">
<
a>
<a href="javascript:;" class="right">
>
a>
<ol id="list">
ol>
div>
body>
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 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
代码1实现的效果是比较好的，自动生成圆点，节流阀，无缝滚动，代码也较完整
2.轮播图
2.1 html部分
<div id="wrap">
<ul>
<li><img src="images/01.jpg">li>
<li><img src="images/02.jpg">li>
<li><img src="images/03.jpg">li>
<li><img src="images/04.jpg">li>
<li><img src="images/05.jpg">li>
ul>
<ol id="list" type="a">
<li class="on">1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ol>
<a href="#" class="left">
<
a>
<a href="#" class="right">
>
a>
div>
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部分
<div id="main">
<div id="banner">
<a href="#">
<div class="banner-slide slide1 slide-active">
<img src="images/01.jpg">
div>
a>
<a href="#">
<div class="banner-slide slide2">
<img src="images/02.jpg">
div>
a>
<a href="#">
<div class="banner-slide slide3">
<img src="images/03.jpg">
div>
a>
<a href="#">
<div class="banner-slide slide4">
<img src="images/04.jpg">
div>
a>
<a href="#">
<div class="banner-slide slide5">
<img src="images/05.jpg">
div>
a>
div>
<div class="dots">
<ul id="dots">
<li class="li1">1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
div>
<div id="left-right">
<div class="move" id="prev"><div>
<div class="move" id="next">>div>
div>
div>
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实现图片切换
以上代码仅参考，你也可以写出自己的轮播图代码，让它实现的效果
比我下面这张更好
效果图如下
