溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何用js實現輪播圖效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何用js實現輪播圖效果”這篇文章吧。
1.首先我們要把需要用到的元素獲取過來
<div class="all" id='box'> <div class="screen"> <!-- 無序列表 --> <ul> <li><img src="./wf1.jpg" width="500" height="200" /></li> <li><img src="./wf2.jpg" width="500" height="200" /></li> <li><img src="./wf3.jpg" width="500" height="200" /></li> <li><img src="./wf4.jpg" width="500" height="200" /></li> <li><img src="./wf5.jpg" width="500" height="200" /></li> </ul> <!-- 有序列表 --> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div>
2.我們要讓輪播圖點到哪里執行到哪里，且顏色發生變化
3.給輪播圖添加左右方向鍵，可以上下切換
4.讓輪播圖自己動起來
1.先獲取到元素，和需要用到的輪播圖效果
1.先把需要用到的ul（照片），ol（點擊框），nth（左右的按鍵）獲取過來
var ul=document.querySelector('ul')
var ol=document.querySelector('ol')
var nth=document.querySelector('#arr')
var box=document.querySelector('#box')
var left=document.querySelector('#left')
var right=document.querySelector('#right')2.封裝一下動畫效果，一會要用到
// 進行位置動畫封裝調用
function animate(element,offset,setp,times){
// 判斷為true則刪除，防止多個觸發
if(element.jsq){
clearInterval(element.jsq)
}
// 獲取當前offset
var position=ul.offsetLeft
// 判定如果移動位置小于現在的位置，則步長為負數
if(offset<position){
setp=-setp
}
// 開啟間隙定時器
if(Math.abs(position-offset)>Math.abs(setp)){
element.jsq=setInterval(() => {
position+=setp
element.style.left=position+'px'
// 判斷要是現在的位值和預訂的位置相差不超過一步長，則停止計時器
if(Math.abs(position-offset)<Math.abs(setp)){
clearInterval(element.jsq)
element.style.left=offset+'px'
}
}, times);
}
}動畫的步驟：
1.傳入時，查看是否有計時器的存在，如果有則清空，防止多個計時器并存的效果
2.判斷一下，要移動到的位置是否大于原來的位置，大于則setp則加，小于則每次減去步長
3.開始計時器，進行移動
4.當現在的位置，和預定位置，距離相差小于步長則結束計時器，并把位置定到預定的位置上去，防止反復橫跳
2.ol添加內容，加點擊事件，圖片移動，按鈕變色
for(var i=0;i<ul.children.length;i++){
var li=document.createElement('li')
li.innerHTML=i+1
// 給每一個li設置上自定義屬性
li.setAttribute('a',i)
ol.appendChild(li)
// 給ol下面每一個li設置點擊事件
ol.children[i].onclick=function(){
// 循環所以li進行排他思想
for(var i=0;i<ol.children.length;i++){
ol.children[i].className=''
}
// 給當前點擊的元素添加上class屬性
this.className='current'
// 獲取到當前點擊li的自定屬性的值看看是點擊到第幾張
var index=this.getAttribute('a')
console.log(index)
// 查看照片每一張的寬度
var imgwidth=ul.children[0].offsetWidth
// 根據寬度乘上第幾張得出該移動多少
offset=index*-imgwidth
// 調用動畫函數
animate(ul,offset,50,30)1.根據照片的數量去用for循環創建相同數量的按鈕，用setAttriubre（‘a'，i）創建新自定義屬性后添加到ol中，后邊要用到
for(var i=0;i<ul.children.length;i++){
var li=document.createElement('li')
li.innerHTML=i+1
// 給每一個li設置上自定義屬性
li.setAttribute('a',i)
ol.appendChild(li)
}2.在這個循環中給所有的按鈕添加綁定事件，讓當前的按鈕變顏色，其他的沒有顏色，排他思想，在每一次點擊的時候，當前的有，其他的全部清空
for(var i=0;i<ul.children.length;i++){
var li=document.createElement('li')
li.innerHTML=i+1
// 給每一個li設置上自定義屬性
li.setAttribute('a',i)
ol.appendChild(li)
//新
// 給ol下面每一個li設置點擊事件
ol.children[i].onclick=function(){
// 循環所以li進行排他思想
for(var i=0;i<ol.children.length;i++){
ol.children[i].className=''
}
// 給當前點擊的元素添加上class屬性
this.className='current'3.獲取到當前點擊的元素，的自定義屬性的值，保存起來，用來設置頁面的偏移量當前點擊的值和每個照片相乘得出 ul的偏移量，記得加負號，應為是ul往左走，而不是視口往左走，然后調用之前我們寫的動畫函數
for(var i=0;i<ul.children.length;i++){
var li=document.createElement('li')
li.innerHTML=i+1
// 給每一個li設置上自定義屬性
li.setAttribute('a',i)
ol.appendChild(li)
// 給ol下面每一個li設置點擊事件
ol.children[i].onclick=function(){
// 循環所以li進行排他思想
for(var i=0;i<ol.children.length;i++){
ol.children[i].className=''
}
// 給當前點擊的元素添加上class屬性
this.className='current'
//新
// 獲取到當前點擊li的自定屬性的值看看是點擊到第幾張
var index=this.getAttribute('a')
console.log(index)
// 查看照片每一張的寬度
var imgwidth=ul.children[0].offsetWidth
// 根據寬度乘上第幾張得出該移動多少
offset=index*-imgwidth
// 調用動畫函數
animate(ul,offset,50,30)得出效果
3.給輪播圖添加上一張，下一張按鈕
（這里就不寫css的樣式了，最后會給到，先腦補。css最開始的時候是隱藏的）
1.開始獲取過各種元素，所以現在就不需要獲取，進入和離開分別寫上事件就好了
// 鼠標進入事件
box.onmousemove=function(){
nth.style.display='block'
}
// 鼠標離開事件
box.onmouseleave=function(){
nth.style.display='none'
}2.獲取到當前頁面， 設置點擊事件，下一個++ 上一個--，然后套用之前onclick效果
for(var i=0;i<ul.children.length;i++){
var li=document.createElement('li')
li.innerHTML=i+1
// 給每一個li設置上自定義屬性
li.setAttribute('a',i)
ol.appendChild(li)
// 給ol下面每一個li設置點擊事件
ol.children[i].onclick=function(){
// 循環所以li進行排他思想
for(var i=0;i<ol.children.length;i++){
ol.children[i].className=''
}
// 給當前點擊的元素添加上class屬性
this.className='current'
// 獲取到當前點擊li的自定屬性的值看看是點擊到第幾張
var index=this.getAttribute('a')
console.log(index)
// 查看照片每一張的寬度
var imgwidth=ul.children[0].offsetWidth
// 根據寬度乘上第幾張得出該移動多少
offset=index*-imgwidth
// 調用動畫函數
animate(ul,offset,50,30)
// 新
// 點擊事件，index為當前點擊的序號的自定義類名的值
left.onclick=function(){
if(index>0){
index--
}
ol.children[index].click()
}
right.onclick=function(){
if(index<4){
index++
}
ol.children[index].click()
}
}
}因為點擊事件里面的值在外面獲取不到，索性我就接著寫
事件里面還可以調用事件 如 ol.children[index].click() 記得要加小括號，并且去掉on
3.在沒有觸發ol.onclick（沒有點擊下邊的1,2,3,4,5）的時候，點擊左右是不起效果的，所以在script上要添加一段代碼
var Click=0
right.onclick=function(){
Click++
if(Click==1){
ol.children[1].click()
}
}這個時候就完成了第三部分的操作
4.讓輪播圖自己動起來
// 自動移動
// 1.首先我們要在一開始的時候給第一個按鈕添加顏色
ol.children[0].className='current'
// 2.開啟計時器每5秒切換一次
setInterval(function(){
var position=ul.offsetLeft
var imgwidth=ul.children[0].offsetWidth
var indexs=Math.abs(position/imgwidth)
//3. 獲取現在的位置，和圖片的長度，相除得到下標
if(indexs>3){
indexs=-1
}
ol.children[indexs+1].click()
// 跳轉的時候一定要加1
},5000)1.首先我們要在一開始的時候給第一個按鈕添加顏色，往后排他思想刪除掉
2.得出下標，跳轉要加1，要不然原地跳，第二圈開始的時候為-1，不是0，應為要＋1操作
就可以的到我們想要的結果了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<!-- 無序列表 -->
<ul>
<li><img src="./wf1.jpg" width="500" height="200" /></li>
<li><img src="./wf2.jpg" width="500" height="200" /></li>
<li><img src="./wf3.jpg" width="500" height="200" /></li>
<li><img src="./wf4.jpg" width="500" height="200" /></li>
<li><img src="./wf5.jpg" width="500" height="200" /></li>
</ul>
<!-- 有序列表 -->
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
// 進行位置動畫封裝調用
function animate(element,offset,setp,times){
// 判斷為true則刪除，防止多個觸發
if(element.jsq){
clearInterval(element.jsq)
}
// 獲取當前offset
var position=ul.offsetLeft
// 判定如果移動位置小于現在的位置，則步長為負數
if(offset<position){
setp=-setp
}
// 開啟間隙定時器
if(Math.abs(position-offset)>Math.abs(setp)){
element.jsq=setInterval(() => {
position+=setp
element.style.left=position+'px'
// 判斷要是現在的位值和預訂的位置相差不超過一步長，則停止計時器
if(Math.abs(position-offset)<Math.abs(setp)){
clearInterval(element.jsq)
element.style.left=offset+'px'
}
}, times);
}
}
// 1.獲取元素
var ul=document.querySelector('ul')
var ol=document.querySelector('ol')
var nth=document.querySelector('#arr')
var box=document.querySelector('#box')
var left=document.querySelector('#left')
var right=document.querySelector('#right')
// 2.ol中添加點擊元素
// 在ol循環添加li
for(var i=0;i<ul.children.length;i++){
var li=document.createElement('li')
li.innerHTML=i+1
// 給每一個li設置上自定義屬性
li.setAttribute('a',i)
ol.appendChild(li)
// 給ol下面每一個li設置點擊事件
ol.children[i].onclick=function(){
// 循環所以li進行排他思想
for(var i=0;i<ol.children.length;i++){
ol.children[i].className=''
}
// 給當前點擊的元素添加上class屬性
this.className='current'
// 獲取到當前點擊li的自定屬性的值看看是點擊到第幾張
var index=this.getAttribute('a')
console.log(index)
// 查看照片每一張的寬度
var imgwidth=ul.children[0].offsetWidth
// 根據寬度乘上第幾張得出該移動多少
offset=index*-imgwidth
// 調用動畫函數
animate(ul,offset,50,30)
// 點擊事件，index為當前點擊的序號的自定義類名的值
left.onclick=function(){
if(index>0){
index--
}
ol.children[index].click()
}
right.onclick=function(){
if(index<4){
index++
}
ol.children[index].click()
}
}
}
// 鼠標進入事件
box.onmousemove=function(){
nth.style.display='block'
}
// 鼠標離開事件
box.onmouseleave=function(){
nth.style.display='none'
}
//鼠標右邊點擊事件
var Click=0
right.onclick=function(){
Click++
if(Click==1){
ol.children[1].click()
}
}
// 自動移動
// 1.首先我們要在一開始的時候給第一個按鈕添加顏色
ol.children[0].className='current'
// 2.開啟計時器每5秒切換一次
setInterval(function(){
var position=ul.offsetLeft
var imgwidth=ul.children[0].offsetWidth
var indexs=Math.abs(position/imgwidth)
//3. 獲取現在的位置，和圖片的長度，相除得到下標
if(indexs>3){
indexs=-1
}
ol.children[indexs+1].click()
// 跳轉的時候一定要加1
},5000)
</script>
</body>
</html>記得更改圖片的路徑。
以上是“如何用js實現輪播圖效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
