需求说明
使用轮播图插件布局网页的结构和样式图片切换的等待时间是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> 400-777-8828</span><span > </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元立即加入学习!有需要的朋友戳:
腾讯课堂测试技术学习地址
欢迎转载,但未经作者同意请保留此段声明,并在文章页面明显位置给出原文链接。