JavaScript简易轮播图实现及页面数据分离

最新推荐文章于 2023-11-15 22:00:00 发布

lllanlll

最新推荐文章于 2023-11-15 22:00:00 发布

阅读量266

点赞数

分类专栏： JavaScript 文章标签：轮播图 JavaScript

本文链接：https://blog.youkuaiyun.com/qq_24270109/article/details/91358542

版权

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现一个简单的轮播图效果。通过创建外部和内部div，利用CSS的overflow和position属性，以及JavaScript动态生成图片元素，并结合过渡效果实现平滑切换。同时，将图片数据存储在JS对象数组中，实现了页面数据的分离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体实现步骤:

1 创建一个外部div:outer 用来设置轮播图在网页上的位置并设置overflow: hidden将多余图片先隐藏
2 创建一个内部div:inner 用来存放图片并设置position: absolute以便之后通过设置left值来改变位置以显示图片
3 并且设置transition: all 1s可以使图片切换跟顺畅
4 在JS中创建一个对象数组imgCollection保存图片的src数据
5 然后在JS中动态创建img元素使用 var chil = document.createElement(‘img’)
6 并设置其属性
chil.setAttribute(‘src’, imgCollection[i].src)
chil.setAttribute(‘alt’, i)
chil.setAttribute(‘id’, i + 1)
7 然后将其添加为inner的子元素 par.appendChild(chil)
8 最后创建两个click函数来完成切换功能

1.html:

  <div class="outer">
    <div id="inner"></div>
    <div class="controlLeft">
      <i class="fa fa-arrow-left" onclick="changePrev()"></i>
    </div>
    <div class="controlRight">
      <i class="fa fa-arrow-right" onclick="changeNext()"></i>
    </div>
  </div>

2.css:

* {
  padding: 0;
  margin: 0;
}

img {
  width: 500px;
  height: 300px;
  float: left;
}
.outer {
  overflow: hidden;
  width: 500px;
  height: 300px;
  position: relative;
  margin: 0 auto;
  border-radius: 10px;
}

#inner {
  width: 3000px;
  position: absolute;
  height: 300px;
  left: 0;
  top: 0;
  transition: left 1s;
}

.controlLeft {
  cursor: pointer;
  color: gray;
  position: absolute;
  font-size: 30px;
  top: 135px;
  left: 0;
  transition: all 0.5s;
}
.controlLeft:hover {
  color: black;
}

.controlRight {
  cursor: pointer;
  color: gray;
  position: absolute;
  font-size: 30px;
  top: 135px;
  right: 0;
  transition: all 0.5s;
}
.controlRight:hover {
  color: black;
}

3.js:

var imgCollection = [
  {
    id: 1,
    src: '../img/AsunaOne.jpg'
  },
  {
    id: 2,
    src: '../img/AsunaTwo.jpg'
  },
  {
    id: 3,
    src: '../img/AsunaThree.jpg'
  },
  {
    id: 4,
    src: '../img/AsunaFour.jpg'
  }
] //设置图片数据为对象数组

window.onload = function() {
  var par = document.getElementById('inner')
  for (let i = 0; i < imgCollection.length; ++i) {
    var chil = document.createElement('img')
    chil.setAttribute('src', imgCollection[i].src)
    chil.setAttribute('alt', i)
    chil.setAttribute('id', i + 1)
    par.appendChild(chil)
  }
} //在页面加载前先将图片加载至inner盒子内

var cur = 1
var distance = 500

function changeNext() {
  var inn = document.getElementById('inner')
  cur++
  if (cur == 5) {
    cur = 1
    inn.style.left = distance * (1 - cur) + 'px'
  } else {
    inn.style.left = distance * (1 - cur) + 'px'
  }
} //切换下一张

function changePrev() {
  var inn = document.getElementById('inner')
  cur--
  if (cur == 0) {
    cur = 4
    inn.style.left = distance * (1 - cur) + 'px'
  } else {
    inn.style.left = distance * (1 - cur) + 'px'
  }
} //切换上一张