原生JS無縫滑動輪播圖

更新時間：2019年10月22日 17:13:08 作者：Tanjc518

這篇文章主要為大家詳細介紹了原生JS實現淡出淡入輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了原生JS無縫滑動輪播圖的具體實現代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 ul,div,img{
 margin: 0;
 padding: 0;
 list-style: none;
 vertical-align: top;
 }
 #banner{
  width: 400px;
  height: 300px;
  margin:50px auto; 
  position: relative;
  overflow: hidden;
 }
 #banner ul{
  width: 400px;
  position: absolute;
 }
 #banner li img{
  width: 400px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 40px;
 }
 #dot{
  height: 20px;
  position: absolute;
  left: calc(50% - 80px);
  bottom: 20px;
 }
 #dot i{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  float: left;
  margin: 0 10px;
  cursor: pointer;
 }
 #dot i.current{
  background: rgb(161,1,34);
 }
 #pages{
  height: 60px;
  width:100%;
  position: absolute;
  top: calc(50% - 30px);
  cursor: pointer;
 }
  #pages i{
  width:30px;
  height: 60px;
  background: rgb(0,0,0);
  font-size: 22px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  opacity: 0.5;
  font-style: normal;
  position: absolute;
  user-select: none;
 }
  #pages i.gt{
  right:0;
  top: 0;
  font-size: 21px;
 }
  #pages i:hover{
  opacity: 0.7;
 }
 </style>
</head>
<body>
 <div id="banner">
 <ul id="ul">
  <li><img src="images2/imgs (1).jpg" alt=""></li>
  <li><img src="images2/imgs (2).jpg" alt=""></li>
  <li><img src="images2/imgs (3).jpg" alt=""></li>
  <li><img src="images2/imgs (4).jpg" alt=""></li>
  <li><img src="images2/imgs (5).jpg" alt=""></li>
  <li><img src="images2/imgs (6).jpg" alt=""></li>
  <li><img src="images2/imgs (7).jpg" alt=""></li>
  <li><img src="images2/imgs (8).jpg" alt=""></li>
 </ul>
 <div id="dot">
  
 </div>
 <div id="pages">
  <i class="lt">^</i>
  <i class="gt">v</i>
 </div>
 </div>
<script src="tool.js"></script>
<script type="text/javascript">
 var lis = $("li", $("#ul")),
 liHeight = lis[0].offsetHeight,
 len = lis.length;
 c = 1; n = 2;
 var first = lis[0].cloneNode(true),
 last = lis[len - 1].cloneNode(true);
 $("#ul").insertBefore(last, lis[0]);
 $("#ul").appendChild(first);
 
 var html = "";
 for(var i = 0; i < len; i++)
 html += "<i></i>";
 len += 2;
 $("#dot").innerHTML = html;
 $("#ul").style.height = liHeight * len + "px";
 $("#ul").style.top = -liHeight + "px";
 
 var dots = $("i", $("#dot"));
 dots[0].className = "current";
 var tf = true;
 function move(){
 var _top = -n * liHeight;
 animate($("#ul"), {top : _top}, 300, function(){
  if(n >= len){
  n = 2;
  c = 1;
  css($("#ul"), "top", -liHeight + "px");
  }else if(n <= 1){
  c = len - 2;
  n = len - 1;
  css($("#ul"), "top", c * -liHeight + "px");
  }
 });
 var dotIndex = n - 1;
 if(dotIndex === len - 2)
  dotIndex = 0;
 else if(dotIndex === -1)
  dotIndex = len -3;
 for(let i =0; i<dots.length; i ++)
  dots[i].className = "";
 dots[dotIndex].className = "current";
 c = n;
 n++;
 }
 var timer = setInterval(move, 3000);
 $("#banner").onmouseover = function(){
 clearInterval(timer);
 }
 $("#banner").onmouseout = function(){
 timer = setInterval(move, 3000);
 }
 
 on($("#dot"), "mouseover", function(e){
 e = e || event;
 var src = e.target || e.srcElement;
 if(src.nodeName === "I"){
  var index = Array.from($("i", this)).indexOf(src);
  n = index + 1;
  move();
 }
 })
 var timeout;
 on($("#pages"), "click",function(e){
 clearTimeout(timeout);
 if(tf){
  tf = false;
  e = e || event;
  var src = e.target || e.srcElement;
  if(src.className === "gt"){
  n = c - 1;
  move();
  }else if(src.className === "lt"){
  move();
  }
 }
 timeout = setTimeout(function(){
  tf = true;
 },400)
 })
</script>
</body>
</html>

更多關于輪播圖效果的專題，請點擊下方鏈接查看學習

javascript圖片輪播效果匯總

jquery圖片輪播效果匯總

Bootstrap輪播特效匯總

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

您可能感興趣的文章: