700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 基于HTML5的移动Web应用——Bootstrap 样式案例:制作轮播图特效

基于HTML5的移动Web应用——Bootstrap 样式案例:制作轮播图特效

时间:2023-11-06 18:00:00

相关推荐

基于HTML5的移动Web应用——Bootstrap 样式案例:制作轮播图特效

需求说明

使用轮播图插件布局网页的结构和样式图片切换的等待时间是2秒修改轮播图的样式,隐藏左右两边的控制箭头,不过点击左右两侧原来按钮的位置依然可以控制图片切换

运行效果

参考代码

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><title>美联英语在线VIP-真人在线英语学习-美联英语免费在线学习网站 - 美联英语在线VIP</title><link rel="stylesheet" href="css/bootstrap.min.css"/><link rel="stylesheet" href="css/myCSS.css"/></head><body><!--top--><div class="clearfix" id="layout_toper"><div class="container"><div class="clearfix"><div class="pull-left "><span><i class="glyphicon glyphicon-phone-alt"></i>&nbsp;400-777-8828</span><span >&nbsp;</span><a class=" ltitem " href="javascript:;" lang="101">中文</a><a class=" ltitem " href="javascript:;" lang="102">英文</a></div><div class="pull-right"><a class="btn btn-danger btn-sm" href="#">免费注册</a><a class="btn btn-default btn-sm" href="#" data-toggle="modal">登录</a></div></div></div></div><!--焦点图--><section class="carousel slide" id="shared_carousel" data-ride="carousel"><!-- 序号 --><ol class="carousel-indicators"><li class="active" data-target="#shared_carousel" data-slide-to="0"></li><li class="" data-target="#shared_carousel" data-slide-to="1"></li><li class="" data-target="#shared_carousel" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active" style="background-color:#ffffff;"><img class="img-responsive" src="image/img1.jpg" alt="..."><div class="carousel-caption"><span class="subject"></span></div></div><div class="item" style="background-color:#ffffe5;"><img class="img-responsive" src="image/img2.jpg" alt="..."><div class="carousel-caption"><span class="subject"></span></div></div><div class="item"><img class="img-responsive" src="image/img3.jpg" alt="..."><div class="carousel-caption"><span class="subject"></span></div></div></div><a class="left carousel-control " data-slide="prev" href="#shared_carousel" role="button"><span class="sr-only">Previous</span></a><a class="right carousel-control " data-slide="next" href="#shared_carousel" role="button"><span class="sr-only">Next</span></a></section><script src="js/jquery-1.12.4.js"></script><script src="js/bootstrap.min.js"></script><script>//两秒钟执行一次$('.carousel').carousel({interval: 2000})</script></body></html>

mycss.css

body {font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;}#layout_toper {height: 35px;line-height: 35px;background-color: gray;color: #fff;}.ltitem{color: #fff;display: inline-block;height: 35px;line-height: 35px;padding: 0 10px;}.ltitem:hover{color: #fff;background: #bdbdbd;}

超全面的测试IT技术课程,0元立即加入学习!有需要的朋友戳:

腾讯课堂测试技术学习地址

欢迎转载,但未经作者同意请保留此段声明,并在文章页面明显位置给出原文链接。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。