1、全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选</title>
<script src="../../day05/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<li><input type="checkbox">猫和老鼠</li>
<li><input type="checkbox">樱桃小丸子</li>
<li><input type="checkbox">足球小子</li>
<li><input type="checkbox">七龙珠</li>
<li><input type="checkbox">美少女战士</li>
<li><input type="checkbox">天线宝宝</li>
<li><input type="checkbox">海尔兄弟</li>
<li><input type="checkbox">葫芦娃</li>
<li><input type="checkbox">大头儿子小头爸爸</li>
<li><input type="checkbox">蜡笔小新</li>
<li><input type="checkbox">十二生肖</li>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
</body>
</html>
<script>
$('button:eq(0)').click(function () {
$('input').prop('checked', true)
})
$('button:eq(1)').click(function () {
$('input').prop('checked', false)
})
$('button').eq(2).click(function () {
// 给每一个input都执行each里面匿名函数的操作
// 如果写了一个参数i，代表当前遍历的是第i个元素
$('input').each(function (i) {
// 首先取出来当前这个input的状态
var state = $(this).prop('checked')
$(this).prop('checked', !state)
})
})
</script>
2、选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡</title>
<style>
button {
width: 200px;
height: 100px;
font-size: 40px;
background-color: pink;
margin-left: 50px;
display: inline-block;
}
div {
width: 970px;
height: 600px;
font-size: 50px;
background-color: yellow;
margin-left: 50px;
margin-top: 50px;
display: none;
}
.active {
font-size: 50px;
background-color: blue;
}
.show {
display: block;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button class="active">周杰伦</button>
<button>王力宏</button>
<button>张学友</button>
<button>刘德华</button>
<div class="show">菊花台、千里之外、七里香、霍元甲、听妈妈的话、稻香、双节棍、简单爱</div>
<div>花田错、龙的传人、唯一</div>
<div>慢慢、吻别、一千个伤心的理由</div>
<div>谢谢你的爱、冰雨、天意、忘情水</div>
</body>
</html>
<script>
$('button').click(function () {
// 先将所有的class去掉，然后给指定的添加
// $('button').removeClass('active')
// $(this).addClass('active')
$(this).addClass('active').siblings().removeClass('active')
// 应该显示第几个div
var index = $('button').index($(this))
// 将指定的div添加样式，其他div删除样式
$('div').eq(index).addClass('show').siblings().removeClass('show')
})
</script>
3、汽车轮播
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;list-style:none;}
.clearfix:after{display:block;content:'';clear:both;}
.box{width:360px;height:212px;margin:0 auto;position:relative;overflow: hidden;}
.ul_list{position:absolute;bottom:20px;left:50%;margin-left:-65px;}
.ul_list li{float:left;width:20px;height:20px;background:#fff;border-radius:50%;margin-left:5px;border:2px solid red;}
.pic{width:1800px;}
.pic img{float:left;}
.ul_list .active{width:20px;height:20px;background:red;border-radius:50%;margin-left:5px;border:2px solid #fff;}
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="box">
<div class="pic clearfix" id='pic'>
<img src="img/1.jpg" class="show"/>
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
</div>
<ul class="ul_list" id='ul_btn'>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
$('#ul_btn > li').mouseover(function () {
// 先将下面选中小点切换，当前添加样式，其它删除样式
$(this).addClass('active').siblings().removeClass('active')
// 对于图片的显示，应该移动div的left值
var index = $('#ul_btn > li').index($(this))
// $('#pic > img').eq(index).addClass('show').siblings().removeClass('show')
$('#pic').animate({'margin-left': -index * 360}, 500)
})
</script>
4、爱奇艺
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ padding:0; margin:0; list-style:none;}
.piclist{ height:410px; width:100%; position:relative;}
.piclist li{height:410px; opacity:0; width:100%; position:absolute; top:0; left:0;}
.li1{ background:url(img/bg.jpg) center; }
.li2{ background:url(img/bg1.jpg) center; }
.li3{ background:url(img/bg2.jpg) center; }
.li4{ background:url(img/bg3.jpg) center; }
.li5{ background:url(img/bg4.jpg) center; }
.li6{ background:url(img/bg5.jpg) center; }
.li7{ background:url(img/bg6.jpg) center; }
.li8{ background:url(img/bg7.jpg) center; }
.li9{ background:url(img/bg8.jpg) center; }
.li10{ background:url(img/bg9.jpg) center; }
.btnlist{ width:200px; height:300px; padding:14px 18px 40px; background:url(img/site-focuslist_bg.png); position:absolute; top:0; right:30px;}
.btnlist li{ height:33px; line-height:33px; }
.btnlist a{ color:#FFF; font-size:12px; text-decoration:none; display:block; padding-left:10px;}
.active{ background:#396;}
.piclist .show{ opacity:1;}
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul class="piclist" id="pic">
<li class="li1 show"></li>
<li class="li2"></li>
<li class="li3"></li>
<li class="li4"></li>
<li class="li5"></li>
<li class="li6"></li>
<li class="li7"></li>
<li class="li8"></li>
<li class="li9"></li>
<li class="li10"></li>
</ul>
<ol class="btnlist" id="btn">
<li class="active"><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
</ol>
</body>
</html>
<script>
$(function () {
$('#btn > li').mouseover(function () {
$(this).addClass('active').siblings().removeClass('active')
// 显示对应的图片
var index = $('#btn > li').index($(this))
// 动画的将透明度修改为1，图片就会显示出来
$('#pic > li').eq(index).stop().animate({opacity: 1}, 500).siblings().stop().animate({opacity: 0}, 500)
})
})
</script>
网友评论