轮播图案例

最新推荐文章于 2024-07-17 15:01:08 发布
最新推荐文章于 2024-07-17 15:01:08 发布
阅读量552 收藏 22
点赞数 13
分类专栏： 案例 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34708564/article/details/140271520
版权

丐版轮播图

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 基础轮播图 banner 移入移出</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="banner">
    <img id="pic" src="images/p1.jpg" width="500" height="375" alt="pkq">
    <div class="slider">
      <span style="background-color: pink;">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script>
    var oSlider = document.querySelector('.slider')
    var aSpan = document.querySelectorAll('.slider span')
    var oPic = document.querySelector('#pic')
    var oPrev = document.querySelector('.prev')
    var oNext = document.querySelector('.next')

    var index = 0
    var count = 4
    oNext.onclick = function () {
      aSpan[index].style.backgroundColor = 'orange';
      index++
      index = index % count
      oPic.src = `images/p${index + 1}.jpg`
      aSpan[index].style.backgroundColor = '#543';
    }

    oPrev.onclick = function () {
      aSpan[index].style.backgroundColor = 'orange';
      index--
      index = (index +count) % count
      oPic.src = `images/p${index + 1}.jpg`
      aSpan[index].style.backgroundColor = '#543';
    }

    oSlider.onmouseover = function (e) {
      if(e.target.tagName === 'SPAN') {
        aSpan[index].style.backgroundColor = 'orange';
        oPic.src = `images/p${e.target.innerText}.jpg`
        e.target.style.backgroundColor = '#543';
        index = e.target.innerText - 1
      }
    }
  </script>
</body>

</html>

进阶轮播图

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 基础轮播图 banner 移入移出</title>
  <style>
   * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 500px;
      height: 290px;
      margin-top: 100px;
      box-shadow: 0 0 12px #333;
    }

    .pic li {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }

    .pic li.on {
      display: block;
    }

    .pic li img {
      width: 500px;
      height: 290px;
    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .slider span.active {
      background-color: pink;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }
  </style>
</head>
<body>
  <div class="banner">
    <ul class="pic">
      <li class="on bg333 c368"><img src="images/p1.jpg" alt=""></li>
      <li class="bg333 c368"><img src="images/p2.jpg" alt=""></li>
      <li class="bg333 c368"><img src="images/p3.jpg" alt=""></li>
      <li class="bg333 c368"><img src="images/p4.jpg" alt=""></li>
    </ul>
    <div class="slider">

    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script>
    var oSlider = document.querySelector('.slider')
    var oPic = document.querySelector('.pic')
    var oWrap = document.querySelector('.btn-wrap')

    var switchWrap = {
      'prev': function () {
          switchSlider(function () {
          index--
          index = (index +count) % count
        })
      },
      'next': function () {
        switchSlider(function () {
          index++
          index = index % count
        })
      }
    }
    var index = 0
    var count = oPic.children.length
    
    createSlider()

    oWrap.addEventListener('click', function (e) {
      switchWrap[e.target.className] && switchSlider(switchWrap[e.target.className]())
    }, false)
  
    oSlider.addEventListener('mouseover', function (e) {
      if(e.target.tagName === 'SPAN') {
        switchSlider(function () {
            index = e.target.innerText - 1
        })
      }
    }, false)

    function switchSlider (callback) {
      oPic.children[index].classList.remove('on')
      oSlider.children[index].classList.remove('active')
      callback && callback() 
      oPic.children[index].classList.add('on')
      oSlider.children[index].classList.add('active')
    }

    function createSlider () {
      var fragment = document.createDocumentFragment();
      for(var i = 0; i < count; i++) {
        var vDom = document.createElement('span')
        vDom.innerText = i + 1
        fragment.appendChild(vDom)
      }
      fragment.children[0].classList.add('on')
      oSlider.appendChild(fragment)
    }
  </script>
</body>

</html>

动画轮播自动播放

<!DOCTYPE html>
<html lang="zh-cn">

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

    img {
      display: block;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {
      overflow: hidden;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .pic-list {
      width: 100%;
    }

    .pic-list li {
      float: left;
    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }

    .slider .active {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="banner">
    <ul class="pic-list">
      <li><img src="images/1.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/2.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/3.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/4.jpg" alt="" width="500" height="200"></li>
    </ul>
    <div class="slider">
    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script src="js/common.js"></script>
  <script>

    var oBanner = $('.banner');
    var oUl = $('.pic-list');
    var aPic = $$('.pic-list li');
    var oBtnWrap = $('.btn-wrap');
    var oSlider = $('.slider');
    var aSlider = oSlider.children;
    var picW = aPic[0].offsetWidth;
    var picLen = aPic.length;
    var index = 0;
    var timer;

    var tapMap = {
      'prev': function (e) {
        move(function () {
          index--;
          index = (picLen + index) % picLen;
        })
      },
      'next': function (e) {
        move(function () {
          index++;
          index = index % picLen;
        })
      }
    }

    init();
    autoTranslate();

    function init() {
      var spanStr = '';
      var firstClass = '';
      oUl.style.width = `${picLen * 100}%`;
      for (var i = 0; i < picLen; i++) {
        firstClass = ''
        if (i === 0) {
          firstClass = 'class="active"';
        }
        spanStr += `<span ${firstClass}>${i + 1}</span>`;
      }
      oSlider.innerHTML = spanStr;
    }

    oBanner.addEventListener('mouseover', function () {
      clearInterval(timer);
    }, false);

    oBanner.addEventListener('mouseout', function () {
      autoTranslate();
    }, false)

    oBtnWrap.addEventListener('click', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var btn = e.target;
        if (tapMap[btn.className] && typeof tapMap[btn.className] === 'function') {
          tapMap[btn.className](e);
        }
      }
    }, false);

    oSlider.addEventListener('mouseover', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var sliderBtn = e.target;
        move(function () {
          index = getElementIdx(sliderBtn);
        })
      }
    }, false);


    function move(callback) {
      aSlider[index].classList.remove('active');
      callback && callback(); 
      aSlider[index].classList.add('active');
      animate(oUl, {
        marginLeft: -index * picW + 'px'
      })
    }

    //自动切换 轮播 index++;
    function autoTranslate() {
      clearInterval(timer);
      timer = setInterval(function () {
        move(function () {
          index++;
          index = index % picLen;
        });
      }, 1000)
    }
  </script>
</body>

</html>

无缝轮播

<!DOCTYPE html>
<html lang="zh-cn">

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

    img {
      display: block;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {
      overflow: hidden;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .pic-list {
      width: 100%;
    }

    .pic-list li {
      float: left;
    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }

    .slider .active {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="banner">
    <ul class="pic-list">
      <li><img src="images/1.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/2.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/3.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/4.jpg" alt="" width="500" height="200"></li>
    </ul>
    <div class="slider">

    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script src="js/common.js"></script>
  <script>

    var oBanner = $('.banner');
    var oUl = $('.pic-list');
    var aPic = $$('.pic-list li');
    var oBtnWrap = $('.btn-wrap');
    var oSlider = $('.slider');
    var aSlider = oSlider.children;
    var picW = aPic[0].offsetWidth;
    var picLen = aPic.length + 1;
    var index = 0;
    var timer;
    init();
    var tapMap = {
      'prev': function (e) {
        move(function () {
          if (index === 0) {
            index = aPic.length - 1;
            oUl.style.marginLeft = -index * picW + 'px';
          }
          index--;
          index = (picLen + index) % picLen;
        });
      },
      'next': function (e) {
        move(function () {
          if (index === aPic.length - 1) {
            console.log('我要瞬间调到0 然后慢慢走到1');
            index = 0;
            oUl.style.marginLeft = -index * picW + 'px';
          }
          index++; //4
          index = index % picLen; // len 5 4%4
        });
      }
    }

    function init() {
      var spanStr = '';
      var firstClass = '';
      oUl.style.width = `${picLen * 100}%`;
      for (var i = 0; i < picLen - 1; i++) {
        firstClass = ''
        if (i === 0) {
          firstClass = 'class="active"';
        }
        spanStr += `<span ${firstClass}>${i + 1}</span>`;
      }
      oSlider.innerHTML = spanStr;
      oUl.appendChild(aPic[0].cloneNode(true));
      aPic = $$('.pic-list li');
      autoTranslate();
    }

    oBanner.addEventListener('mouseover', function () {
      clearInterval(timer);
    }, false);

    oBanner.addEventListener('mouseout', function () {
      autoTranslate();
    }, false);

    oBtnWrap.addEventListener('click', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var btn = e.target;
        if (tapMap[btn.className] && typeof tapMap[btn.className] === 'function') {
          tapMap[btn.className](e);
        }
      }
    }, false);

    oSlider.addEventListener('mouseover', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var sliderBtn = e.target;
        move(function () {
          index = getElementIdx(sliderBtn);
        })
      }
    }, false);

    function move(callback) {
      aSlider[index % (aPic.length - 1)].classList.remove('active');
      callback && callback(); //插入执行 index修改代码
      //如果index 为4 我们让index 变为0  4%4 3%4 2%4
      aSlider[index % (aPic.length - 1)].classList.add('active');
      animate(oUl, {
        marginLeft: -index * picW + 'px'
      })
    }
    
    //自动切换 轮播 index++;
    function autoTranslate() {
      clearInterval(timer);
      timer = setInterval(function () {
        tapMap['next']();
      }, 1000)
    }
  </script>
</body>

</html>
喵_美
关注
  • 13
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js轮播图案例.rar
05-02
【标题】"js轮播图案例.rar"是一个包含JavaScript实现的轮播图示例项目，旨在帮助初学者或开发者快速理解和应用轮播图效果。在网页设计中，轮播图是一种常见的展示多张图片或内容的方式，通过自动切换或者用户交互来...
京东轮播图案例.zip
01-26
【京东轮播图案例】是一个基于JavaScript和CSS技术实现的网页动态展示项目，通常用于电商平台首页，以展示商品、活动等重要信息。这种轮播图设计可以有效地利用有限的页面空间，循环播放多张图片或内容，提升用户...
前端轮播图案例（含详细注释）
10-22
仿淘宝前端轮播图的案例， 基本具有前端轮播图所有页面效果（无跳转） 1. 自动轮播，鼠标进入轮播区后变为手动控制； 2. 鼠标进入轮播区出现左右移控制箭头； 3. 图片由左右移箭头控制切换，并且底部轮播圆圈相应...
文字和盒子对齐
喵喵的博客
05-17 1975
实现文字和粉色盒子对齐： 该方法适合调整文字前面图标的位置，图标放在盒子内，可用背景图或图片的形式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { ...
滑动门原理
喵喵的博客
05-15 1672
滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是利用CSS精...
旋转木马案例
喵喵的博客
07-08 783
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
放大镜案例
喵喵的博客
07-08 768
/ 展示比例 (展示区图片宽度 - 展示区宽度) / (预览区宽度 - 遮罩层宽度)
选项卡切换（排他法、轮转法、轮转法之事件委托）
喵喵的博客
07-08 670
tabbar content 两部分的内容一一对应，我们点击某一个tab的时候，该tab的类名设置为on，其他的tab要清除on类名，对应的content的类名要设置为 active ，其他的content清除active类名。// aTab[i].onclick = function () { //循环绑定事件耗资源，优化事件委托。//方法三：轮转法之事件委托优化 通过监听父元素的点击事件，找到点击的子元素下标。//触发事件的DOM目标。
简体字转繁体字案例
喵喵的博客
05-22 659
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 简繁体转换(见备注资料) var arr = ["你=伱", "说=詤", "我=莪",...
全选和全不选案例
喵喵的博客
05-23 602
需求： 菜名全勾选了，那么顶上的框也自动勾选，只要有一个勾没选上，上面的框就取消勾选 点击全选，菜名有一个没勾的话，就全勾上，全勾上的话，就全部取消勾选 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> ...
js吸顶导航
喵喵的博客
07-09 544
吸顶导航 当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。 吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如Banner图。 当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部
tab切换案例
喵喵的博客
05-23 495
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { ...
鼠标放上显示透明盒子案例
喵喵的博客
05-15 468
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { display: block; width: 448px; height: 252px; ma...
不同屏幕大小引用不同的背景图
喵喵的博客
07-27 462
jQuery的data()方法 $element.data()是一个函数 ，专门用于取元素上的自定义属性（data-abc）， 函数的参数是我们要取得属性名称（abc）。 需求： 大屏幕的时候使用大图，图片高度不变图片内容居中； 小屏幕的时候使用小图，图片宽度100%自适应； <!DOCTYPE html> <html lang="en"> <head> &...
自定义video
最新发布
喵喵的博客
07-17 503
需求 播放暂停切换 播放进度条反馈和控制 (拖拽 点击) 播放时间 00:00/05:30 音量调控 反馈 一键静音/取消静音 全屏播放 循环模式 播放状态反馈 未播放 已播放 播放完毕 本地存储播放时间 自动续播 准备 [ { 方法:[ play(),pause()], 属性: [paused], element:[#contr-play] },{ 方法:[
盒子效果案例
喵喵的博客
05-14 337
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; transition: all 1...
楼梯导航案例
喵喵的博客
07-09 322
/true 与浏览器对其 false 居中。
bootstrap轮播图案例
06-07
Bootstrap提供了一个非常简单易用的轮播图组件，可以用来展示多个图片或者内容。下面是一个轮播图的示例代码： HTML代码： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值