原生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的with语句使用方法
Sep 21 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
基于Django统计博客文章阅读量
2019/10/29 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
积极分子思想汇报
2014/01/04 职场文书
三个儿子教学反思
2014/02/03 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
golang 如何用反射reflect操作结构体
2021/04/28 Golang
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android