很久前接觸過html css js 但自己在工作中用的少，簡單的需求直接vue 走起，沒有靜下心好好寫點js css 什么的，現在想要好好學習下 大前端的知識了，第一個小練習，做了個輪播圖
網上有很多輪播圖的實現過程,每個人都有自己不一樣的思路，自己只要實現了就行。當然有些思路確實比我的要好，后續借鑒學習。
邏輯：將要展示的圖片全部放在盒子里，超出部分隱藏，然后設置定時器，沒兩秒循環一次 img 標簽，如果display 為block 就將 display 設置為none 那么后面的圖片就到當前的div 區域內了，大體思路是這樣 ，當然后面加入了js 時間 支持前后翻頁，和提示功能
上代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>caroucel</title>
</head>
<style>
*{
margin:0;
padding:0
}
.box {
width: 300px;
height: 250px;
border: 1px solid red;
position: relative
}
img {
width: 300px;
height: 250px;
}
#prev {
position: absolute;
top: 50%;
margin-top: -12px;
height: 35px;
width: 15px;
background-color: rgba(255, 0, 0, .6);
vertical-align: center;
line-height: 35px;
cursor:pointer;
}
#next {
position: absolute;
top: 50%;
right: 0;
margin-top: -12px;
height: 35px;
width: 15px;
background-color: rgba(255, 0, 0, .6);
vertical-align: center;
line-height: 35px;
cursor:pointer;
}
</style>
<body>
<div class='box' style='overflow: hidden'>
<img src="./1" alt="">
<img src="./2" alt="">
<img src="./3" alt="">
<img src="./4" alt="">
<img src="./5" alt="">
<span id='prev'>
< </span> <span id='next'> >
</span>
</div><div id='dd'></div>
<script>
// 修改樣式為塊
function inintBlock() {
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i < imgObjs.length; i++) {
imgObjs[i].style.display = 'block'
}
}
inintBlock()
function operate() {
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i < imgObjs.length; i++) {
if (imgObjs[i].style.display === 'block') {
imgObjs[i].style.display = 'none'
break;
}
}
const state = Array.prototype.slice.call(imgObjs).map(function (item) { return item.style.display })
const res = state.filter(function (i) { return i === 'none' })
if (res.length === 5) {
inintBlock()
}
}
let interval = window.setInterval(
function () {
operate()
}, 2000
)
const el = document.getElementsByClassName('box')[0]
el.addEventListener('mouseenter', function (event) {
window.clearInterval(interval)
})
el.addEventListener('mouseleave', function (event) {
interval = window.setInterval(function () { operate() }, 2000)
})
document.getElementById('prev').addEventListener('click',
//獲取當前images 的屬性進行遍歷，找block屬性，修改前一個節點樣式
function () {
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i <imgObjs.length;i++){
if(imgObjs[i].style.display === 'block'){
if(i-1<0){
document.getElementsByClassName('box')[0].nextSibling.innerText = '已經是首頁了'
break;
}
imgObjs[i-1].style.display = 'block'
break;
}
}
})
document.getElementById('next').addEventListener('click',function(){
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i <imgObjs.length;i++){
if(imgObjs[i].style.display === 'block'){
if(i+1>4){
document.getElementsByClassName('box')[0].nextSibling.innerText = '已經是最后一頁了'
break;
}
imgObjs[i].style.display = 'none'
break;
}
}
})
</script>
</body>
</html>
代碼也是很簡單的，主要聯系下，js 遍歷 dom 的操作，孰能生巧，多多練習
做的過程中有發現個方法，通過定位把幾張圖片從左往右一次拼接起來，點擊的時候向左或者向右觸發事件，事件內容是修改各個圖片的定位 left right 值 從而產生左右翻滾的效果。（z-index 也是個實現的方法）
剛開始感覺下手很難，但做着做着方法也就越來越多，根據需求選擇最合適的最適合自己的就好。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
下面是一個輪播圖左右滑動的實現
html部分：
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Carousel Figure</
title
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
rel
=
"external nofollow"
>
</
head
>
<
body
>
<!--從左向右滑動-->
<
nav
>
<
ul
id
=
"index"
>
<
li
class
=
"on"
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
<
ul
id
=
"img"
>
<
li
><
img
src
=
"../images/img1.jpg"
alt
=
"img1"
></
li
>
<
li
><
img
src
=
"../images/img2.jpg"
alt
=
"img2"
></
li
>
<
li
><
img
src
=
"../images/img3.jpg"
alt
=
"img3"
></
li
>
<
li
><
img
src
=
"../images/img4.jpg"
alt
=
"img4"
></
li
>
<
li
><
img
src
=
"../images/img5.jpg"
alt
=
"img5"
></
li
>
</
ul
>
</
nav
>
<
script
src
=
"script.js"
></
script
>
</
body
>
</
html
>
*{
margin
:
0
;
padding
:
0
;
}
nav{
width
:
720px
;
height
:
405px
;
margin
:
20px
auto
;
overflow
:
hidden
;
position
:
relative
;
}
#index{
position
:
absolute
;
left
:
320px
;
bottom
:
20px
;
}
#index li{
width
:
8px
;
height
:
8px
;
border
:
solid
1px
gray
;
border-radius:
100%
;
background-color
:
#eee
;
display
: inline-
block
;
}
#img{
width
:
3600px
;
/*不給寬高無法移動*/
height
:
405px
;
position
:
absolute
;
/*不定義absolute，js無法設置left和top*/
z-index
:
-1
;
}
#img li{
width
:
720px
;
height
:
405px
;
float
:
left
;
}
#index .on{
background-color
:
black
;
}
function moveElement(ele,x_final,y_final,interval){//ele為元素對象
var x_pos=ele.offsetLeft;
var y_pos=ele.offsetTop;
var dist=0;
if(ele.movement){//防止懸停
clearTimeout(ele.movement);
}
if(x_pos==x_final&&y_pos==y_final){//先判斷是否需要移動
return;
}
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移動完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移動完成
y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
ele.movement=setTimeout(function(){//分10次移動，自調用10次
moveElement(ele,x_final,y_final,interval);
},interval)
}
圖片自動輪播：
var img=document.getElementById('img');
var
list=document.getElementById(
'index'
).getElementsByTagName(
'li'
);
var
index=0;
//這里定義index是變量，不是屬性
var
nextMove=
function
(){
//一直向右移動，最后一個之后返回
index+=1;
if
(index>=list.length){
index=0;
}
moveIndex(list,index);
moveElement(img,-720*index,0,20);
};
var
play=
function
(){
timer=setInterval(
function
(){
nextMove();
},2500);
};
for
(
var
i=0;i<list.length;i++){
//鼠標覆蓋上哪個小圓圈，圖片就移動到哪個小圓圈，並停止
list[i].index=i;
//這里是設置index屬性，和index變量沒有任何聯系
list[i].onmouseover=
function
() {
var
clickIndex=parseInt(
this
.index);
moveElement(img,-720*clickIndex,0,20);
index=clickIndex;
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout=
function
() {
//移開后繼續輪播
play();
};
}