.Net Mvc 轮播图片 | 使用Bootstrap原生代码的轮播图片

效果图如下：

一、其他没有写的代码表示默认即可。

二、Views视图下Shared下BannerView视图

<!-- Banner - Start -->
<div class="banner">
    <!-- 轮播图 - Start -->
    <div id="SliderShow" class="carousel slide" data-ride="carousel" data-interval="3000">
        <!-- 轮播图底部按钮 - Start -->
        <ul class="carousel-indicators">
            <li data-target="#SliderShow" data-slide-to="0" class="active"></li>
            <li data-target="#SliderShow" data-slide-to="1"></li>
            <li data-target="#SliderShow" data-slide-to="2"></li>
            <li data-target="#SliderShow" data-slide-to="3"></li>
            <li data-target="#SliderShow" data-slide-to="4"></li>
        </ul>
        <!-- 轮播图底部按钮 - End -->
        <!-- 轮播图图片 - Start -->
        <div class="carousel-inner">
            <div class="item active">
                <a href="javascript:void(0)" target="_blank">
                    <img src="~/Images/1.jpg" />
                    <div class="carousel-caption">
                        <h3>图片标题</h3>
                        <p>图片简介</p>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="javascript:void(0)" target="_blank">
                    <img src="~/Images/2.jpg" />
                    <div class="carousel-caption">
                        <h3>图片标题</h3>
                        <p>图片简介</p>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="javascript:void(0)" target="_blank">
                    <img src="~/Images/3.jpg" />
                    <div class="carousel-caption">
                        <h3>图片标题</h3>
                        <p>图片简介</p>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="javascript:void(0)" target="_blank">
                    <img src="~/Images/4.jpg" />
                    <div class="carousel-caption">
                        <h3>图片标题</h3>
                        <p>图片简介</p>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="javascript:void(0)" target="_blank">
                    <img src="~/Images/5.jpg" />
                    <div class="carousel-caption">
                        <h3>图片标题</h3>
                        <p>图片简介</p>
                    </div>
                </a>
            </div>
        </div>
        <!-- 轮播图图片 - End -->
        <!-- 轮播图片左右按钮 - Start -->
        <a class="carousel-control left" href="#SliderShow" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#SliderShow" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        <!-- 轮播图片左右按钮 - End -->
    </div>
    <!-- 轮播图 - End -->
</div>
<!-- Banner - End -->

三、Views视图下Home视图下Index视图

@{
    ViewBag.Title = "Home Page";
}
<div class="row">
    @Html.Partial("BannerView")
</div>

四、Site.css样式表

/* Others - Start */
*{ margin:0px; padding:0px;}
html{ margin:0px; padding:0px;}
body{ font:15px "Microsoft YaHei", Arial, Helvetica, Sans-serif; background:#FFFFFF; text-align:center; padding-top:0px; padding-bottom:0px; line-height:1.5;}
img{ border:0px; display:block;}
ul li,ul,li{ list-style:none;}
a{ text-decoration:none; color:#333333; text-align:center;}
a:link{ text-decoration:none; color:#333333;}
a:visited{ text-decoration:none; color:#333333;}
a:hover{ text-decoration:none; color:#E6003B;}
a:active{ text-decoration:none; color:#333333;}
.floatLeft{ float:left;}
.floatAuto{ margin:0px auto;}
.floatRight{ float:right;}
.Color{ color:#E6003B;}
.input-validation-error{ border:1px solid #E6003B;}


/* BannerView - Start */
.banner{ width:100%; overflow:hidden; float:left; margin-bottom:20px; padding-top:100px;}
.carousel-indicators{ bottom:-1px;}
.carousel-indicators li{ width:40px; height:5px; margin-left:5px; margin-right:5px; border-radius:5%;}
.carousel-indicators .active{ width:40px; height:5px; margin-bottom:1px; margin-left:5px; margin-right:5px;}
.carousel-inner .item img, .carousel-inner .item a img{ height:600px;}
.item{ width:100%; height:600px;}
.item img{ width:100%; height:100%;}
.carousel-caption{ padding-bottom:40px; background:rgba(0,0,0,0.3); left:0px; right:0px; padding-top:10px;}

/* BannerView - End */

五、下载链接