js实现无缝轮播图

一时失言乱红尘 2023-06-25 10:08 26阅读 0赞

**需要引用上文封装的动画库**  
代码如下：

## CSS样式 ##

* {
          margin: 0;
          padding: 0;
        }
        div {
          width: 500px;
          margin: 0 auto;
        }
        #view {
          width: 500px;
          margin: 0 auto;
          height: 300px;
          border: 5px solid black;
          overflow: hidden;
          position: relative;
        }
        #banner li {
          float: left;
          overflow: hidden;
        }
        #banner img {
          width: 500px;
          height: 300px;
        }
        #banner {
          width: 2500px;
          overflow: hidden
        }
        #prev {
          float: left;
        }
        #next {
          float: right;
        }
        section {
          left: calc(50% - 80px);
          position: absolute;
          bottom: 10px;
        }
        span {
          margin: 0 10px;
          float: left;
          width: 15px;
          height: 15px;
          background-color: blue;
        }

## HTML ##

<div id="view">
        <ul id="banner">
          <li><img src="../img/img/1.jpg" alt=""></li>
          <li><img src="../img/img/2.jpg" alt=""></li>
          <li><img src="../img/img/3.jpg" alt=""></li>
          <li><img src="../img/img/4.jpg" alt=""></li>
          <li><img src="../img/img/1.jpg" alt=""></li>
        </ul>
        <section>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <section>
      </div>
      <div>
        <button id="prev">上一张<button>
            <button id="next">下一张<button>
      </div>
      </head>

## JS ##

var banner = document.getElementById('banner')
          var list = document.querySelectorAll('#banner>li')
          var prev = document.getElementById('prev')
          var next = document.getElementById('next')
          var btns = document.querySelectorAll('span')
          var view = document.getElementById('view')
          //计时器
          var index = 0
          //下一张
          function nextShow() {
            index++
            //让点变成默认色
            for (var j = 0; j < btns.length; j++) {
              btns[j].style.background = 'blue'
            }
            //图片对应点变红色
            if (index >= list.length - 1) {
              //当图片最后一张是变为第一张红点
              btns[0].style.backgroundColor = 'red'
            } else {
              btns[index].style.backgroundColor = 'red'
            }
    
            //执行动画
            $_animation(banner, 'marginLeft', -500 * index, 1000, function () {
              if (index >= list.length - 1) {
                index = 0
                banner.style.marginLeft = '0'
              }
            })
          }
          //上一张
          function preShow() {//先判断后执行
            index--
    
            //让点变成默认色
            for (var j = 0; j < btns.length; j++) {
              btns[j].style.background = 'blue'
            }
            //图片对应点变红色
            if (index < 0) {
              //当图片最后一张是变为第一张红点
              btns[list.length - 2].style.backgroundColor = 'red'
            } else {
              btns[index].style.backgroundColor = 'red'
            }
            if (index < 0) {
              banner.style.marginLeft = (-500 * (list.length - 1)) + 'px'
              index = list.length - 1
              index--
            }
            //执行动画
            $_animation(banner, 'marginLeft', -500 * index, 1000)
          }
          next.onclick = nextShow
          prev.onclick = preShow
    
          btns[0].style.background = 'red'
          //按钮绑定事件
          for (let i = 0; i < btns.length; i++) {
            // btns[i].index=i
            btns[i].onmouseenter = function () {
              for (var j = 0; j < btns.length; j++) {
                btns[j].style.background = 'blue'
              }
    
              //改变当前元素对象属性值
              index = i
              //执行动画 随着索引值变化
              $_animation(banner, 'marginLeft', -500 * index, 1000)
              btns[i].style.backgroundColor = 'red'
            }
          }
          //自动轮播
          var timer = setInterval(nextShow, 3000)
          //当鼠标移入时，清除定时器
          view.onmouseenter = function () {
            clearInterval(timer)
          }
          //当鼠标移出时，开启定时器
          view.onmouseleave = function () {
            timer = setInterval(nextShow, 3000)
          }

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现无缝轮播图

论是app，还是网站，基本上都会出现轮播图，今天和大家分享使用面向对象实现无缝轮播图的两种方式。轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知...

谁借莪１个温暖的怀抱￠/ 2024年04月18日 20:56/ 0 赞/ 78 阅读

相关 js实现无缝轮播图

需要引用上文封装的动画库代码如下： CSS样式 { margin: 0; padding: 0;

一时失言乱红尘/ 2023年06月25日 10:08/ 0 赞/ 27 阅读

相关原生JS实现无缝轮播

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。需求： 1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏 2.鼠标点击箭头，图片发生轮播

客官°小女子只卖身不卖艺/ 2023年06月24日 05:24/ 0 赞/ 24 阅读

相关 JS实现轮播图-无缝衔接

在这里封装了一个改变元素节点的运动的函数，使用的时候只要调用即可： 1、第一个参数是要操作元素节点。 2、第二个参数是一个对象存放样式名和对应样式的目标值。 3、第三个参

叁歲伎倆/ 2022年10月23日 15:26/ 0 赞/ 263 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 391 阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 276 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 404 阅读

相关 js 无缝连接的轮播图

> <!DOCTYPE html> > <html lang="zh-cn"> > <head> > <meta charset="UTF-8"> >

柔光的暖阳◎/ 2022年03月11日 08:15/ 0 赞/ 317 阅读

相关无缝轮播图切换

这里我们就不多废话了，大家应该都能看懂，直接上代码了，如果大神看到代码有问题，可以帮忙指点一下，谢谢 html <div class="banner">

深藏阁楼爱情的钟/ 2022年02月21日 07:47/ 0 赞/ 538 阅读

相关无缝轮播图

html: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

系统管理员/ 2021年03月25日 14:39/ 0 赞/ 689 阅读