设为首页 收藏本站
查看: 1011|回复: 0

[经验分享] 图片轮播 内嵌网页

[复制链接]

尚未签到

发表于 2017-7-1 10:51:08 | 显示全部楼层 |阅读模式
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>

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-389971-1-1.html 上篇帖子: 分享Kali Linux 2017.1镜像 下篇帖子: snapshot(持续更新中)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表