原生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轮播特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
轮播图

JavaScript中使用Object.create()创建对象介绍
这篇文章主要介绍了JavaScript中使用Object.create()创建对象介绍,本文先是讲解了语法,然后给出了创建实例,需要的朋友可以参考下
2014-12-12
javascript常用的方法整理
JAVASCRIPT是AJAX技术中不可或缺的一部分，所以想学好AJAX以及现在流行的AJAX框架，学好JAVASCRIPT是最重要的。这章我给大家整理了一些JAVASCRIPT的基础知识、常用代码和事件汇总。
2015-08-08
JS中操作JSON总结
本篇文章主要是对JS操作JSON进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
导航跟随滚动条置顶移动示例代码
滚动条滚动时如何让导航置顶移动，这种效果已经在很多网看到了，所以本文也来实现一个，感兴趣的朋友可以学习下
2013-09-09
微信小程序用户自定义模版用法实例分析
这篇文章主要介绍了微信小程序用户自定义模版用法,结合实例形式较为详细的分析了微信小程序自定义模板的定义、数据调用、布局设置等简单使用技巧,需要的朋友可以参考下
2017-11-11
用webpack4开发小程序的实现方法
这篇文章主要介绍了用webpack4开发小程序的实现方法，分享通过webpack来构建小程序的开发架构，感兴趣的小伙伴们可以参考一下
2019-06-06
Bootstrap table两种分页示例
这篇文章主要为大家详细介绍了Bootstrap table两种分页示例，服务器端分页和客户端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
p5.js实现斐波那契螺旋的示例代码
本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
使用百度地图api实现根据地址查询经纬度
这篇文章主要介绍了使用百度地图api实现根据地址查询经纬度的方法，附上实例，推荐给有需要的小伙伴们。
2014-12-12
微信小程序 WXML节点信息查询详解
这篇文章主要介绍了微信小程序 WXML节点信息查询详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07