一、轮播图
1、项目介绍
此个小项目主要是能达到当我们可以根据是否需要循坏从而达到图片的切换效果，循坏切换可以达到不管我们点击左右按钮多少次都可以对图片进行切换，单边切换则达到图片的第一张或最后一张时无法在继续点击和切换。
2、项目源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#wrap {
position: relative;
width: 529px;
height: 300px;
/* border:2px solid #000; */
margin: 100px auto 0;
user-select: none;
}
ul li.active {
display: block;
}
ul li {
display: none;
position: absolute;
width: 529px;
height: 300px;
}
.btn {
position: absolute;
width: 25px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: pointer;
top: calc(50% - 25px);
}
.right {
right: 0;
}
.checkBtn {
position: absolute;
top: -30px;
/* width:75px; */
height: 30px;
}
.checkBtn span {
float: left;
width: 75px;
height: 30px;
background-color: #ccc;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.checkBtn span.on {
background-color: #90f;
}
p.description {
position: absolute;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 30px;
font-weight: bold;
color: #fff;
}
p.top {
top: 0;
}
p.bottom {
bottom: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div class="checkBtn">
<span class='on'> 循环切换 </span>
<span> 单边切换 </span>
</div>
<ul>
<li class='active'><img src="images/1.jpg" alt="" width='100%' height='100%'></li>
<li><img src="images/2.jpg" alt="" width='100%' height='100%'></li>
<li><img src="images/3.jpg" alt="" width='100%' height='100%'></li>
<li><img src="images/4.jpg" alt="" width='100%' height='100%'></li>
<li><img src="images/5.jpg" alt="" width='100%' height='100%'></li>
</ul>
<div class="btn left">
</div>
<div class="btn right"> > </div>
<p class="description top"> <span class='text'>1</span>/5 </p>
<p class="description bottom"> A </p>
</div>
<script>
var btns = document.querySelectorAll('.checkBtn span'),
leftBtn = document.getElementsByClassName('left')[0],
rightBtn = document.getElementsByClassName('right')[0],
olis = document.getElementsByTagName("li"),
txt = document.getElementsByClassName("text")[0],
bot = document.getElementsByClassName("bottom")[0],
index = 0, //定义一个变量用于标记下标的值;
arr = ["A", "B", "C", "D", "E"],
mark = true; // 循环切换的时候为true , 单边为false;
//循环切换
btns[0].onclick = function () {
// alert( 1 )
console.log(this)
// btns[0].className = 'on'
this.className = 'on'
btns[1].className = ''
mark = true; //循环切换的时候为true
}
//单边切换
btns[1].onclick = function () {
// alert( 1 )
this.className = 'on'
btns[0].className = ''
mark = false; //单边为false;
}
//右边的点击事件
rightBtn.onclick = function () {
// console.log( 123 )
// console.log( olis[index] )
olis[index].className = ''; //当前的图片消失
index++; //标记下一张
// 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4
if (mark) {
//循环:
if (index > 4) {
index = 0;
}
} else {
//单边;
if (index > 4) {
index = 4
alert("你点阿,别点了!我已经到底了")
}
}
// index +=1;
olis[index].className = 'active';//下一张的图片的显示
//下标与计数的差值为1; 0+1 = 1
txt.innerHTML = index + 1;
//["A","B","C","D","E"]
bot.innerHTML = arr[index]; //arr[1]
}
//左边的点击事件
leftBtn.onclick = function () {
// console.log( 123 )
// console.log( olis[index] )
olis[index].className = ''; //当前的图片消失
index--; //标记下一张
if (mark) {
//循环:
if (index < 0) {
index = 4;
}
} else {
//单边;
if (index < 0) {
index = 0
alert("我已经是开头了")
}
}
// 4 3 2 1 0 4 3 2 1 0 4 3 2 1 0
// index +=1;
olis[index].className = 'active';//下一张的图片的显示
//下标与计数的差值为1; 0+1 = 1
txt.innerHTML = index + 1;
//["A","B","C","D","E"]
bot.innerHTML = arr[index]; //arr[1]
}
</script>
</body>
</html>3、效果展示
轮播图效果图
二、全选和全不选以及反选
项目源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案列展示——全选、全不选、反选</title>
<style>
* {
margin: 0;
padding: 0;
}
#nav {
margin: 300px auto;
width: 280px;
/* height: 305px; */
padding: 10px;
}
ul li {
list-style: none;
display: block;
width: 275px;
/* 去除重复边框 */
margin-top: -1px;
border: 1px dashed black;
cursor: pointer;
padding: 20px;
}
ul li span {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
margin-top: 2px;
background-image: url(images/ck.png);
}
ul li span.active {
background-image: url(images/cked.jpg);
}
button {
width: 50px;
height: 30px;
}
button.active {
background-color: skyblue;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<span></span>option1
</li>
<li><span></span>option2</li>
<li><span></span>option3</li>
<li><span></span>option4</li>
<li><span></span>option5</li>
<li><span></span>option6</li>
<li><span></span>option7</li>
</ul>
<div class="box">
<button>全选</button>
<button class="active">全不选</button>
<button>反选</button>
</div>
</div>
<script>
var spanS = document.getElementsByTagName('span');
var btns = document.getElementsByTagName('button');
var len = spanS.length;
var count = 0;//标记被选中的个数
for (var i = 0; i < spanS.length; i++) {
//给按钮绑定下标值
spanS[i].i = i;
//给开关进行标记
spanS[i].kaiguan = false;
spanS[i].onclick = function () {
if (this.kaiguan) {
this.className = ''
// this.kaiguan = false
count--
} else {
this.className = 'active'
// this.kaiguan = true;
count++
}
// console.log(spanS[this.i])
//开关取反
this.kaiguan = !this.kaiguan;
// console.log(count)
if (count === len) {
console.log("全选中了")
btns[0].className = 'active'
btns[1].className = ''
} else if (count === 0) {
console.log("都不选")
btns[1].className = 'active'
btns[0].className = ''
} else {
console.log('选中了' + count + '个')
btns[0].className = ''
btns[1].className = ''
}
}
}
btns[0].onclick = function () {
this.className = 'active'
btns[1].className = ''
btns[2].className = ''
//点击全选的时候，选中比为7个
count = len;
for (var i = 0; i < len; i++) {
spanS[i].className = 'active'
// 改变开关状态[一定要设置]
spanS[i].kaiguan = true;
}
}
btns[1].onclick = function () {
this.className = 'active'
btns[0].className = ''
btns[2].className = ''
count = 0
for (var i = 0; i < len; i++) {
spanS[i].className = ''
spanS[i].kaiguan = false;
}
}
btns[2].onclick = function () {
this.className = 'active'
btns[1].className = ''
btns[0].className = ''
for (var i = 0; i < len; i++) {
if (spanS[i].kaiguan === true) {
// console.log('勾上')
spanS[i].className = ''
count--
} else {
spanS[i].className = 'active'
count++
// console.log('没勾上')
}
spanS[i].kaiguan = !spanS[i].kaiguan
}
}
</script>
</body>
</html>效果展示：
全选、全不选、反选 01
三、二级选项卡
<body>
<div id="wrap">
<div>
<p>地区</p>
<ul class="list">
<li>上海</li>
<li>北京</li>
<li>天津</li>
<li>广州</li>
<li>深圳</li>
</ul>
</div>
<div>
<p>爱好</p>
<ul class="list">
<li>唱歌</li>
<li>跳舞</li>
<li>滑板</li>
<li>篮球</li>
<li>减肥</li>
</ul>
</div>
</div>
<script>
var title = document.getElementsByTagName('p');
var olist = document.getElementsByClassName('list');
var len = title.length;
for (i = 0; i < title.length; i++) {
title[i].i = i;//标记下标
title[i].flag = false;//标记开关
title[i].onclick = function () {
// console.log(this.i)
if (this.flag) {
olist[this.i].style.display = 'none'
} else {
//用于当前打开其余要关闭
for (j = 0; j < len; j++) {
olist[j].style.display = 'none';
title.flag = false;
}
olist[this.i].style.display = 'block'
}
this.flag = !this.flag
}
}
</script>
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
