js代码编写无缝轮播图

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

前言

这个是一个轮播图

提示：

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

一、无缝轮播图

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

二、使用步骤

1.html代码

代码如下（示例）：

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 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);
 }


 
 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, false)[attr];
  }
 }

精彩专题分享：jQuery图片轮播 Javascript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。