原生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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
canvas轨迹回放功能实现
2017/12/20 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python实现身份证号码解析
2015/09/01 Python
python实现两个文件合并功能
2018/04/01 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python yield关键词案例测试
2019/10/15 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
销售口号大全
2014/06/11 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
离婚协议书范文2015
2015/01/26 职场文书
Python实现批量自动整理文件
2022/03/16 Python