【博学谷学习记录】超强总结，用心分享丨一款自动轮播图代码

最新推荐文章于 2024-05-01 02:45:35 发布
最新推荐文章于 2024-05-01 02:45:35 发布
阅读量97 收藏
点赞数
分类专栏： CSS html js 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sophia11116/article/details/128108956
版权
CSS 同时被 3 个专栏收录
21 篇文章 0 订阅
订阅专栏
html
18 篇文章 0 订阅
订阅专栏
js
10 篇文章 0 订阅
订阅专栏

 

 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <title>Swiper demo</title>

    <meta

      name="viewport"

      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"

    />

    <!-- Link Swiper's CSS -->

    <link

      rel="stylesheet"

      href="./swiper-bundle.css"

    />

    <!-- Demo styles -->

    <style>

      .box{

        width: 700px;

        height: 400px;

        background-color: pink;

        margin: 40px auto 0px;

      }

      html,

      body {

        position: relative;

        height: 100%;

      }

      body {

        background: #eee;

        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        font-size: 14px;

        color: #000;

        margin: 0;

        padding: 0;

      }

      .swiper {

        width: 100%;

        height: 100%;

      }

      .swiper-slide {

        text-align: center;

        font-size: 18px;

        background: #fff;

        /* Center slide text vertically */

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: center;

      }

      .swiper-slide img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

      }

    </style>

  </head>

  <body>

    <!-- Swiper -->

    <div class="box">

    <div class="swiper mySwiper">

      <div class="swiper-wrapper">

        <div class="swiper-slide"><a href="https://www.baidu.com" target="_blank"><img src="./image/稿定素材-2572155.jpg" alt=""></a></div>

        <div class="swiper-slide"><a href="https://www.baidu.com" target="_blank"><img src="./image/稿定素材-2689496.jpg" alt=""></a></div>

        <div class="swiper-slide">Slide 3</div>

        <div class="swiper-slide">Slide 4</div>

        <div class="swiper-slide">Slide 5</div>

        <div class="swiper-slide">Slide 6</div>

        <div class="swiper-slide">Slide 7</div>

        <div class="swiper-slide">Slide 8</div>

        <div class="swiper-slide">Slide 9</div>

      </div>

      <div class="swiper-button-next"></div>

      <div class="swiper-button-prev"></div>

      <div class="swiper-pagination"></div>

    </div>

  </div>

    <!-- Swiper JS -->

    <script src="./swiper-bundle.js"></script>

    <!-- Initialize Swiper -->

    <script>

      var swiper = new Swiper(".mySwiper", {

        cssMode: true,

        navigation: {

          nextEl: ".swiper-button-next",

          prevEl: ".swiper-button-prev",

        },

        pagination: {

          el: ".swiper-pagination",

          clickable:true, // 允许点击小圆点跳转

        },

        autoplay: {

          delay: 3000,

          disableOnInteraction: false, // 手动切换之后继续自动轮播

        },

        mousewheel: true,

        keyboard: true,

      });

    </script>

  </body>

</html>

sophia11116
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于eclipse的android项目实战—博学谷（一）欢迎界面
01-03
本项目是用eclipse软件编写，... AND, android, c, clip, ec, eclipse, id, ip, li, ps, roi, 博学谷, 实战, 界面 上一篇：二叉树的创建、遍历、查找、删除下一篇：开源一个Flutter版WanAndroid客户端
js轮播图(手动轮播＋自动轮播)
weixin_68333400的博客
04-19 6527
效果图 一、先获取一下需要用到的元素 var leftbtn=document.querySelector('.leftbtn'); //左按钮 var rightbtn=document.querySelector('.rightbtn'); //右按钮 var windows=document.querySelector('.windows'); //显示窗口区域 var circleul=document.querySelector('.imgbox'
轮播图完整代码详细解析，css+js+html完整代码，可直接复制粘贴使用，仅需改图片即可
bsf000000___的博客
08-12 2626
这是一段使用HTML、CSS和JavaScript编写的图片轮播组件。它通过定时器实现自动播放图片，同时提供向左和向右的箭头按钮以手动切换图片。还包括一个圆圈导航，用于显示当前图片的索引，并且可以点击圆圈导航进行图片切换。具体实现步骤如下：以上就是该轮播组件的实现步骤。你可以根据需要进行修改和扩展，例如调整样式、更换图片等。 效果图
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84434331的博客
05-01 724
num–;//注意此处是ol的子节点的长度-1i++){})六：自动播放实现========自动播放最简单！，只需要一个自动点击即可**此处为右侧按钮自动点击：**将其添加在定时器中就可以完成我们的轮播图啦},2000)完整JS代码：=======我们的 JS 是单独的一个文件，所以加入了 load 事件等文档流执行完毕后，再执行 JS 的内容//光标移动至轮播图区域按钮显示，移开隐藏，点击按钮的变化效果。
前端必备技能——轮播图（原生代码+插件）
2301_76232361的博客
04-15 864
确认插件实现的功能去官网。
JS实战轮播图详细代码
一步一个脚印，踏实努力，向着目标前进
06-12 4074
这个例子实现了一个简单的轮播图，通过CSS设置轮播图的样式、布局，通过JS实现轮播图的切换、导航等功能。可以根据实际需求进行修改和扩展。
JavaScript表单校验
mqingo的博客
11-11 949
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
Android项目实战系列—基于博学谷（五）个人资料
01-03
在res/layout文件夹下创建一个布局文件，命名为activity_user_info。 （2）、界面代码——activity_user_info.xml 2、创建UserBean 选中com.boxuegu包，新建一个bean包。在bean包中创建一个Java类，命名为UserBean...
博学谷PHP在线就业课2017版HTML5教案、PPT、代码、资料
11-18
博学谷2017年最新的笔记，html5最新的资源，内容非常详细，有代码，软件ppt等。
博学谷PHP在线就业课2017版全套笔记
06-07
博学谷PHP在线就业课2017版全套笔记，非常详细，包含html，php，js，linux等等
基于eclipse的android项目实战—博学谷（三）登录界面
01-03
本项目是用eclipse软件编写，... AND, android, c, clip, ec, eclipse, id, ip, li, ps, roi, 博学谷, 实战, 界面 上一篇：二叉树的创建、遍历、查找、删除下一篇：开源一个Flutter版WanAndroid客户端
前端：纯css实现图片轮播（自动+手动）
daisy_juhua的博客
09-13 8791
图片轮播效果
js实现简单轮播图
m0_73481765的博客
06-30 269
【代码】js实现简单轮播图。
轮播图（含全部代码：html、css、javascript）
Cap07博客
07-31 5981
代码】轮播图（含全部代码html、css、javascript）
HTML实现轮播图的方法：纯CSS实现+js实现（鼠标点击时停止自动轮播/自动轮播）第一篇
Xmumu_的博客
12-18 8116
hi,这里是X，已经好久好久没有出过博客了因为最近实在忙碌，后续会不断加更博客的???????????? 轮播图的做法多种多样，这里也是总结了几种做法 文章目录css实现 css实现 css实现的话，对于轮播图下方的那个小小的滑动条是比较难做的，这里直接就介绍图片的滑动，这里先补充一些要用到的css属性： 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦 2、 <!D
网页轮播图的代码原理分析和实现
HIRAETHZY的博客
03-19 2218
一、结构搭建： <style> * { margin: 0; padding: 0 } img { border: 0; /*ie6*/ vertical-align: middle; } /*去掉列表前面的小点*/ li { list-style: none; } .fl { float: left; }
【jQuery案例】 自动轮播图
qq_43283830的博客
06-25 4332
jQuery案例 自动轮播图
实现轮播图效果
Hedia Pan的博客
08-25 971
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动效果</title> <link href="slide.css" rel="stylesheet" type="text/css" /> <style> .pic_scroll{ width: 566px } .
基于eclipse的android项目实战—博学谷(一)欢迎界面
12-25
博学谷是一个基于eclipse的android项目，旨在为用户提供学习和教育服务。在项目中，欢迎界面是项目的重要一部分，它是用户第一次接触到项目的地方，直接影响着用户对项目的印象。 在欢迎界面的设计中，我们首先考虑了用户体验。我们希望用户在进入项目时能够感受到友好和舒适，所以在欢迎界面设计中加入了简洁明了的UI界面和温馨的欢迎词语。 其次，我们也考虑了项目的品牌形象。博学谷是一个教育类项目，所以在欢迎界面的设计中我们选用了清新明亮的色彩，并加入了符合教育主题的图标和素材，以营造出浓厚的学习氛围。 另外，欢迎界面也是用户与项目进行第一次交互的地方。因此，我们在欢迎界面加入了用户注册和登录的入口，以及一些简单的引导信息，帮助用户更快地了解项目并进行操作。 通过以上设计，我们希望欢迎界面能够让用户感受到博学谷项目的用户友好性和专业性，从而留下良好的第一印象，并愿意深入了解和使用我们的项目。在实际操作中，我们也将结合用户反馈和数据分析，不断优化欢迎界面的设计，为用户提供更好的体验和服务。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值