原生js實現簡單輪播圖
阿新 • • 發佈：2020-10-26
本文例項為大家分享了js實現簡單輪播圖的具體程式碼，供大家參考，具體內容如下
一、寫入網頁基本結構
body:
網頁的最外部設定一個id為wrap的容器，取代body，這樣方便我們做一些初始化
css:
初始化：
包括外邊距margin、內邊距padding、連結a、圖片img、輸入框input、列表ul、li、網頁html、body一系列初始化
css設定：
根據圖片數與圖片寬度設定輪播圖寬度
二、設定js邏輯
需要完成的功能有：
1、滑鼠移入輪播圖逐漸出現左右浮動塊
2、點選浮動塊切換圖片
3、點選小圓點切換圖片
4、切換圖片同時切換小圓點
5、自動播放
6、滑鼠移入輪播圖自動播放停止、移出恢復自動播放
程式碼如下：
<!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">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
display: block;
}
input{
outline: none;
}
html,body{
height: 100%;
overflow: hidden;
}
.content{
position: absolute;
top: 0;
left: 0;
}
.banner{
width: 600px;
height: 400px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.banner .bannerList{
position: absolute;
left:-600px;
top: 0;
width: 4800px;
height: 100%;
}
.banner .bannerList li{
float: left;
width: 600px;
height: 400px;
}
.banner .bannerList li img{
height: 100%;
width: 100%;
}
.banner .left,.banner .right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 50px;
border: solid 2px gray;
font-size:30px;
text-align: center;
line-height: 50px;
color: rgb(255,255,255);
opacity: 0;
transition: 1000ms;
}
.banner .left{
left: 0px;
}
.banner .right{
right: 0px;
}
.banner .point{
position: absolute;
bottom: 30px;
left:50%;
transform: translateX(-50%);
}
.banner .point li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: gray;
margin: 5px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var bannerLeft=document.querySelector('.banner .left');
var bannerRight=document.querySelector('.banner .right');
var banner=document.querySelector('.banner')
var bannerList=document.querySelector('.banner .bannerList')
var liList=document.querySelectorAll('.banner .bannerList li')
var pointList=document.querySelectorAll('.banner .point li')
var start=-600;
timer2=setInterval(function(){ //設定定時器，自動播放
var a=30;
var index=bannerList.offsetLeft/-600+1;
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px' //無縫操作
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
// 建立一個移入出現函式
banner.addEventListener('mouseover',occur)
function occur(){
bannerLeft.style.opacity=1; //移入逐漸出現
bannerRight.style.opacity=1;
clearInterval(timer2); //移入取消自動播放
}
banner.addEventListener('mouseout',function(){
bannerLeft.style.opacity=0;
bannerRight.style.opacity=0; //移出消失
timer2=setInterval(function(){ //移出恢復自動播放
var a=30;
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
})
//設定左右浮動塊點選變色以及滾動
function colorChange(){
this.style.color='black';
if(this.className=='right'){ //判斷是哪邊被點選
var index=bannerList.offsetLeft/-600+1;
var a=30;
timer=setInterval(function(){ //點選浮動塊切換圖片
a=a-1;
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a!=0){
bannerRight.removeEventListener('mousedown',colorChange)
bannerLeft.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px'
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
else{
var a=30;
var index=bannerList.offsetLeft/-600-1;
timer=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+20+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',30)
if(bannerList.offsetLeft==0){
bannerList.style.left=-3600+'px'
index=5;
}
if(bannerList.offsetLeft==-600){
index=6;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
}
function colorReturn(){
this.style.color='white'
}
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mouseup',colorReturn)
bannerRight.addEventListener('mouseup',colorReturn)
for(var i=0;i<pointList.length;i++){
pointList[i].onmousedown=function(){
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='gray'
}
this.style.backgroundColor='red';
for(var b=0;b<pointList.length;b++){
if(pointList[b].style.backgroundColor==this.style.backgroundColor){
var a=30;
var step=-(b+1)*600-bannerList.offsetLeft;
timer1=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+step/30+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer1)
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},20)
}
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<!-- 寫出輪播圖框架 -->
<div class="banner">
<ul class="bannerList">
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
<li>
<img src="./img/james2.jpg">
</li>
<li>
<img src="./img/james3.jpg">
</li>
<li>
<img src="./img/james4.jpg">
</li>
<li>
<img src="./img/james5.jpeg">
</li>
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
</ul>
<!-- 左右兩個箭頭 -->
<span class="left"> < </span>
<span class="right"> > </span>
<!-- 新增小圓點 -->
<ul class="point">
<li style="background-color: red;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>其中，將圖片替換為其他圖片可以實現不同的輪播圖，值得一提的是，六張圖片的輪播圖需要放八張圖，第八張與第二張一致，第一張與第七張一致，真正呈現出來的僅僅是第二張到第七張
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。