轮播图1/3样式轮播图，模仿淘宝详情页图片胶囊式轮播

最新推荐文章于 2023-06-15 22:00:00 发布
最新推荐文章于 2023-06-15 22:00:00 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： 轮播图 swiper 移动端轮播图 商品展示轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/87909661
版权

首先我们先来看一下完成后的样式

在这里插入图片描述

1、用到的插件是swiper插件

swiper官网：https://www.swiper.com.cn/

2、源代码（因为用的是第三方插件，所以就直接上源码了）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>No Matter的博客</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
       html,body {
           width: 100%;
           position: relative;
       }
        .share-download {
            width: 100%;
            height: .88rem;
            line-height: .88rem;
            background-color: #333333;
            opacity: 0.6;
            position: a;
            top: 0;
            z-index: 2;
            color: #fff;
            font-size: 13px;
            padding-left: .3rem;
            box-sizing: border-box;
        }
        .share-download img {
             width: .5rem;
             height: .5rem;
             vertical-align: middle;
         
        }
        .share-download .btn {
            display: inline-block;
            width: 75px;
            height: 25px;
            line-height: 25px;
            font-size: 12px;
            text-align: center;
            position: absolute;
            right: .1rem;
            top:.2rem;
            background-image: linear-gradient(to right, #FF8D00 , #FF6000);
            border-radius: 13px;
        }
    
        .swiper-container {
            width: 100%;
            height: 8.38rem;
            margin: 0px auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            line-height: 300px;
        }

        .swiper-pagination {
            left: auto;
            right: 7px;
            bottom: 7px;
            width: auto;
            padding: 2px 7px;
            border-radius: 10px;
            color: #fff;
            background: rgba(0, 0, 0, .3);
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        .share-price {
            color: #FF5656;
            font-size: 20px;
            font-weight: bold;
            margin-top: .4rem;
            margin-left: .3rem;
        }

        .share-introduction {
            height: 100%;
            margin-top: .2rem;
            margin-left: .3rem;
            margin-right: .2rem;
            margin-bottom: .3rem;
            line-height: 1.4;
            color: #333333;
            font-weight: bold;
        }

        .bar {
            width: 100%;
            height: .2rem;
            background-color: #F8F8F8;
        }
        .share-select {
            width: 100%;
            height: 100%;
        }
        .share-select ul {
            margin-top: .2rem;
            margin-left: .3rem;
        }
        .share-select ul li{
             line-height: 2.2;
        }
        .share-select ul li span:nth-child(1){
             color: #999999;
             margin-right: .2rem;
        }
        .share-select ul li span:nth-child(3){
            float: right;
            margin-right: .3rem;
        }
        .share-title {
            display: flex;
            justify-content: center;
            color: #999999;
            margin-top: .28rem;
            
        }
        .share-title span{
            display: inline-block;
            margin: 0 10px;

        }
        .line {
            display: inline-block;;
            width:.6rem;;
            height: .02rem;
            background-color: #999999;
            margin-bottom: 2px;
        }
        .dot {
            display: inline-block;
            width: .1rem;
            height: .1rem;
            background-color: #999999;
            border-radius: 2px;;
        }
        .share-introduction2 {
            height: 100%;
            margin-top: .2rem;
            margin-left: .3rem;
            margin-right: .2rem;
            margin-bottom: .3rem;
            line-height: 1.4;
            color: #333333;
        }
        .share-show-img {
            width: 100%;
            height: 7.8rem;
        }
        .share-show-img img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <!-- 立即下载 -->
    <div class="share-download"><span>给您推荐<img style="border-radius: 20px;" src="https://profile.csdnimg.cn/7/9/4/1_wangzongyang1025_" alt="" srcset="">No Matter的博客<span> <span class="btn">点击进入</span></div>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/WechatIMG3328.png" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./img/WechatIMG3329.png" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./img/WechatIMG3330.png" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./img/WechatIMG3331.png" alt="" srcset=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>

    </div>
    <!-- 价格 -->
    <div class="share-price">¥ 509-699</div>
    <!-- 详情 -->
    <div class="share-introduction">Dior迪奥Jadore真我女士香水持久淡香EDP迷人正品50ml/75ml/100mlDior迪奥Jadore真我女士香水持久淡香EDP迷人
        正品50ml/75ml/100ml</div>
        <div class="bar"></div>
        <!-- 分享列表-->
        <div class="share-select">
             <ul>
                  <li><span>选择</span><span>颜色 净含量</span><span><img src="./img/right.png" alt="" srcset=""></span></li>
                  <li><span>运费</span><span>满100元包邮</span></li>
             </ul>
        </div>
        <div class="bar"></div>
        <!-- 商品介绍开始 -->
        <div class="share-title"><span><i class="line"></i><i class="dot"></i></span>商品介绍<span><i class="dot"></i><i class="line"></i></span></div>
        <div class="share-introduction2">这是商品的介绍,,,,,,,这是商品的介绍,,,,,,,这是商品的介绍,,,,,,,这是商品的介绍,,,,,,,这是商品的介绍</div>
        <!-- 商品展示图 -->
        <div class="share-show-img">
            <img src="./img/WechatIMG3328.png" alt="" srcset="">
        </div>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/flexible.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        });
    </script>
</body>

</html>

核心代码解析

注释：下方代码 paginationType：fraction，就是通过它去将swiper中组件的样式改变成别的类型，如图：
在这里插入图片描述

   <script>
        var swiper = new Swiper('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        });
    </script>

注释：这段css的代码就是控制它变成使1/3变成胶囊的样式

 	      .swiper-pagination {
            left: auto;
            right: 7px;
            bottom: 7px;
            width: auto;
            padding: 2px 7px;
            border-radius: 10px;
            color: #fff;
            background: rgba(0, 0, 0, .3);
        }
月落星河°
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于MindSpore实现胶囊网络的图像描述生成算法python源码+项目说明.zip
01-31
1.项目代码功能经验证ok，确保稳定可靠运行。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通。 2.主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间，不仅可作为入门进阶，也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。 5.期待你能在项目中找到乐趣和灵感，也欢迎你的分享和反馈！ 【资源说明】 基于MindSpore实现胶囊网络的图像描述生成算法python源码+项目说明 硬件 ModelArts平台，硬件配置为`1*Ascend 910 CPU24核 内存96GiB`。 ## 环境 - MindSpore 1.7 - numpy - argparse - pickle - json ## 数据集 使用的数据集：MS COCO 使用Faster RCNN提取的图片特征进行训练，数据集获取直接执行`data.ipynb`即可。 ## 训练 ```shell 用法：python train.py 选项： --device 代码实现设备，可选项为Ascend或GPU。默认为Ascend --device_id 设备ID，默认为0 --works 线程数，默认为4 --lr 学习率，默认为0.0005 --batch_size 默认为8 --result_folder 结果文件存储位置，默认为./ACN_RESULT --dataset_path 数据集路径，默认为./mscoco --epochs 训练论述，默认为50 --seq_per_img 每张图片对应句子数量，默认为5 --encode_layer_num 编码器层数，默认为3 --decode_layer_num 解码器层数，默认为3 ``` 基于MindSpore实现胶囊网络的图像描述生成算法python源码+项目说明 基于MindSpore实现胶囊网络的图像描述生成算法python源码+项目说明 基于MindSpore实现胶囊网络的图像描述生成算法python源码+项目说明 基于MindSpore实现胶囊网络的图像描述生成算法python源码+项目说明
最简单的图片轮播
不想写代码的一天
06-07 1419
声明一个变量用来存放多张图片的名称， var imglist=["3.jpg","2.jpg","8.jpg","6.jpg","1.jpg","4.jpg","7.jpg","5.jpg"]; 主要就运用一个循环播放的函数setinterval(), 让图片的地址一秒一秒的变换，当变换到最后一张图片时，进行判断，让图片的索引为0，就完成了图片轮播。 <!DOCTYPE html&g...
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
最新发布
赏樱看雪撸代码
06-15 6812
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
带指示器的轮播图实现
向大牛前行
03-02 1890
过完年，一直荒废到现在。过完年忙了一个礼拜找工作，办离职，办入职，还得换房子。所以可以说是忙得不可开交。这个礼拜终于入职办完，房子也搬完了。下了班能够留在公司学习一些知识，那么很多东西从今天就得继续捡起来了，继续我们的学习和奋斗路程。 那么在这个普天同庆的日志我们该学点什么呢？最近学习到了一个很简便的轮转图指示器的写法： 首先看下效果图： 可以看到我们实现了目前大部分需求中的轮播图的要求。
【网页前端实现多张图片轮播或者切换】三种方法实现
热门推荐
m0_54200555的博客
11-12 1万+
网页中前端图片轮播切换方式的方法展示。
uni-app中轮播图swiper修改指示器样式为数字胶囊式
Boo_crob的博客
12-23 3538
九宫格grid和轮播图混合应用 思路：轮播图嵌套在九宫格外面，详情参考官方文档。https://uviewui.com/components/grid.html 领导要求将轮播图的指示器改为：数字胶囊类型，在uview组件的u-swiper组件中有这一属性 ：mode=“number” 。但是如果里面还要嵌套九宫格grid就不能应用u-swiper组件。此时就需要用uni-app中的swiper 进行到这步，我们需要把swiper中的指示器 :indicator-dots 改为false。令他不显示指示器默
移动端轮播图 (三张图三张图的轮播)
weixin_49577940的博客
02-25 2388
效果就是像这样 , 三张图三张图的轮播 , 本文会讲vue 和uni-app 中分别怎么实现 , 其实写法是一样的, 只是组件标签不一样 vue中 , 用的vant组件库 Vant 2 - Mobile UI Components built on Vue template <van-swipe class="swipe" :autoplay="2000" indicator-color="black"> <van-swipe-item .
Swiper 仿淘宝 电脑版 详情页 轮播图(没有放大镜)
qq_19716091的博客
10-24 188
var banner = ''; $.each(info.banner, function (key, vo) { // console.log(key); // console.log(vo); banner += '<div class="swiper-slide">'; banner += '<img src="' + vo + '" alt="" />'; banner += '</div>'; }); // console.log(banner);
微信小程序轮播图常用炫酷样式----swiper
weixin_52658156的博客
07-16 3952
微信小程序开发中，轮播图承担广告展示、热销产品推荐等重要作用。下面介绍两种小程序轮播图常用样式。 演示 有层次感的3D 无层次感的平面 源代码 有层次感3D wxml <view class="swiperContainer"> <swiper class="imageContainer" bindchange="swiperChange" previous-margin="55rpx" next-margin="50rpx" circular autoplay
基于FPGA的胶囊内窥镜图像采集系统
01-29
它主要由图像胶囊内窥镜，便携式图像接收器和计算机处理软件三部分组成。文中将详细讨论这三部分软硬件设计。本文完成胶囊内窥镜图像采集系统的原型系统搭建，测试结果表明原型系统达到设计要求。
仿京东淘宝轮播图
11-26
仿京东淘宝轮播图 ../lib/jquery-1.8.3/jquery.min.js 路径写上自己的
HTML5仿淘宝图片轮转轮播代码
02-29
HTML5仿淘宝图片轮转轮播代码 HTML5 图片轮播 webppt tracker 引导页
淘宝swiper轮播 小图变大图
03-04
淘宝swiper轮播 小图变大图 没有让未激活的图片旋转
仿京东淘宝商品详情页中视频和图片的轮播功能
05-22
该项目是视频和图片的轮播功能，完美解决轮播的问题。
传感技术中的MagnaChip推出胶囊相机专用CMOS图像传感器
11-26
MagnaChip Semiconductor公司推出了一款专为胶囊相机设计的CMOS图像传感器。据介绍，这款新产品可为用户提供具备高质量图像的低功率胶囊相机技术。 胶囊相机技术是一种用于替代内窥镜对人体消化道进行检查的技术。...
MagnaChip推出胶囊相机专用CMOS图像传感器
01-19
MagnaChip Semiconductor公司推出了一款专为胶囊相机设计的CMOS图像传感器。据介绍，这款新产品可为用户提供具备高质量图像的低功率胶囊相机技术。 胶囊相机技术是一种用于替代内窥镜对人体消化道进行检查的技术。...
融合小波变换与胶囊网络的纹理图像分类算法
02-11
胶囊网络作为一种新型深度学习网络,胶囊结构可以编码特征的姿态、纹理、色调等信息,对图像具有良好的纹理特征编码能力。针对胶囊网络的初级特征提取网络过于简单、空间特征表达能力不足的问题,提出了一种结合深度...
H5移动端调用相册和相机功能
月落星河
06-20 9167
//只调取照相 accept是控制image类型 <input type="file" id='image' accept="image/*" capture='camera' name="file"> <input type="file" name="file" style="margin-top:20px;"> 就能调用到手机端的相机了，但是这个inpu...
移动端和vue接入腾讯地图前端定位组件位置不准确以及自己创建地图
月落星河
06-16 6090
1.介绍 关于腾讯地图开发的博客还是挺少的，此教程只是给一些初进入接入腾讯地图文档的作为参考，我也是一知半解，但是对于一些需要简单接入地图的小伙伴就足够了，因为我也是看着官方文档来写的，所以以官方文档为准腾讯地图api官方接入文档 温馨提示：运行的代码必须是在sever上的，不然没有效果，vscode可以下载liverserver去启一个服务，或者使用webpack，也可以部署到服务器也可以 2.展示  　2.1：展示官方文档中的前端定位中的demo 上面二维码可以看到定位组件展示的效果 3.
怎么用keras实现用胶囊网络对（224,224）的图像进行3分类
04-23
然后，您可以按照以下步骤实现使用胶囊网络对（224,224）的图像进行3分类： 1. 导入所需库和模型 ``` from keras import layers, models, optimizers from keras.layers import Dropout, Flatten, Dense, Input, ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月落星河°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值