一、源码
轮播图
可克隆下载在本地测试
二、思路
1.绝对定位
图片设置成绝对定位
2.图片默认位置
图片默认放在left:100%;处
3.图片显示位置
显示的图片放在left:0;处
4.图片从显示位置向左移
设置left:-100%;
三、实战
1.html部分
<!--html部分-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.6">
<title>轮播图</title>
<!--引入css文件-->
<link rel="stylesheet" href="css/banner.css">
<!--引入字体文件-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1812798_0r0o8o24ma5i.css">
<!--引入jquery库-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<ul class="show" id="show">
<!--这里放图片-->
<li class="list-item active"><img src="img/banner1.jpeg" alt=""></li>
<li class="list-item"><img src=" img/banner2.jpeg" alt=""></li>
<li class="list-item"><img src=" img/banner3.jpeg" alt=""></li>
<li class="list-item"><img src=" img/banner4.jpeg" alt=""></li>
<li class="list-item left"><img src="img/banner5.jpeg" alt=""></li>
</ul>
<!--点击小点跳转到当前图片,这部分不完美-->
<ul class="switch" id="what">
<li class="btn active"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
<!--左右按钮-->
<button class="left"><i class="iconfont icon-zuoyoujiantou"></i></button>
<button class="right"><i class="iconfont icon-zuoyoujiantou-copy-copy-copy-copy"></i></button>
</div>
<!--main.js代码放在js文件夹里-->
<script src="js/main.js"></script>
</body>
</html>
2.css部分
/* css部分 */
body,
ul,
li,
img,
button {
margin: 0;
padding: 0;
border: none;
}
body {
height: 100%;
width: 100%;
max-width: 1000px;
}
ul {
list-style: none;
}
.container {
position: relative;
top: 40px;
left: 40px;
width: 604px;
height: 298px;
overflow: hidden;
}
.container .show {
height: 298px;
width: 100%;
position: relative;
}
/* 默认位置的图片优先级最低 */
.container .show li {
width: 604px;
height: 298px;
position: absolute;
left: 100%;
transition: 0.4s;
z-index: -1;
}
/* 图片显示优先级最高 */
.container .show li.active {
left: 0;
z-index: 10;
}
/* 左移的图片优先级其次 */
.container .show li.left {
left: -100%;
z-index:2;
}
.container .show li img {
width: 100%;
height: 100%;
}
/* 圆点的z-index设置成最高 */
.container .switch {
position: absolute;
left: 50%;
bottom: 10px;
width: 115px;
height: 20px;
margin-left: -57.5px;
border-radius: 2em;
cursor: pointer;
z-index: 10;
}
.container .switch li.btn {
float: left;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
margin: 4px 5px;
/* 现将边界设成透明的,hover时再改变颜色 */
border: 2px solid transparent;
transition: 0.4s;
box-sizing: border-box;
}
.container .switch li.active {
background: #00a1d6;
transition: 0.2s;
}
.container .switch li:hover {
border: 2px solid #fff;
background-color: #00a1d6;
transform: scale(1.3);
box-sizing: border-box;
}
/* 按钮的z-index设置成最高 */.
.container button {
width: 30px;
height: 30px;
margin-top: -15px;
transform: scale(2);
z-index: 10;
background: none;
color: white;
outline: none;
}
button.left {
position: absolute;
top: 50%;
left: 0;
}
button.right {
position: absolute;
top: 50%;
right: 0;
}
.test {
margin-top: 60px;
}
注意:
需要给图片设置z-index值,当前显示设置成最大,左移后的设置成第二大的,默认的设置成最小的。。。不然会出bug
3.js部分
// js部分,用jquery方便一些
//注意:需加上$(function(){})
$(function () {
curIndex = 0;
before = curIndex;
let timer = "";
let showArea = $(".show");
let point = $(".switch");
let listList = showArea.children();
let pointList = point.children();
//清除之前的active属性
function clearActive() {
listList.removeClass("active left");
pointList.removeClass("active");
}
// goIndex默认向右
function goIndex(current, previous) {
clearActive();
listList.eq(current).addClass("active").css({
tranform:"0.4s"
});
// 给上一个添加标记
listList.eq(previous).addClass("left");
pointList.eq(current).addClass("active");
}
// 写一个向左走的函数
function goLeft(current) {
clearActive();
listList.eq(current).addClass("active");
listList.eq(current - 1).addClass("left");
pointList.eq(current).addClass("active");
}
//向右走
function next() {
curIndex >= 4 ? curIndex = 0 : curIndex++;
goIndex(curIndex, curIndex - 1);
}
//向左走
function prev() {
curIndex <= 0 ? curIndex = 4 : curIndex--;
goLeft(curIndex);
}
// 按钮点击事件
$(".left").click(function () {
prev();
});
$(".right").click(function () {
next();
});
// 圆点点击事件,给当前元素绑定一个委托事件
pointList.click(function () {
before = curIndex;
// 获取当前元素索引
curIndex = $(this).index();
// console.log(curIndex);
if (before == curIndex) {
return;
} else if (before > curIndex) {
// 左移
goLeft(curIndex);
} else {
// 右移
goIndex(curIndex, before);
}
});
function start() {
//每次开始之前清空计时器
timer = "";
timer = setInterval(function () {
next();
}, 2000);
}
start();
function stop() {
clearInterval(timer);
}
// 鼠标放上时出现按钮
$('.container').hover(function () {
stop();
$("button").show().fadeIn(400);
}, function () {
start();
$("button").hide().fadeOut(400);
});
// 默认隐藏
$("button").hide();
})
4.图示
右移示例
左移示例
注意:这里图片显示的左移、右移与实际移动方向相反
不足之处:点击图片下边的圆点时会出现bug,虽然也能显示图片,但是过渡效果不太好