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

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

相关文章

  • 小程序实现投票进度条

    小程序实现投票进度条

    这篇文章主要为大家详细介绍了小程序实现投票进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 微信小程序实现联动菜单

    微信小程序实现联动菜单

    这篇文章主要为大家详细介绍了微信小程序实现联动菜单,左右侧菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于PHP pthreads实现多线程代码实例

    基于PHP pthreads实现多线程代码实例

    这篇文章主要介绍了基于PHP pthreads实现多线程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JavaScript对象的创建模式与继承模式示例讲解

    JavaScript对象的创建模式与继承模式示例讲解

    继承机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有的特性基础上进行扩展,增加功能,这样产生新的类,称作是派生类。继承呈现了面向对象程序设计的层析结构,体现了由简单到复杂的认知过程。继承是类设计层次的复用
    2022-12-12
  • 基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

    基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

    这篇文章主要介绍了如何利用Cesium实现绘制圆形、正方形、多边形、椭圆等形状的图形标注,文中的示例代码讲解详细,需要的可以参考一下
    2022-06-06
  • js 操作table之 移动TR位置 兼容FF 跟 IE

    js 操作table之 移动TR位置 兼容FF 跟 IE

    js操作table之 移动TR位置 兼容FF 跟 IE,需要的朋友可以参考下。
    2009-11-11
  • javascript内置对象Date案例总结分析

    javascript内置对象Date案例总结分析

    今天总结javascript内置对象Date的使用,并且写一个重要的网页倒计时的核心算法案例,有需要的朋友可以借鉴参考下希望能够有所帮助,祝大家多多进步
    2022-03-03
  • document.styleSheets[0].rules 与 cssRules区别

    document.styleSheets[0].rules 与 cssRules区别

    document.styleSheets[0].rules 与 cssRules区别...
    2007-08-08
  • 基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    我们知道在JavaScript中定义类的原型方式,而原型链扩展了这种方式,以一种有趣的方式实现继承机制。prototype 对象是个模板,要实例化的对象都以这个模板为基础。总而言之,prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制
    2013-05-05
  • JavaScript 直接操作本地文件的实现代码

    JavaScript 直接操作本地文件的实现代码

    Chrome、IE和Firefox都纷纷在新版中增强了JavaScript引擎的执行效率,随着JavaScript效率在各大浏览器的显著提高,JavaScript可以做越来越多的事,本地文件API的引入将让很多有趣的功能成为现实。
    2009-12-12

最新评论