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 相关文章推荐
js replace正则表达式应用案例讲解
Jan 17 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
微信小程序 教程之引用
Oct 18 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
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个人网站架设连环讲(四)
2006/10/09 PHP
PHP中的日期处理方法集锦
2007/01/02 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP读取Excel类文件
2017/05/15 PHP
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
javascript自执行函数
2017/02/10 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python实现复制文件到指定目录
2019/10/16 Python
python实现人机五子棋
2020/03/25 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
网站编辑求职信
2013/10/17 职场文书
小学门卫岗位职责
2013/12/17 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
另类冲刺标语
2014/06/24 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
七年级作文之英语老师
2019/10/28 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers