js代码编写无缝轮播图


Posted in Javascript onSeptember 13, 2020

本文实例为大家分享了js编写无缝轮播图的具体代码,供大家参考,具体内容如下

前言

这个是一个轮播图

提示:

请让最后一个img和第一个img是一张图片相同
且 li数目为img数目-1;

一、无缝轮播图

让第一张和最后一张相同
type:第一张和最后一张相同;
在最后一张向下一张切换时,立刻跳到第一张 然后向第二张正常切换

二、使用步骤

1.html代码

代码如下(示例):

<div class="banner">
 <div class="qh">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="left"></div>
 <div class="right"></div>
 <ul class="banner_img clear">
  <li>
  <img src="img/1.png" alt="">
  </li>
  <li>
  <img src="img/2.png" alt="">
  </li>
  <li>
  <img src="img/3.png" alt="">
  </li>
  <li>
  <img src="img/4.png" alt="">
  </li>
  <li>
  <img src="img/5.png" alt="">
  </li>
  <li>
  <img src="img/6.png" alt="">
  </li>
  <li>
  <img src="img/7.png" alt="">
  </li>
  <li>
  <img src="img/1.png" alt="">
  </li>
 </ul>
</div>

css代码

*{
 margin:0;
 padding:0;
}
 .banner {
  position: relative;
  margin: auto;
  margin-top: 20px;
  width: 1140px;
  height: 600px;
  border: 1px solid #000;
  overflow: hidden;
 }

 .banner ul {
  position: relative;
  width: 10000px;
 }

 .banner ul li {
  width: 1140px;
  height: 100%;
  float: left;
 }

 .banner ul img {
  width: 1140px;
  height: 100%;
  object-fit: cover;
 }

 .banner>div {
  position: absolute;
 }

 .banner .qh {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 20px;
  z-index: 1;
 }

 .banner .qh div {
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid #f0f;
  border-radius: 5px;
  float: left;
  z-index: 1;
 }
 .left{
  top: 0;
  bottom: 0;
  margin: auto;
  height: 40px;
  width: 20px;
  background: #f0f;
  left: 0;
  z-index: 1;
 }
 .right{
  top: 0;
  bottom: 0;
  margin: auto;
  height: 40px;
  background: #f0f;
  width: 20px;
  right: 0;
  z-index: 1;
 }

2.js代码

代码如下:

startMove是一个运动框架 缓冲运动;当然你也可以用其他的

var odiv = document.querySelector(".banner");
var oul = document.querySelector(".banner_img");
var aimg = oul.querySelectorAll("img");
var oqh = document.querySelector(".qh")
var aqh_div = oqh.querySelectorAll("div");
var alist = aimg[0].offsetWidth;
var i=0;
 init();
 function init(){
  for (var j=0; j<aimg.length-1;j++) {
  aqh_div[j].style.background="transparent";
  }
  if (i<aimg.length-1) {
  aqh_div[i].style.background="#f0f"; 
  }else{
  aqh_div[0].style.background="#f0f"; 
  }
 
 }
 function next() {//下一张
  i++;
  let left =i*(-alist);
  if (left <= -alist * (aimg.length)) {
  oul.style.left = "0px";
  i=1;
  left =-alist*i;
  }
  startMove(oul, { left: left });
  init();
 }
 function back() {//上一张
  i--;
  let left = i*(-alist);
  if(i<0) {
  oul.style.left = (aimg.length-1)* (-alist)+"px";
  i=aimg.length-2;
  left= i*(-alist);
  }
  startMove(oul, { left: left });
  init();
 }
 function move(i) {//跳到第i张 i从0开始
  window.i=i;
  left = i* (-alist);
  startMove(oul, { left: left });
  init();
 }
 for (let i in aqh_div) {
  aqh_div[i].onclick = function () {
  move(i);
  console.log(i);
  }
 }


//下面是一个移入div暂停计时器 移出打开计时器

 odiv.Interval = setInterval(next, 2000);
 odiv.onmouseenter = function () {
  clearInterval(odiv.Interval);
 };
 odiv.onmouseleave = function () {
  clearInterval(odiv.Interval);
  odiv.Interval = setInterval(next, 2000);
 };
//下面是两个左右切换的按钮
 var left_btn=document.querySelector(".left");
 var right_btn=document.querySelector(".right");
 left_btn.onclick=function(){
  back();
 }
 right_btn.onclick=function(){
  next();
 }



//下面是一个运动框架 第一个参数是运动的对象 第二个为json对象{要改变的属性:值}
// 第三个为运动结束后要做到事情 参数是一个函数

 /**
 *
 * @param obj 运动的对象
 * @param json {width:400, height:400}
 * @param fnEnd回调
 */
 function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
  var bStop = true;
  for (attr in json) {
   // 1. 取得当前的值(可以是widht,height,opacity等的值)
   var objAttr = 0;
   if (attr == "opacity") {
   objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
   } else {
   objAttr = parseInt(getStyle(obj, attr));
   }
   // 2.计算运动速度
   var iSpeed = (json[attr] - objAttr) / 50;//缓冲运动
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   // 3. 检测所有运动是否到达目标
   if (objAttr != json[attr]) {
   bStop = false;
   }
   if (attr == "opacity") {
   obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')';
   obj.style.opacity = (objAttr + iSpeed) / 100;
   } else {
   obj.style[attr] = objAttr + iSpeed + 'px';// 需要又.属性名的形式改成[]
   }
  }
  if (bStop) { // 表示所有运动都到达目标值
   clearInterval(obj.timer);
   if (fn) {
   fn();
   }
  }
  }, 10);
 }


 /**
  * 获取行间/内联/外部样式,无法设置
  * @param obj
  * @param attr
  */
 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, false)[attr];
  }
 }

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
javascript的函数作用域
Nov 12 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
Vue实现多页签组件
Jan 14 Vue.js
vue-cli脚手架的.babelrc文件用法说明
Sep 11 #Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 #Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 #Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 #Javascript
vue界面发送表情的实现代码
Sep 11 #Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 #Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 #Javascript
You might like
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP多进程编程实例
2014/10/15 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
js实现简单计算器
2015/11/22 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python实现梯度下降算法
2020/03/24 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
python pip如何手动安装二进制包
2020/09/30 Python
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
什么是网络协议
2016/04/07 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
毕业生多媒体设计求职信
2013/10/12 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
保研推荐信
2014/05/09 职场文书
给学校的建议书范文
2014/05/15 职场文书
保护环境倡议书300字
2014/05/19 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
股份转让协议书范本
2015/01/27 职场文书
催款通知书范文
2015/04/17 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript