JS實現輪播圖片——JS每日一練1

JS實現輪播圖片——JS每日一練1

前言:我之前在學JavaScript的時候,基本上都是看的《JavaScript高階程式設計》,而鍛鍊JS的例子也基本上是書上的小例子,每章看完了也很容易忘記一些知識點,缺乏實戰的鍛鍊,於是就在網上找一些例項做做並且根據例子做一些拓展例項會比單純的瞭解理論知識好多了,於是就有了這個專題文章《JavaScript例項每日一練》,和我一起通過例項深入瞭解JavaScript的“奧祕”吧,本專題文章不定期更新~

JS實現輪播圖片

一、簡單介紹

輪播圖片是一組為了向瀏覽網頁的使用者展示圖片資訊的會自動播放的圖片。在許多網站中你都會看到它的身影。
例如:
淘寶
前端網

二、特點

輪播圖片一般具備以下幾個特點:
1、點選左右兩邊的箭頭切換圖片
2、當滑鼠移出圖片範圍,自動切換下一張圖片;當滑鼠移入圖片範圍,停止切換下一張圖片
3、切換到某一張圖片時,底部的按鈕樣式也跟著改變
4、點選按鈕即會切換到相應位置的圖片

三、輪播圖片原理

一系列的大小相等的圖片平鋪,利用CSS佈局只顯示一張圖片,其餘隱藏。通過計算偏移量利用定時器實現自動播放,或通過手動點選事件切換圖片。
圖片描述
圖片來源:https://www.cnblogs.com/LIUYANZUO/p/5679753.html

四、讓我們開始吧

本次例項的最終效果為(點選連結檢視):
https://augustwuli.github.io/JSDaily/PlayImage/

檔案目錄
-index.html
-main.css
-main.js

1、HTML結構

index.html
首先我們用父容器“container”存放所有的內容,子容器“list”存放圖片,子容器“buttons”存放按鈕

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實現簡單的輪播圖片</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="container">
<div id="list" style="left:0px">
<img src="img/1.png" alt="1"/>
<img src="img/2.png" alt="2"/>
<img src="img/3.png" alt="3"/>
<img src="img/4.png" alt="4"/>
<img src="img/5.png" alt="5"/>
</div>
<div id="buttons">  
<span index="1" class="on"></span>  
<span index="2"></span>  
<span index="3"></span>  
<span index="4"></span>  
<span index="5"></span>  
</div>  
<a href="javascript:;" class="arrow" id="prev"><</a>  
<a href="javascript:;" class="arrow" id="next">></a>  
</div>
<script src="main.js"></script>
</body>
</html>

2、CSS樣式

*{  
margin: 0;  
padding: 0;  
text-decoration: none;  
}  
#container{
margin:20px auto;
width: 600px;/*此寬度根據圖片寬度調整*/
height: 483px;/*此高度根據圖片高度調整*/
border: 3px solid #333;
overflow: hidden; /*為了將圖片隱藏*/
position: relative; 
}
#list{
width: 4200px;/*圖片總寬度*/
height: 483px;
position: absolute;
z-index: 1;
}
#list img{
float: left;
width: 600px;
height: 483px;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
z-index: 2;/*將buttons放在list上層*/
bottom: 20px;
right: 250px;
}
#buttons span {  
cursor: pointer;  
float: left;  
border: 1px solid #fff;  
border-radius: 50%;  
height: 10px;  
width: 10px;  
margin-right: 5px;  
background: #E98352;  
}
#buttons .on {  
background: #474550;  
}  
.arrow{
display: none;
cursor: pointer;
line-height: 40px;
text-align: center;
font-size: 30px;/*設定箭頭的大小*/  
width: 40px;  
height: 40px; 
position: absolute;  
z-index: 2;/*將arrow放在list上層*/  
top: 180px;  
color: #fff;
background:#474550 ;  
}  
.arrow:hover {  
background-color: #E98352;  
}
#container:hover .arrow {  
display: block;  
}  
#pre {  
left: 20px;  
}     
#next {  
right: 20px;  
}  

3、JS實現功能

(1)點選左右兩邊的箭頭切換圖片

window.onload = funtion(){
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
function animate(offset){
/*獲取的style.left,是相對左邊獲取距離,所以第一張圖後style.left都為負值*/
/*且style.left獲取的是字串,需要用parseInt()取整轉化為數字。*/
var newLeft = parseInt(list.style.left)  offset;
list.style.left = newLeft   "px";
}
prev.onclick = function(){
animate(600);
}
next.onclick = function(){
animate(-600);
}
}

執行後會發現,一直點選右箭頭,在第5張圖片之後會出現空白,無法切換回第1張。
可以按F12開啟控制檯檢視list容器的left變化。
如圖:
動圖
每張圖片的list容器left值如下圖:
圖片描述
當left值小於2400時,因為沒有第6張圖片就出現空白,所以這裡我們需要對偏移量做一個判斷。
應該在animate函式內加上:

if(newLeft<-2400){
list.style.left = -600   'px';
}
if(newLeft>0){
list.style.left = -2400   'px';
}

(2)當滑鼠移出圖片範圍,自動切換下一張圖片;當滑鼠移入圖片範圍,停止切換下一張圖片。
這個功能我們需要用到window物件的setInterval()間歇呼叫方法,所謂的間歇呼叫就是每隔指定的時間就執行一次程式碼。
在這我們需要滑鼠移出圖片範圍,每隔指定時間就切換到下一張圖片。
在程式碼中插入:

var timer;//設定定時器
function autoplay(){
/*setInterval返回的是定時器的ID*/
timer = setInterval(function(){
next.onclick()
},3000);
}
autoplay();

當滑鼠移入圖片範圍時,清除定時器

var container = document.getElementById('container');
function stopplay(){
clearInterval(timer);
}
container.onmouseover = stopplay;
container.onmouseout = autoplay;

(3)切換到某一張圖片時,底部的按鈕樣式也跟著改變

var buttons = document.getElementById('buttons').getElementsByTagName('span');
var index = 1;
function showButton(){
//清除之前的樣式
for(let i = 0;i<buttons.length;i  ){
if(buttons[i].className == 'on'){
buttons[i].className = '';
}
}
buttons[index-1].className = 'on';
}
prev.onclick = function() {   
index-=1;
if(index < 1){
index = 5;
}
showButton();
animate(600);
}
next.onclick = function() {  
index =1;
if(index > 5){
index = 1;
}
showButton();
animate(-600);
}

(4)點選按鈕即會切換到相應位置的圖片

for(var i = 0;i<buttons.length;i  ){
buttons[i].onclick = function() {
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600*(index - clickIndex);
animate(offset);
index = clickIndex;
showButton();
}
}

至此,我們就完成了輪播圖片的基本功能。
(5)擴充套件功能
為輪播圖片增加切換的動畫效果

function animate(offset) {
//獲取的是style.left,是相對左邊獲取距離,所以第一張圖後style.left都為負值,
//且style.left獲取的是字串,需要用parseInt()取整轉化為數字。
var newLeft = parseInt(list.style.left)   offset;
list.style.left = newLeft   'px';
/*只需在這新增一行程式碼*/
list.style.transition='300ms ease';
/*新增css的transition*/
if(newLeft < -2400){
list.style.left = 0   'px';
}
if(newLeft > 0){
list.style.left = -2400   'px';
}
}

五、擴充套件例項

本篇文章的擴充套件例項為b站首頁的登入處的模擬彈幕。
如圖所示:
圖片描述
此例項也是運用了和輪播圖片一樣的原理,都是用css隱藏圖片,然後用js實現切換圖片。

六、原始碼下載

(喜歡的話記得star一下倉庫哦)
輪播圖片和擴充套件例項程式碼下載地址:
輪播圖片:
https://github.com/Augustwuli/JSDaily/tree/master/PlayImage
擴充套件例項:
https://github.com/Augustwuli/JSDaily/tree/master/bilibiliLogin
圖片描述

七、參考部落格

手把手原生js簡單輪播圖:
https://www.cnblogs.com/LIUYANZUO/p/5679753.html