原生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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
javascript文本模板用法实例
Jul 31 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
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
php短域名转换为实际域名函数
2011/01/17 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Use Word to Search for Files
2007/06/15 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Django如何使用redis作为缓存
2020/05/21 Python
移动通信专业自荐信范文
2013/11/12 职场文书
优秀家长事迹材料
2014/05/17 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA