原生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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
JS跨域总结
Aug 30 Javascript
js实现文本框选中的方法
May 26 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
关于Js中new操作符的作用详解
Feb 21 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数组查找函数总结
2014/11/18 PHP
php类自动加载器实现方法
2015/07/28 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python实现文件分组复制到不同目录的例子
2014/06/04 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python实现一个猜拳游戏
2020/04/05 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
python删除某个目录文件夹的方法
2020/05/26 Python
什么是Python中的匿名函数
2020/06/02 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
python如何实现递归转非递归
2021/02/25 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
婚礼主持结束词
2014/03/13 职场文书
三严三实学习心得体会
2014/10/13 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
电气工程师岗位职责
2015/02/12 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers