我是靠谱客的博主 微笑月亮,最近开发中收集的这篇文章主要介绍图片轮播 内嵌网页,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

 1 <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="6000">
 2     @*<ol class="carousel-indicators">
 3         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 4         <li data-target="#myCarousel" data-slide-to="1"></li>
 5         <li data-target="#myCarousel" data-slide-to="2"></li>
 6         <li data-target="#myCarousel" data-slide-to="3"></li>
 7         <li data-target="#myCarousel" data-slide-to="4"></li>
 8     </ol>*@
 9     <div class="carousel-inner" role="listbox">
10         <div class="item active">
11             <img src="~/images/tupian1.png" @*alt="ASP.NET"*@ class="img-responsive" />
12             @*<div class="carousel-caption" role="option">
13                 <p>
14                     Learn how to build ASP.NET apps that can run anywhere.
15                     <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409">
16                         Learn More
17                     </a>
18                 </p>
19             </div>*@
20         </div>
21         <div class="item">
22             <img src="~/images/tupian2.png" @*alt="Visual Studio"*@ class="img-responsive" />
23             @*<div class="carousel-caption" role="option">
24                 <p>
25                     There are powerful new features in Visual Studio for building modern web apps.
26                     <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409">
27                         Learn More
28                     </a>
29                 </p>
30             </div>*@
31         </div>
32         <div class="item">
33             <img src="~/images/tupian3.png" @*alt="Package Management"*@ class="img-responsive" />
34             @*<div class="carousel-caption" role="option">
35                 <p>
36                     Bring in libraries from NuGet, Bower, and npm, and automate tasks using Grunt or Gulp.
37                     <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409">
38                         Learn More
39                     </a>
40                 </p>
41             </div>*@
42         </div>
43         <div class="item">
44             <img src="~/images/tupian4.png" @*alt="Microsoft Azure"*@ class="img-responsive" />
45             @*<div class="carousel-caption" role="option">
46                 <p>
47                     Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.
48                     <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">
49                         Learn More
50                     </a>
51                 </p>
52             </div>*@
53         </div>
54         <div class="item">
55             <img src="~/images/tupian5.png" @*alt="Microsoft Azure"*@ class="img-responsive" />
56             @*<div class="carousel-caption" role="option">
57                 <p>
58                     Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.
59                     <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">
60                         Learn More
61                     </a>
62                 </p>
63             </div>*@
64         </div>
65     </div>
66     @*<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
67         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
68         <span class="sr-only">Previous</span>
69     </a>
70     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
71         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
72         <span class="sr-only">Next</span>
73     </a>*@
74 </div>

 内嵌网页自适应高

 1 <div class="content">
 2         <iframe src="http://192.168.2.18:9080/wsyt/" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="changeFrameHeight()" style="width:100%;"></iframe>
 3     </div>
 4     </div>
 5 <script type="text/javascript" language="javascript">
 6 
 7     function changeFrameHeight() {
 8         var ifm = document.getElementById("iframepage");
 9         ifm.height = document.documentElement.clientHeight;
10     }
11     window.onresize = function () {
12         changeFrameHeight();
13     }
14 </script>

 

转载于:https://www.cnblogs.com/chonghanyu/p/6828341.html

最后

以上就是微笑月亮为你收集整理的图片轮播 内嵌网页的全部内容,希望文章能够帮你解决图片轮播 内嵌网页所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(36)

评论列表共有 0 条评论

立即
投稿
返回
顶部