你是否在為頁面平平無奇而煩惱？
你是否在為頁面特效過于簡單而苦惱？
你是否也在為同是前端小白而別人的頁面卻比自己的更加精美？
如果你看到這篇博客，
你就已經贏在起跑線啦~
因為！！！
這篇博客將教會大家
如何讓頁面展現出你的獨特個性風格并且吸參考戶
一看到這個頁面就覺得
嗯嗯嗯~~這個網頁有點東西~
話不多說，上正題！
目錄
輪播圖的制作
1.框架的搭建
2.樣式的裝扮
3.影片效果
滑鼠經過輪播圖
點擊左右按鈕圖片就播放一張
圖片滾動播放的同時小圓點也隨之改變
滑鼠經過輪播圖暫停與運行
所有代碼貼心附上
插件法插入輪播圖
swiper插件插入輪播圖
網頁上的大致輪播圖的滾動就是上面的演示
輪播圖的制作
在制作輪播圖的程序中我分成3步：框架的搭建——樣式的裝扮——影片效果，
1.框架的搭建
如下代碼展示，就是先在HTML里搭建出一個框架來：
<body>
<div class="wrap">
<!-- 左右箭頭按鈕 -->
<a href="javascript:;" class='arrow-l'><</a>
<a href="javascript:;" class='arrow-r'>></a>
<!-- 圖片用li來裝--核心滾動區域 -->
<ul class='focus'>
<li>
<a href="#"><img src="1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="4.jpg" alt=""></a>
</li>
</ul>
<!-- 底部小點點 -->
<ol class='circle'>
</ol>
</div>2.樣式的裝扮
如下代碼展示，就是先在CSS里裝飾出大致的輪播圖樣子：
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style-type: none;
}
ol li {
list-style-type: none;
}
.wrap {
overflow: hidden;
position: relative;
margin: 100px auto;
width: 500px;
height: 400px;
background-color: pink;
}
.wrap ul {
position: absolute;
top: 0;
left: 0;
width: 500%;
/* 給ul盒子大一點就可以讓li浮動起來 */
}
.wrap ul li {
float: left;
/* margin-right: 10px; */
width: 500px;
height: 400px;
}
.wrap ul li img {
width: 100%;
height: 100%;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 38%;
text-align: center;
width: 24px;
height: 40px;
line-height: 40px;
color: white;
z-index: 999;
background: rgba(0, 0, 0, .3);
}
.arrow-r {
position: absolute;
top: 38%;
right: 0px;
}
.circle {
position: absolute;
bottom: 0;
left: 39%;
height: 20px;
width: 200px;
/* background-color: skyblue; */
}
.circle li {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 6px;
background: rgba(0, 0, 0, .3);
}
.circle .current {
background-color: #fff;
}3.影片效果
接下來就是我們的重頭戲，將頁面中的圖片滾動起來就是輪播圖：
制作輪播圖我們所想要的效果：
在寫javascript之前，我們需要先系結“load”事件，為了能夠讓頁面渲染完再執行javascript
代碼如下：
window.addEventListener('load', function() {
}滑鼠經過輪播圖
當滑鼠經過輪播圖，左右按鈕就顯示，一旦離開就隱藏左右按鈕，
用mouseenter、mouseleave兩個事件來系結執行：
focus.addEventListener('mouseenter', function() {
arrowl.style.display = 'block';
arrowr.style.display = 'block';
})
focus.addEventListener('mouseleave', function() {
arrowl.style.display = 'none';
arrowr.style.display = 'none';
}, 2000);
})點擊左右按鈕圖片就播放一張
思路：我們先定義一個全域變數num，當我們點擊一下就自增一次，然后滾動的距離就是ul的滾動距離，ul滾動距離=num*圖片寬度，
var num = 0;
// 右側按鈕
arrowr.addEventListener('click', function() {
if (flag) {
// flag = false; //關閉節流閥
// alert('111');測驗 事件系結成功沒有
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0; //無縫滾動效果 最后num=0回到起點第一張圖
}
num++;
animate(ul, -num * liWidth, function() {
flag = true; //打開節流閥
});
// 效果：底部小圓圈跟隨右側按鈕一起變化
yuan++; //這個變數是控制小圓圈的播放
// 如果yuan==4說明走到最后我們克隆的這張圖片 我們就復原
if (yuan == circle.children.length) {
yuan = 0;
}
// 先清除其余小圓圈的current類名
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})
// 左側按鈕
arrowl.addEventListener('click', function() {
if (flag) {
// flag = false;
// alert('111');測驗 事件系結成功沒有
if (num == ul.children.length - 1) {
num = ul.children.length - 1;
//無縫滾動效果 最后num=0回到起點第一張圖
ul.style.left = num * liWidth + 'px';
}
num--;
animate(ul, -num * liWidth, function() {
flag = true;
});
// 效果：底部小圓圈跟隨右側按鈕一起變化
yuan--; //這個變數是控制小圓圈的播放
// 如果yuan<0說明第一張圖片，則小圓圈要改為第四個小圓圈（3）
if (yuan < 0) {
yuan = circle.children.length - 1;
}
// 先清除其余小圓圈的current類名
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})圖片滾動播放的同時小圓點也隨之改變
先進行獲取到我們所需的元素：
var ul = document.querySelector('.focus');
var lis = focus.querySelectorAll('li');
var circle = document.querySelector('.circle');
var li = focus.querySelector('li');
var liWidth = li.offsetWidth;我們為了更加自動化，當圖片有多少張就有多少個小圓點，代碼如下：
for (var i = 0; i < lis.length; i++) { //第一個for回圈是創建li
var li = document.createElement('li');
// 記錄小圓圈的索引號，通過自定義屬性來做
li.setAttribute('index', i);
// 把上面增加的li添加到ol中去
circle.appendChild(li);
li.addEventListener('click', function() {
for (var i = 0; i < circle.children.length; i++) {
//創建的ol中的li進行遍歷獲取
// 排他思想
circle.children[i].className = '';
}
this.className = 'current'; //一定寫成this滑鼠經過輪播圖暫停與運行
當滑鼠不經過輪播圖還能夠自動運行：
// 自動播放輪播圖
var timer = setInterval(function() {
// 手動呼叫點擊事件
arrowr.click();
}, 2000);所有代碼貼心附上
window.addEventListener('load', function() {
// 1.
var arrowl = document.querySelector('.arrow-l');
var arrowr = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
// 2.
// 效果1.滑鼠經過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕，
focus.addEventListener('mouseenter', function() {
arrowl.style.display = 'block';
arrowr.style.display = 'block';
clearInterval(timer);
timer = null; //清除定時器變數
})
focus.addEventListener('mouseleave', function() {
arrowl.style.display = 'none';
arrowr.style.display = 'none';
timer = setInterval(function() {
// 手動呼叫點擊事件
arrowr.click();
}, 2000);
})
// 3.底部的小圓圈根據有幾張圖就有幾個小圓圈來實行
var ul = document.querySelector('.focus');
var lis = focus.querySelectorAll('li');
var circle = document.querySelector('.circle');
var li = focus.querySelector('li');
var liWidth = li.offsetWidth;
// console.log(lis);只能得到4個節點
//console.log(focus.children.length); //這樣才能得到focus的孩子的長度有幾個
// 先對圖片進行回圈得到有幾張圖片
for (var i = 0; i < lis.length; i++) { //第一個for回圈是創建li
var li = document.createElement('li');
// 記錄小圓圈的索引號，通過自定義屬性來做
li.setAttribute('index', i);
// 把上面增加的li添加到ol中去
circle.appendChild(li);
li.addEventListener('click', function() {
for (var i = 0; i < circle.children.length; i++) {
//創建的ol中的li進行遍歷獲取
// 排他思想
circle.children[i].className = '';
}
this.className = 'current'; //一定寫成this
// 想要效果：點擊小圓點，移動圖片 移動的是ul
// 別移動的距離=小圓圈的索引號*圖片的寬度（注意是負值從右往左走）
// 當我們點擊某個小li就獲取到li的索引號
var index = this.getAttribute('index');
var li = focus.querySelector('li');
// 解決bug1：當我們點擊了某個li就拿到當前li的索引號給num
// 解決bug2：當我們點擊了某個li 就把li的索引號給yuan
num = index;
yuan = index;
var liWidth = li.offsetWidth;
animate(ul, -liWidth * index); //ul移動
})
}
//把第一個li的背景變為白色
circle.children[0].className = 'current';
// 克隆第一張圖片li放到ul最后
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 當點擊左右按鈕可以有輪播圖切換效果
var num = 0;
// 效果：底部小圓圈跟隨右側按鈕一起變化 設定一個全域變數計數（在點擊事件外面定義）
var yuan = 0;
// flag節流閥
var flag = true;
// 右側按鈕
arrowr.addEventListener('click', function() {
if (flag) {
// flag = false; //關閉節流閥
// alert('111');測驗 事件系結成功沒有
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0; //無縫滾動效果 最后num=0回到起點第一張圖
}
num++;
animate(ul, -num * liWidth, function() {
flag = true; //打開節流閥
});
// 效果：底部小圓圈跟隨右側按鈕一起變化
yuan++; //這個變數是控制小圓圈的播放
// 如果yuan==4說明走到最后我們克隆的這張圖片 我們就復原
if (yuan == circle.children.length) {
yuan = 0;
}
// 先清除其余小圓圈的current類名
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})
// 左側按鈕
arrowl.addEventListener('click', function() {
if (flag) {
// flag = false;
// alert('111');測驗 事件系結成功沒有
if (num == ul.children.length - 1) {
num = ul.children.length - 1;
//無縫滾動效果 最后num=0回到起點第一張圖
ul.style.left = num * liWidth + 'px';
}
num--;
animate(ul, -num * liWidth, function() {
flag = true;
});
// 效果：底部小圓圈跟隨右側按鈕一起變化
yuan--; //這個變數是控制小圓圈的播放
// 如果yuan<0說明第一張圖片，則小圓圈要改為第四個小圓圈（3）
if (yuan < 0) {
yuan = circle.children.length - 1;
}
// 先清除其余小圓圈的current類名
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})
// 自動播放輪播圖
var timer = setInterval(function() {
// 手動呼叫點擊事件
arrowr.click();
}, 2000);
})
看到這是否覺得自己好像看懂了又好像沒看懂？
別擔心！
其實，還有更簡便的方法！
今天咱就一整個大放送！
博主干貨大放送！
插件法插入輪播圖
swiper插件插入輪播圖
插件的使用總結：
- 確認插件實作的功能
- 去官網Swiper中文網-輪播圖幻燈片js插件,H5頁面前端開發查看使用說明
- 下載插件
- 打開demo實體檔案，查看需要引入的相關檔案，并且引入
- 復制demo實體檔案中的結構html，樣式css以及js代碼
具體操作：
1.我們先把下載的檔案解壓下來
2.然后挑一個喜歡的輪播圖樣式
打開任意一個樣式后打開源代碼復制里面的css樣式
3.最后把js、css分別引入到javascript中
接下來就可以瘋狂復制代碼啦~
body：
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1 寫上需要輪播的圖片 -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination 頁碼-->
<div class="swiper-pagination"></div>
<!-- Add Arrows 左右兩個按鈕-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>css：（這是自己需要復制的代碼）
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>JS：（這是自己需要復制的代碼）
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
// 如果需要分頁器（小圓點）
// 是否需要分頁器
el: '.swiper-pagination',
// 點擊分頁器是否切換到對應的圖片 是 true 否 false
clickable: true,
},
navigation: {
// 如果需要前進后退按鈕
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>ok啦~
以上內容就能解決你關于制作輪播圖的疑惑~
如果對你有幫助就不要吝嗇你的大拇指👍給我一個鼓勵吧~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382014.html
標籤：其他
上一篇：前后端互動
下一篇：Vue之Vuex的使用