C# .net mvc 实战项目实现首页图片轮播功能（三）

最新推荐文章于 2024-03-25 00:05:41 发布

yangzm996

最新推荐文章于 2024-03-25 00:05:41 发布

阅读量1.3k

点赞数 4

分类专栏： MVC C# 文章标签： c# mvc html

本文链接：https://blog.csdn.net/weixin_39448579/article/details/120312621

版权

C# 同时被 2 个专栏收录

36 篇文章 18 订阅

订阅专栏

MVC

8 篇文章 4 订阅

订阅专栏

效果图
在这里插入图片描述
实时显示图片停留进度，白色满格后自动切换下一张。也可手动点击切换。

首页视图代码

@{
    ViewBag.Title = "南海核电";
}
<head>
    <link rel='stylesheet' href="~/Content/swiper.css">
    <link rel="stylesheet" href="~/Content/style.css">
</head>
<body>
    <div class="wrapper" style="margin-top:20px;margin-left:20px;width:1100px;height:600px;">
        <div class="swiper-container swiper-container"style="width:1100px;height:600px;">
            <hr />
            <div class="swiper-wrapper"  style="width:1100px;height:600px;">               
                <div class="swiper-slide" style="width:1100px;height:600px;"><img src="~/Content/image/图片1.jpg" alt=""></div>
                <div class="swiper-slide" style="width:1200px;height:600px;"><img src="~/Content/image/图片2.jpg" alt=""></div>
                <div class="swiper-slide" style="width:1200px;height:600px;"><img src="~/Content/image/图片3.jpg" alt=""></div>
                <div class="swiper-slide" style="width:1200px;height:600px;"><img src="~/Content/image/图片4.jpg" alt=""></div>
                <div class="swiper-slide" style="width:1200px;height:600px;"><img src="~/Content/image/图片5.jpg" alt=""></div>
                <div class="swiper-slide" style="width:1200px;height:600px;"><img src="~/Content/image/图片6.jpg" alt=""></div>           
            </div>
            <hr />
            <!-- 追記 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <script src="~/Content/swiper.js"></script>
    <script src="~/Content/script.js"></script>
    <div style="margin-top:50px">
        <p><span style="padding-left:2em"/>段落一</p>
        <p><span style="padding-left:2em"/>段落二</p>
    </div>
</body>

关键的文件放在了网盘共享，下载导入自己的Content文件夹就好了。
在这里插入图片描述

链接：https://pan.baidu.com/s/1TK4Lt5msy8D0tHAi3pZAQA
提取码：677g

yangzm996

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
3
评论
C# .net mvc 实战项目实现首页图片轮播功能（三）

效果图实时显示图片停留进度，白色满格后自动切换下一张。也可手动点击切换。首页视图代码@{ ViewBag.Title = "南海核电";}<head> <link rel='stylesheet' href="~/Content/swiper.css"> <link rel="stylesheet" href="~/Content/style.css"></head><body> <div cl
复制链接

扫一扫