原生JS无缝滑动轮播图


Posted in Javascript onOctober 22, 2019

本文实例为大家分享了原生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 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue实现开心消消乐游戏算法
Oct 22 #Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 #Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 #Javascript
微信小程序开发之转发分享功能
Oct 22 #Javascript
微信小程序转发事件实现解析
Oct 22 #Javascript
小程序点击图片实现png转jpg
Oct 22 #Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 #Javascript
You might like
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php笔记之:AOP的应用
2013/04/24 PHP
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
python opencv之分水岭算法示例
2018/02/24 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python中的集合介绍
2019/01/28 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
领导视察欢迎词
2014/01/15 职场文书
致800米运动员广播稿
2014/02/16 职场文书
服务质量承诺书
2014/03/27 职场文书
法制宣传教育方案
2014/05/09 职场文书
提拔干部考察材料
2014/05/26 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
资料员岗位职责范本
2015/04/13 职场文书
抢劫罪辩护词
2015/05/21 职场文书
化工生产实习心得体会
2016/01/22 职场文书
如何拟写通知正文?
2019/04/02 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers