快捷導(dǎo)航

原生JS實(shí)現(xiàn)手動(dòng)輪播圖效果實(shí)例代碼

更新時(shí)間：2018年11月22日 14:29:05 作者：靜遇。

手動(dòng)輪播圖，為輪播圖中的一種，輪播圖主要有無縫輪播，手動(dòng)輪播，延遲輪播，切換輪播等等，輪播圖主要用于展現(xiàn)圖片，新出商品，詞條，又能美觀網(wǎng)頁。給網(wǎng)頁中增加動(dòng)態(tài)效果。接下來通過本文給大家分享原生JS實(shí)現(xiàn)手動(dòng)輪播圖的實(shí)例代碼，一起看看吧

手動(dòng)輪播圖，為輪播圖中的一種，輪播圖主要有無縫輪播，手動(dòng)輪播，延遲輪播，切換輪播等等。。。

輪播圖主要用于展現(xiàn)圖片，新出商品，詞條，又能美觀網(wǎng)頁。給網(wǎng)頁中增加動(dòng)態(tài)效果。

手動(dòng)輪播，是小編認(rèn)為最簡單的一種輪播方式，既能左右翻頁，還能通過懸浮按鈕，快速預(yù)覽圖片，所以今天就給大家寫一個(gè)原生js手動(dòng)輪播圖。

一，利用JavaScript制作手動(dòng)輪播圖，首先排版。

引入默認(rèn)樣式表（可以手寫）；

<link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" />//本博客有css默認(rèn)樣式表可以下載。

div排版布局：

<body>
 <div id="box">
 <div id="lunbo"><img src="img/1.jpg" id="img"/></div>
 <div id="left"><</div>
 <div id="right">></div>
 <div id="radiu">
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
 </div>
 </div>
 </body>

二，定義div的CSS樣式，給div設(shè)置寬高，定位。

<style>
 body{
 background: darkturquoise;
 }
 #box{
 height:320px;
 width:480px;
 margin: 3px auto;
 border: 2px solid red;
 }
 #lunbo{
 height: 292px;
 width:453px;
 border: 1px solid yellow;
 margin: 0px auto;
 position: relative;
 }
 #left{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 440px;
 color: black;
 }
 #right{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 880px;
 color: black;
 }
 #radiu{
 height: 30px;
 width: 240px;
 text-align: center;
 
 margin: 0px auto;
 }
 #radiu li{
 float: left;
 background: white;
 height: 30px;
 width: 30px;
 line-height: 30px;
 border-radius:50% ;
 margin-right:6px;
 }
 .active{
 background: orange;
 color: ;
 }
 </style>
原生js代碼：
<script>
 window.onload=function(){
 var ridiu=document.getElementById("radiu")
 var right=document.getElementById("right");
 var left=document.getElementById("left")
 var img=document.getElementById("img");
 var oli=ridiu.getElementsByTagName("li")
 var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
  var a=null;
 
  right.onclick=function(){
   a++
   if(a>arry.length-1){
   a=0;
   }
  
   img.src=arry[a]
  }
  left.onclick=function(){
   a--
   if(a<0){
   a=arry.length-1;
   }
  
   img.src=arry[a]
  
  }
  
  for (var i=0;i<oli.length;i++) {
   
   oli[i].onclick=function(){
   a++
   if(a==arry.length){
   a=0;
   }
    img.src=arry[a];
   }
   
  }
 
 }
 </script>

HTML全部效果代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>手動(dòng)輪播圖</title>
 <link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" />
 <style>
 body{
 background: darkturquoise;
 }
 #box{
 height:320px;
 width:480px;
 margin: 3px auto;
 border: 2px solid red;
 }
 #lunbo{
 height: 292px;
 width:453px;
 border: 1px solid yellow;
 margin: 0px auto;
 position: relative;
 }
 #left{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 440px;
 color: black;
 }
 #right{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 880px;
 color: black;
 }
 #radiu{
 height: 30px;
 width: 240px;
 text-align: center;
 
 margin: 0px auto;
 }
 #radiu li{
 float: left;
 background: white;
 height: 30px;
 width: 30px;
 line-height: 30px;
 border-radius:50% ;
 margin-right:6px;
 }
 .active{
 background: orange;
 color: ;
 }
 </style>
 <script>
 window.onload=function(){
 var ridiu=document.getElementById("radiu")
 var right=document.getElementById("right");
 var left=document.getElementById("left")
 var img=document.getElementById("img");
 var oli=ridiu.getElementsByTagName("li")
 var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
  var a=null;
 
  right.onclick=function(){
   a++
   if(a>arry.length-1){
   a=0;
   }
  
   img.src=arry[a]
  }
  left.onclick=function(){
   a--
   if(a<0){
   a=arry.length-1;
   }
  
   img.src=arry[a]
  
  }
  
  for (var i=0;i<oli.length;i++) {
   
   oli[i].onclick=function(){
   a++
   if(a==arry.length){
   a=0;
   }
    img.src=arry[a];
   }
   
  }
 
 }
 </script>
 </head>
 <body>
 <div id="box">
 <div id="lunbo"><img src="img/1.jpg" id="img"/></div>
 <div id="left"><</div>
 <div id="right">></div>
 <div id="radiu">
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
 </div>
 </div>
 </body>
</html>

效果圖：

body{
background: darkturquoise;
}
#box{
height:320px;
width:480px;
margin: 3px auto;
border: 2px solid red;
}
#lunbo{
height: 292px;
width:453px;
border: 1px solid yellow;
margin: 0px auto;
position: relative;
}
#left{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 440px;
color: black;
}
#right{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 880px;
color: black;
}
#radiu{
height: 30px;
width: 240px;
text-align: center;
margin: 0px auto;
}
#radiu li{
float: left;
background: white;
height: 30px;
width: 30px;
line-height: 30px;
border-radius:50% ;
margin-right:6px;
}
.active{
background: orange;
color: ;
}

您可能感興趣的文章: