如何制作無縫輪播圖------非完美版
- 一、源碼
- 二、思路
-
- 1.絕對定位
- 2.圖檔預設位置
- 3.圖檔顯示位置
- 4.圖檔從顯示位置向左移
- 三、實戰
-
- 1.html部分
- 2.css部分
- 3.js部分
- 4.圖示
一、源碼
輪播圖
可克隆下載下傳在本地測試
二、思路
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，雖然也能顯示圖檔，但是過渡效果不太好
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)