前端JS特效第47集：Swiper仿魅族官网大图轮播幻灯片特效

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量118 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85903333/article/details/139999879
版权

Swiper仿魅族官网大图轮播幻灯片特效，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper制作魅族官网大气幻灯片/轮播图演示</title>
	
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/style.css" />
	
</head>

<body>

    <div id="banner">
        <!-- 导航 -->
        <div class="nav">
            <!-- logo -->
            <h1 class="logo">
                <a href="javascript:">
                    <svg fill="#008cff" version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="402.048px" height="73.556px"
                        viewBox="17.318 5.824 402.048 73.556" enable-background="new 17.318 5.824 402.048 73.556"
                        xml:space="preserve">
                        <path d="M321.513,5.824H256.91v12.878h51.478l-49.294,44.581c-8.227,7.023-2.872,16.096,3.958,16.096h65.337V66.472
                          h-52.117l48.964-44.554C333.52,14.473,328.535,5.824,321.513,5.824"></path>
                        <rect x="226.517" y="5.824" width="14.426" height="73.556"></rect>
                        <path d="M104.296,5.824h-71.36c-8.576,0-15.618,7.012-15.618,15.588v57.967H31.14V23.743
                          c0-2.711,2.208-5.041,4.92-5.041h25.31v60.677h14.428V18.702h25.312c2.712,0,4.919,2.329,4.919,5.041v55.636h13.86V21.416
                          C119.888,12.841,112.872,5.824,104.296,5.824"></path>
                        <path d="M148.765,23.614c0-2.712,2.199-4.912,4.911-4.912h55.909V5.824h-58.236c-8.576,0-15.592,7.016-15.592,15.592
                          v42.37c0,8.576,7.017,15.592,15.592,15.592h58.236V66.5h-55.909c-2.711,0-4.911-2.199-4.911-4.912V49.042h58.43V36.117h-58.43
                          V23.614z"></path>
                        <path
                            d="M405.506,5.824v55.637c0,2.71-2.22,5.039-4.931,5.039h-39.77c-2.711,0-4.892-2.328-4.892-5.039V5.824h-13.86
                          v57.963c0,8.576,7.018,15.592,15.592,15.592h46.127c8.575,0,15.592-7.017,15.592-15.592V5.824H405.506z">
                        </path>
                    </svg>
                </a>
            </h1>

            <!-- 搜索 -->
            <div class="nav-search">
                <input class="key" type="text" placeholder="魅族 17">
                <svg class="dwo" width="17px" height="14px" viewBox="0 0 17 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-1469.000000, -32.000000)" fill="#666666" fill-rule="nonzero">
                            <g>
                                <g>
                                    <g transform="translate(1323.000000, 25.000000)">
                                        <g transform="translate(139.000000, 0.000000)">
                                            <path d="M14,20.75 C10.2720779,20.75 7.25,17.7279221 7.25,14 C7.25,10.2720779 10.2720779,7.25 14,7.25 C17.7279221,7.25 20.75,10.2720779 20.75,14 C20.75,17.7279221 17.7279221,20.75 14,20.75 Z M14,19.25 C16.8994949,19.25 19.25,16.8994949 19.25,14 C19.25,11.1005051 16.8994949,8.75 14,8.75 C11.1005051,8.75 8.75,11.1005051 8.75,14 C8.75,16.8994949 11.1005051,19.25 14,19.25 Z" id="Oval"></path>
                                            <path d="M19.0640714,18.1103001 C18.7270119,17.8695434 18.6489432,17.4011308 18.8896999,17.0640714 C19.1304566,16.7270119 19.5988692,16.6489432 19.9359286,16.8896999 L23.4359286,19.3896999 C23.7729881,19.6304566 23.8510568,20.0988692 23.6103001,20.4359286 C23.3695434,20.7729881 22.9011308,20.8510568 22.5640714,20.6103001 L19.0640714,18.1103001 Z" id="Line-2"></path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
                <a class="my" href="javascript:"></a>
                <a class="cart" href="javascript:"></a>
            </div>

            <!-- 链接 -->
            <ul class="nav-link">
                <li>
                    <a href="javascript:">手机</a>
                </li>
                <li>
                    <a href="javascript:">声学</a>
                </li>
                <li>
                    <a href="javascript:">配件</a>
                </li>
                <li>
                    <a href="javascript:">生活</a>
                </li>
                <li>
                    <a href="javascript:">Flyme</a>
                </li>
                <li>
                    <a href="javascript:">服务</a>
                </li>
                <li>
                    <a href="javascript:">专卖店</a>
                </li>
                <li>
                    <a href="javascript:">社区</a>
                </li>
                <li>
                    <a href="javascript:">企业服务</a>
                </li>
                <li>
                    <a href="javascript:">APP下载</a>
                </li>
            </ul>
        </div>

        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-lazy" data-background="images/img1.jpg" data-theme="gray">
                    <a href="javascript:"></a>
                </div>
                <div class="swiper-slide swiper-lazy" data-background="images/img2.jpg" data-theme="gray">
                    <a href="javascript:"></a>
                </div>
                <div class="swiper-slide swiper-lazy" data-background="images/img3.jpg" data-theme="white">
                    <a href="javascript:"></a>
                </div>
                <div class="swiper-slide swiper-lazy" data-background="images/img4.jpg" data-theme="gray">
                    <a href="javascript:"></a>
                </div>
                <div class="swiper-slide swiper-lazy" data-background="images/img5.jpg" data-theme="white">
                    <a href="javascript:"></a>
                </div>
                <div class="swiper-slide swiper-lazy" data-background="images/img6.jpg" data-theme="white">
                    <a href="javascript:"></a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/script.js"></script>


</body>

</html>

全部代码：Swiper仿魅族官网大图轮播幻灯片特效

强迫领导写Bug
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Swiper.js仿魅族官网轮播图效果代码
ICode联盟
10-28 122
Swiper.js仿魅族官网轮播图效果代码。
分享99个JS幻灯片代码，总有一款适合您
zy0412326的专栏
02-07 1578
js幻灯片
分享66个焦点幻灯JS特效，总有一款适合您
adendean的博客
12-03 112
分享66个焦点幻灯JS特效，总有一款适合您
分享111个JS图片切换特效，总有一款适合您
zdh13370188237的博客
02-03 839
JS
10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（一）
墨鱼部落格
02-28 419
实现图片墙时光穿梭特效 swiper图文卡片滑块切换特效 网页放大镜图片预览插件 图片瀑布流tab分类切换特效 js窗帘式图片切换特效 全屏带视频banner轮播图片特效 Swiper仿魅族官网大图轮播幻灯片特效 Swiper小米官网导航图片轮播实例 Swiper响应式缩略图片幻灯片切换特效 卡片式商品列表添加购物车特效 ...
分享996个实用的JavaScript特效你要的全在这里
猎人村庄的博客
05-29 4585
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
分享116个JS焦点图代码，总有一款适合您
zy0412326的专栏
02-08 1093
js图片效果
分享112个图片切换，总有一款适合您
zy0412326的专栏
02-03 797
js
Swiper仿魅族官网大图轮播幻灯片特效.rar
06-23
Swiper仿魅族官网大图轮播幻灯片特效.rar Swiper仿魅族官网大图轮播幻灯片特效.rar Swiper仿魅族官网大图轮播幻灯片特效.rar Swiper仿魅族官网大图轮播幻灯片特效.rar Swiper仿魅族官网大图轮播幻灯片特效.rar ...
Swiper仿魅族官网大图轮播幻灯片特效
06-01
使用jQuery Swiper 仿制的魅族官网大图轮播和导航栏ui布局。图片轮播有个特点：有两个主题，一个白色，一个灰色，切换图片的时候会对应切换主题背景色，具有创意的网站产品介绍banner大图切换实例。
jQuery仿魅族大图轮播幻灯片特效
07-24
"jQuery仿魅族大图轮播幻灯片特效"是一个利用JavaScript库jQuery实现的动态效果，它旨在模仿魅族官网的大图轮播和导航栏UI布局。这个特效不仅提供了视觉上的吸引力，还能帮助用户更流畅地浏览和交互。 首先，jQuery...
jQuery仿魅族官网大图轮播幻灯片特效
11-08
【jQuery仿魅族官网大图轮播幻灯片特效】是一种常见的网页动态效果，它能够为网站增添视觉吸引力，提高用户体验。此特效是基于JavaScript库jQuery实现的，旨在模仿魅族官方网站上的大图轮播展示方式，同时也包含了...
jQuery+swiper.js幻灯片图片视差滚动轮播特效
06-09
**jQuery + Swiper.js 幻灯片图片视差滚动轮播特效详解** 在网页设计中，动态效果常常能提升用户体验，使网站更具吸引力。"jQuery + Swiper.js 幻灯片图片视差滚动轮播特效"就是一种常用的技术，它结合了jQuery库的...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 181
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 927
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 83
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 68
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 734
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
Swiper 大图，小图联动轮播例子
06-02
下面是一个使用 Swiper 实现大图和小图联动轮播的例子，你可以根据自己的需求进行修改和定制： HTML 代码： ```html <div class="swiper-container big-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="big-image-1.jpg" alt="Big Image 1"> </div> <div class="swiper-slide"> <img src="big-image-2.jpg" alt="Big Image 2"> </div> <div class="swiper-slide"> <img src="big-image-3.jpg" alt="Big Image 3"> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="swiper-container small-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="small-image-1.jpg" alt="Small Image 1"> </div> <div class="swiper-slide"> <img src="small-image-2.jpg" alt="Small Image 2"> </div> <div class="swiper-slide"> <img src="small-image-3.jpg" alt="Small Image 3"> </div> </div> </div> ``` CSS 代码： ```css .swiper-slide img { width: 100%; height: auto; } .swiper-container { width: 100%; height: 100%; } .big-swiper { position: relative; } .swiper-pagination { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; color: #fff; font-size: 20px; line-height: 40px; text-align: center; cursor: pointer; } .swiper-button-prev { left: 10px; } .swiper-button-next { right: 10px; } .small-swiper { margin-top: 10px; } .small-swiper .swiper-slide { width: 100px; height: 60px; margin-right: 10px; } .small-swiper .swiper-slide:last-child { margin-right: 0; } .small-swiper img { width: 100%; height: 100%; cursor: pointer; opacity: 0.5; } .small-swiper .swiper-slide-active img { opacity: 1; } ``` JavaScript 代码： ```javascript var bigSwiper = new Swiper('.big-swiper', { loop: true, autoplay: { delay: 3000, disableOnInteraction: false }, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }); var smallSwiper = new Swiper('.small-swiper', { slidesPerView: 3, spaceBetween: 10, freeMode: true, watchSlidesVisibility: true, watchSlidesProgress: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }); bigSwiper.controller.control = smallSwiper; smallSwiper.controller.control = bigSwiper; smallSwiper.on('click', function() { bigSwiper.slideTo(smallSwiper.clickedIndex); }); ``` 在上面的例子中，我们使用了两个 Swiper 实例，一个用于显示大图，另一个用于显示小图。我们通过 bigSwiper.controller.control = smallSwiper; 和 smallSwiper.controller.control = bigSwiper; 来实现大图和小图的联动效果。在小图中点击某一张图片时，我们通过 smallSwiper.on('click', function() {}); 来跳转到对应的大图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值