js实现左右轮播图

2024-09-30 23:38:26

本文实例为大家分享了js实现左右轮播图的具体代码，供大家参考，具体内容如下

我的轮播图功能有：自动播放、点击焦点切换和点击左右按钮切换

效果图：

自动轮播

点击焦点切换

点击左右按钮切换

注意：本文用带背景颜色的li标签指代图片，有需要的话可以将图片插入li标签内

思路：

基础布局和css样式
（1）给盛放要轮播的图片的盒子绝对定位
js中的代码
（2）复制第一张图片放在盒子最后，复制最后一张图片放在盒子最前，以保证轮播图左右滑动效果（否则看起来会有一点卡顿）
（3）设置盒子位置，通过移动这个盒子的位置，产生图片移动的效果，用定时器设置轮播效果
（4）设置鼠标划入停播事件，设置按钮点击事件，设置焦点点击事件
（5）解决点击太快定时器混乱问题，解决切屏后定时器混乱问题

一布局

<!-- 布局 -->
 <section>
 <ul>
 <li style="background-color:aqua;">1</li>
 <li style="background-color: burlywood;">2</li>
 <li style="background-color: coral;">3</li>
 </ul>
 <ol></ol>
 <div>
 <a href=""><</a>
 <a href="">></a>
</div>

二样式

* {
 margin: 0;
 padding: 0;
 }

 ul,
 ol,
 li {
 list-style: none;
 }

 a {
 text-decoration: none;
 }

 section {
 width: 300px;
 margin: 30px auto;
 height: 200px;
 border: 5px solid;
 position: relative;
 /* overflow: hidden; */
 }

 ul {
 width: 300%;
 height: 100%;
 text-align: center;
 line-height: 200px;
 font-size: 100px;
 position: absolute;
 top: 0;
 left: 0;
 }

 li {
 width: 300px;
 height: 100%;
 float: left;
 }

 ol {
 width: 150px;
 height: 20px;
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 border-radius: 15px;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 }

 ol li {
 width: 15px;
 height: 15px;
 background-color: ivory;
 border-radius: 50%;
 }

 .active {
 background-color: greenyellow;
 }

三原生js

1、获取元素

//1、获取盛放图片的盒子和盛放焦点的盒子
 let ul = document.querySelector('ul')
 let ol = document.querySelector('ol')
  //获取大盒子和大盒子的宽
 let wrap = document.querySelector('section')
 let wrap_width = wrap.clientWidth

2、添加焦点

const frg = document.createDocumentFragment()
 for (let i = 0; i < ul.children.length; i++) {
  let focus = document.createElement('li')
  frg.appendChild(focus)
  //焦点初始化
  if (i == 0) focus.className = 'active'
 }
 ol.appendChild(frg)

3、复制元素

复制元素，将复制元素放在指定位置
改变盛放图片的盒子大小,改变图片位置，使页面打开时显示第一张图片

let first = ul.firstElementChild.cloneNode(true)
let last = ul.lastElementChild.cloneNode(true)
ul.appendChild(first)
ul.insertBefore(last, ul.firstElementChild)
ul.style.width = ul.children.length * 100 + '%'
ul.style.left = -wrap_width + 'px'

4、开始轮播

//设置一个图片索引
 let index = 1
  //一会儿会用到这段代码，就直接封装成函数了
  autoplay()

//自动播放函数，每隔两秒切换一次图片
 function autoplay() {
  move_time = setInterval(() => {
  index++
  move(ul, 'left', -index * wrap_width, movend)
  }, 2000)
 }
 //运动函数，设置图片切换方式
 //参数ele，元素；type，元素属性；value，元素运动结束时属性值；cb()，元素运动结束函数
 function move(ele, type, value, cb) {

  //获取元素属性初始值
  let spe = parseInt(getComputedStyle(ele)[type])
  //元素属性改变过程
  change_timer = setInterval(() => {
  value > spe ? spe += 5 : spe -= 5
  ele.style[type] = spe + 'px'
  if (value > spe) {
   if (spe >= value) {
   clearInterval(change_timer)
   cb()
   }
  } else {
   if (spe <= value) {
   clearInterval(change_timer)
   cb()
   }
  }
  }, 10)
 }
 //运动结束函数
 //判断索引临界值，更改索引，更改盒子位置，使图片轮播
 //让焦点和图片配套
 function movend() {
  if (index >= ul.children.length - 1) {
  index = 1
  ul.style.left = -index * wrap_width + 'px'
  }
  if (index <= 0) {
  index = ol.children.length - 1
  ul.style.left = -index * wrap_width + 'px'
  }
  for (let i = 0; i < ol.children.length; i++) {
  ol.children[i].className = ''
  }
  ol.children[index - 1].className = 'active'
 }

5、鼠标移入停播，移出开始播放

wrap.onmouseover = () => clearInterval(move_time)
 wrap.onmouseout = () => autoplay()

6、点击左右按钮切换图片

 //获取左右按钮
 let left = document.querySelector('div').firstElementChild
 let right = document.querySelector('div').lastElementChild
 //点击左按钮，索引减少，图片切到上一张
 left.onclick = function() {
  index--
  move(ul, 'left', -index * wrap_width, movend)
 }
 //点击右按钮，索引增加，图片切到下一张
 right.onclick = function() {
  index++
  move(ul, 'left', -index * wrap_width, movend)
 }

7、点击焦点切换图片

for (let i = 0; i < ol.children.length; i++) {
  //获取焦点索引
  ol.children[i].id = i
  //点击焦点切换图片
  ol.children[i].onclick = function() {
  index = this.id - 0 + 1
  move(ul, 'left', -index * wrap_width, movend)
  }
 }

8、解决切屏后定时器混乱问题

9、解决点击太快定时器混乱问题

添加开关，点击前关着，点击后图片未切换完成开着，图片切换完打开开关，将语句添加进点击事件函数中即可

if (flag) return
flag = true

四全部代码

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>轮播图21</title>
 <style>
 * {
  margin: 0;
  padding: 0;
 }

 ul,
 ol,
 li {
  list-style: none;
 }

 a {
  text-decoration: none;
 }

 section {
  width: 300px;
  margin: 30px auto;
  height: 200px;
  border: 5px solid;
  position: relative;
  overflow: hidden;
 }

 ul {
  width: 300%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  font-size: 100px;
  position: absolute;
  top: 0;
  left: 0;
 }

 li {
  width: 300px;
  height: 100%;
  float: left;
 }

 ol {
  width: 150px;
  height: 20px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 15px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
 }

 ol li {
  width: 15px;
  height: 15px;
  background-color: ivory;
  border-radius: 50%;
 }

 .active {
  background-color: purple;
 }

 div {
  position: absolute;
  font-size: 20px;
  height: 30px;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 div a {
  background-color: rgba(0, 0, 0, 0.2);
  width: 30px;
 }

 div a:active {
  background-color: rgba(0, 0, 0, 0.5);
 }
 </style>
</head>

<body>
 <!-- 布局 -->
 <section>
 <ul>
  <li style="background-color:aqua;">1</li>
  <li style="background-color: burlywood;">2</li>
  <li style="background-color: coral;">3</li>
 </ul>
 <ol></ol>
 <div>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" ><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" >></a>
 </div>
 </section>
 <script>
 </script>
 <script>
 //自动播放函数，每隔两秒切换一次图片
 function autoplay() {
  move_time = setInterval(() => {
  index++
  move(ul, 'left', -index * wrap_width, movend)
  }, 2000)
 }
 //运动函数，设置图片切换方式
 //参数ele，元素；type，元素属性；value，元素运动结束时属性值；cb()，元素运动结束函数
 function move(ele, type, value, cb) {

  //获取元素属性初始值
  let spe = parseInt(getComputedStyle(ele)[type])
  //元素属性改变过程
  change_timer = setInterval(() => {
  value > spe ? spe += 10 : spe -= 10
  ele.style[type] = spe + 'px'
  if (value > spe) {
   if (spe >= value) {
   clearInterval(change_timer)
   cb()
   }
  } else {
   if (spe <= value) {
   clearInterval(change_timer)
   cb()
   }
  }
  }, 10)
 }
 //运动结束函数
 //判断索引临界值，更改索引，更改盒子位置，使图片轮播
 //让焦点和图片配套
 function movend() {
  if (index >= ul.children.length - 1) {
  index = 1
  ul.style.left = -index * wrap_width + 'px'
  }
  if (index <= 0) {
  index = ol.children.length
  ul.style.left = -index * wrap_width + 'px'
  }
  for (let i = 0; i < ol.children.length; i++) {
  ol.children[i].className = ''
  }
  ol.children[index - 1].className = 'active'
  flag = false
 }
 //1、获取盛放图片的盒子和盛放焦点的盒子
 let ul = document.querySelector('ul')
 let ol = document.querySelector('ol')

 //获取大盒子和大盒子的宽
 let wrap = document.querySelector('section')
 let wrap_width = wrap.clientWidth
  //9、解决连续点击页面混乱问题
  //添加开关，点击前关着，点击后图片未切换完成开着，图片切换完打开开关
 let flag = false
  //2、添加焦点
 const frg = document.createDocumentFragment()
 for (let i = 0; i < ul.children.length; i++) {
  let focus = document.createElement('li')
  frg.appendChild(focus)
  //焦点初始化
  if (i == 0) focus.className = 'active'
 }
 ol.appendChild(frg)
  //3、复制元素，将复制元素放在指定位置
  //改变盛放图片的盒子大小,改变图片位置，使页面打开时显示第一张图片
 let first = ul.firstElementChild.cloneNode(true)
 let last = ul.lastElementChild.cloneNode(true)
 ul.appendChild(first)
 ul.insertBefore(last, ul.firstElementChild)
 ul.style.width = ul.children.length * 100 + '%'
 ul.style.left = -wrap_width + 'px'
  //4、图片自动轮播
  //设置一个图片索引
 let index = 1
  //一会儿会用到这段代码，就直接封装成函数了
 autoplay()
  //5、鼠标移入停播，移出开始播放
 wrap.onmouseover = () => clearInterval(move_time)
 wrap.onmouseout = () => autoplay()
  //6、点击左右按钮切换图片
  //获取左右按钮
 let left = document.querySelector('div').firstElementChild
 let right = document.querySelector('div').lastElementChild
  //点击左按钮，索引减少，图片切到上一张
 left.onclick = function() {
  if (flag) return
  index--
  move(ul, 'left', -index * wrap_width, movend)
  flag = true
  }
  //点击右按钮，索引增加，图片切到下一张
 right.onclick = function() {
  if (flag) return
  index++
  move(ul, 'left', -index * wrap_width, movend)
  flag = true
  }
  //7、点击焦点切换图片
 for (let i = 0; i < ol.children.length; i++) {
  //获取焦点索引
  ol.children[i].id = i
  //点击焦点切换图片
  ol.children[i].onclick = function() {
  if (flag) return
  index = this.id - 0 + 1
  move(ul, 'left', -index * wrap_width, movend)
  flag = true
  }
 }
 //8、解决切屏后页面混乱问题
 document.onvisibilitychange = () => document.visibilityState == 'hidden' ? clearInterval(move_time) : autoplay()
 </script>
</body>

</html>

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

JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&
js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner">
使用html+js+css 实现页面轮播图效果(实例讲解)

html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px
JS轮播图实现简单代码

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
js实现点击左右按钮轮播图片效果实例

本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
JS实现左右无缝轮播图代码

废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

js实现左右轮播图

相关推荐

随机推荐