实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自己做的前端页面</title>
<link href="./static/css/bootstrap.css" rel="stylesheet">
<style>
body {
background-color: #d0e9c6;
overflow: scroll;
}
#nav {
background-color: #7bb7fa;
border-radius: 0;
margin: 0;
}
/*导航右侧*/
#nav .navbar-nav {
margin-right: -47px;
}
#nav a {
color: #222222;
}
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
padding-left: 0;
}
.container {
}
/*.container:nth-child(2) div{*/
/* background-color: #7bb7fa;*/
/* !*border:1px solid red;*!*/
/*}*/
#zbtn button {
border-radius: 15%;
}
.dropdown-menu {
min-width: 1.1em;
text-align: center;
border: 0;
}
/*右下角按钮*/
.dropdown-menu > li > a {
width: 62px;
padding: 0;
color: #c9302c;
border: 1px solid red;
margin: 0 0 10px 0;
border-radius: 15%;
}
.box {
width: 100%;
/*height: 500px;*/
}
.box ul {
padding: 0;
margin: 0;
}
/*初始化时,必须先把全部图片先隐藏*/
.box ul:first-of-type li {
list-style: none;
display: none;
}
.box ul:first-of-type img {
width: 100%;
height: 296px;
}
.box ul:last-of-type {
text-align: center;
margin-top: -50px;
}
/*轮播图按钮*/
.box ul:last-of-type li {
list-style: none;
display: inline-block;
width: 26px;
height: 26px;
line-height: 26px;
background-color: black;
color: white;
border-radius: 50%;
margin: 0 9px;
}
.box ul:last-of-type li:hover {
cursor: pointer;
background-color: white;
color: black;
}
#list {
/*文本不溢出的条件：1、 overflow: hidden;2、text-overflow: ellipsis;3、white-space: nowrap;
4、给UL添加一个line-height:0.1rem*/
/*溢出隐藏*/
display: block;
overflow: hidden;
/*溢出文本省略*/
text-overflow: ellipsis;
/*禁止换行*/
white-space: nowrap;
/*padding: 0;*/
margin-top: 10px;
/* border-right: 1px solid violet;*/
/*border-bottom: 1px solid violet;*/
min-height: 348px;
}
#list ul {
/*padding-left: 0;*/
height: 348px;
/*box-sizing: border-box;*/
margin-bottom: 0;
line-height: 0.8rem;
overflow: hidden;
}
#list ul li {
/* display: block; */
font-size: 0.7em;
list-style: none;
}
#list ul li:hover {
background-color: #999999;
}
#list ul li a {
display: block;
}
/*.panel-heading{*/
/* background-color: whitesmoke;*/
/*}*/
.panel-body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<nav id="nav" class="navbar navbar-btn">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国大陆</a>
</div>
<div>
<div class="pull-left">
<ul class="nav navbar-nav">
<li style="color:aliceblue">尊敬的用户：id55669</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">购物车</a></li>
<li><a href="#">收藏栏</a></li>
<li><a href="#">联系小二</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出登录</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--右侧导航-->
<div class="pull-right">
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1 col-md-pull-12">
<ul class="nav navbar-nav">
<li><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li><a href="#">我的淘宝</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">收藏夹</a></li>
<li><a href="#">商品分类</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div id="row2" class="row">
<div id="list" class="col-md-2" style="white-space: nowrap;line-height: 20px;margin-top: 10px;height: 100%;">
<ul class="list-group">
<li class="list-group-item"><a href="#">*** / *** / 内衣</a></li>
<li class="list-group-item"><a href="#">鞋靴 / 箱包 / 配件</a></li>
<li class="list-group-item"><a href="#">玩具 / 孕产 / 用品</a></li>
<li class="list-group-item"><a href="#">家电 / 数码 / 手机</a></li>
<li class="list-group-item"><a href="#">美妆 / 洗护 / 保健品</a></li>
<li class="list-group-item"><a href="#">珠宝 / *** / ***</a></li>
<li class="list-group-item"><a href="#">运动 / 户外 / 乐器</a></li>
<li class="list-group-item"><a href="#">游戏 / 动漫 / 影视</a></li>
<li class="list-group-item"><a href="#">美食 / 生鲜 / 零食</a></li>
<!-- <li class="list-group-item"><a href="#">鲜花 / 宠物 / 农资</a></li>-->
<!-- <li class="list-group-item"><a href="#">工具 / 装修 / 建材</a></li>-->
<!-- <li class="list-group-item"><a href="#">家具 / 家饰 / 家纺</a></li>-->
<!-- <li class="list-group-item" ><a href="#">汽车 / *** / 用品</a></li>-->
<!-- <li class="list-group-item"><a href="#">办公 / DIY / 五金</a></li>
<li class="list-group-item"><a href="#">百货 / 餐厨 / 保健</a></li> -->
</ul>
</div>
<div class="col-md-6">
<div class="box" style="margin-top: 10px;">
<ul class="slider">
<!- 只需要将指定的某一个显示出来即可,其它的用JS控制-->
<li style="display: block;" id="active"><img style="height:350px;"
src="static/images/banner0.jpg" alt=""></li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="col-md-4" style="padding:0 0 0 10px;">
<img style="margin-top: 10px;height: 350px;width:380px;" src="./static/images/you3.png" alt="">
</div>
</div>
<div id="row3" class="row">
<div class="col-md-6" style="padding:0;">
<div class="panel panel-default">
<div class="panel-heading">***</div>
<div class="panel-body">
<img class="img-thumbnail" src="./static/images/you.png" alt="">
</div>
</div>
</div>
<div class="col-md-6" style="padding:0;">
<div class="panel panel-info">
<div class="panel-heading">***</div>
<div class="panel-body">
<img class="img-responsive" src="./static/images/you1.png" alt="">
</div>
<!-- <button type="button" class="btn btn-danger">点我</button>-->
</div>
</div>
<div id="row1" class="row" style="display: block">
<div class="col-md-6" style="border: 1px solid lightgreen;height: 100%;">
</div>
<div class="col-md-6" style="border: 1px solid lightgreen;height: 100%;"></div>
<div>
</div>
<script src="./static/js/jquery-3.4.1.js"></script>
<script src="./static/js/bootstrap.js"></script>
<script>
// 获取到所有按钮
var lis = document.querySelectorAll('.box ul:last-of-type li');
// 获取当前正在显示的图片
var currentImg = document.querySelector('#active img');
// 点击后切换图片
for (var i = 0; i < lis.length; i++) {
// 自定义索引,获取到当前正在显示的图片索引
lis[i].index = i;
// 给每一个按钮添加点击事件
lis[i].onclick = function () {
currentImg.src = 'static/images/banner' + parseInt(this.index) + '.jpg';
};
}
// 用间歇式定时器, 每隔2秒随机切换图片
setInterval(function () {
//制作做一个1-3的随机数，random:0-1 , *3后为1-3,fool：向下取整
var n = Math.floor(Math.random() * 3);
currentImg.src = 'static/images/banner' + parseInt(n) + '.jpg';
//console.log(lis[n-1]);
Object.keys(lis).forEach(function (index) {
lis[index].setAttribute('style', 'background-Color:none');
});
lis[n].setAttribute('style', 'background-color:red');
//console.log(this);
}, 2000);
</script>
<script>
var btn = $('#row3 button');
var row1 = $('#row1');
btn.on('click', function () {
row1.toggle(1000);
})
</script>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例