本文實例為大家分享了js實現幻燈片輪播圖的具體代碼，供大家參考，具體內容如下

1.html

選取了五張圖片 放入div中，然后是左右箭頭，以及按鈕，代碼如下

輪播圖

<

>

• 1
• 2
• 3
• 4
• 5

2.css給div設置居中

將所有圖片隱藏，設置箭頭和小圓點的樣式

代碼如下

*{

margin:0;

padding:0;

text-decoration: none;

list-style: none;

}

#box{

width:800px;

height: 500px;

margin:50px auto 0px;

position: relative;

}

#box img{

width:800px;

height: 500px;

display: none;

animation:fade 3s;

}

#box .arrow{

width:800px;

height: 80px;

position: absolute;

top:50%;

margin-top: -40px;

}

#box .arrow .left,.right{

display: inline-block;

line-height: 80px;

width: 50px;

height:80px;

}

#box .arrow .left:hover{

background:rgba(0,0,0,0.8);

}

#box .arrow .right:hover{

background:rgba(0,0,0,0.8);

}

#box .arrow .right{

text-align: right;

position: absolute;

right:0;

}

#box .arrow a{

font-size: 50px;

color: #ffffff;

}

#box .btn{

position: absolute;

bottom: 10px;

left:50%;

margin-left: -98.47px;

text-align: center;

}

#box .btn li{

text-align: center;

margin:0 5px;

padding: 10px;

float:left;

background:white;

border-radius:20%;

cursor: pointer;

transition: background 2s ease;

}

#box .btn .on{

background: #000;

color:white;

}

@keyframes fade{

from{

opacity:.4;

}

to{

opacity:1;

}

}

3.js部分

js設定讓當前圖片顯示display：block，其他圖片隱藏display：none；

js代碼如下

window.οnlοad=function () {

var left=document.getElementsByClassName("left")[0];

var right=document.getElementsByClassName("right")[0];

var btn=document.getElementsByClassName("btn")[0].getElementsByTagName("li");

var box=document.getElementById("box");

var slideIndex=1;

var index=1;

var timer;

//圖片切換函數

showSlides(slideIndex);

function showSlides(n) {

var slides=document.getElementById("box").getElementsByTagName("img");

for(var i=0;i

slides[i].style.display="none";

btn[i].className="";

}

slides[slideIndex-1].style.display="block";

btn[slideIndex-1].className="on"

}

//箭頭切換

left.οnclick=function () {

if(slideIndex>1) {

slideIndex--;

showSlides(slideIndex);

}else {

slideIndex=5;

showSlides(slideIndex);

}

}

right.οnclick=function () {

if(slideIndex<5) {

slideIndex++;

showSlides(slideIndex);

}else {

slideIndex=1;

showSlides(slideIndex);

}

}

//btn切換

for(var i=0;i

btn[i].οnclick=function () {

var myslideIndex=this.getAttribute('slideIndex');

// var myindex=parseInt(this.getAttribute("index"));

slideIndex=myslideIndex;

showSlides(slideIndex);

}

}

//自動播放

function play() {

timer=setInterval(function () {

right.onclick();

},4000);

}

function stop() {

clearInterval(timer);

}

box.οnmοuseοut=play;

box.οnmοuseοver=stop;

play();

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html焦点自动轮播幻灯片js,js实现幻灯片轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。