一、轮播图
1.1、效果
1.2、代码
banner.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Banner轮播图</title>
<script src="./js/jquery-1.12.3.min.js"></script>
<style>
/** 整体布局样式 **/
*{
margin: 0; padding: 0}
.banner{
width: 1350px; height: 500px; border: 1px solid; margin: 80px auto; position: relative;}
.banner .img{
list-style: none; padding: 0;}
.banner .img li{
position: absolute; display: none}
.banner .img li img{
width: 1350px; height: 500px}
.banner .img .active-img{
display: block}
/** 左右按钮样式 **/
.left-btn, .right-btn{
position: absolute;
width: 50px;
height: 70px;
font-size: 35px;
background-color: gray;
color: white;
top:40%;
text-align: center;
cursor: pointer;
line-height: 60px;
}
.right-btn{
right: 0;
}
/** 锚点样式 **/
.banner .anchor{
list-style: none; padding: 0; position: absolute; bottom: 15px; left: 45%}
.banner .anchor li{
display: inline-block;
width: 22px;
height: 22px;
background-color: gray;
border-radius: 50%;
}
.banner .anchor .active-anchor{
background-color: coral}
.banner .anchor li{
cursor: pointer}
</style>
</head>
<body>
<div class="banner">
<ul class="img">
<li class="active-img"><a href="#"><img src="./img/banner/1.jpg"></a></li>
<li><a href="#"><img src="./img/banner/2.jpg"></a></li>
<li><a href="#"><img src="./img/banner/3.jpg"></a></li>
<li><a href="#"><img src="./img/banner/4.jpg"></a></li>
<li><a href="#"><img src="./img/banner/5.jpg"></a></li>
</ul>
<div class="left-btn"><<</div>
<div class="right-btn">>></div>
<ul class="anchor">
<li class="active-anchor"><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>
</body>
<script type="text/javascript">
//获取jq操作对象
var $leftBtn =$('.left-btn');
var $rightBtn = $('.right-btn');
var $imgLi = $('.img li');
var $anchorLi = $('.anchor li');
//当前显示序号
var index = 0;
//给左右按钮添加点击效果
$rightBtn.click(function () {
//防止动画积累,当jq对象在执行动画，不触发事件
if($imgLi.is(':animated')){
return;
}
//点击右键时，淡出当前图片，且移除当前锚点选中效果，再将Index序号加1
$imgLi.eq(index).fadeOut();
$anchorLi.eq(index).removeClass('active-anchor');
index++;
//根据图片张数，判断index增加边界值，触发时设置为初始值0
if(index == 5){
index = 0;
}
//index加1后，淡入当前图片，且为当前锚点添加选中效果
$imgLi.eq(index).fadeIn();
$anchorLi.eq(index).addClass('active-anchor');
})
$leftBtn.click(function () {
//防止动画积累,当jq对象在执行动画，不触发事件
if($imgLi.is(':animated')){
return;
}
$imgLi.eq(index).fadeOut();
$anchorLi.eq(index).removeClass('active-anchor');
index--;
if (index == -1){
index = 4;
}
$imgLi.eq(index).fadeIn();
$anchorLi.eq(index).addClass('active-anchor');
})
//给锚点添加移入/移出效果
$anchorLi.mouseenter(function () {
$imgLi.eq(index).fadeOut();
$anchorLi.eq(index).removeClass('active-anchor');
//index()方法返回当前节点在兄弟节点中的序号，从0开始计算
index=$(this).index();
$imgLi.eq(index).fadeIn();
$anchorLi.eq(index).addClass('active-anchor');
})
//添加自动播放效果
var timer = setInterval(function () {
//防止动画积累,当jq对象在执行动画，不触发事件
if($imgLi.is(':animated')){
return;
}
$imgLi.eq(index).fadeOut();
$anchorLi.eq(index).removeClass('active-anchor');
index++;
if(index == 5){
index = 0;
}
$imgLi.eq(index).fadeIn();
$anchorLi.eq(index).addClass('active-anchor');
},2000)
</script>
</html>
二、百叶窗
2.1、效果
2.2、代码
window-shades.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百叶窗</title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
*{
margin: 0;padding: 0}
.shades{
width: 1400px;
height: 500px;
margin: 80px auto;
position: relative;
border:1px solid;
overflow: hidden;
}
.shades ul{
list-style: none}
.shades li{
position: absolute}
.cover{
width: 100%;height: 500px;background: rgba(0,0,0,.5);position: absolute}
.li2{
left:280px;}
.li3{
left:560px;}
.li4{
left:840px;}
.li5{
left:1120px;}
</style>
</head>
<body>
<div class="shades">
<ul>
<li class="li1"><div class="cover"></div><img src="./img/banner/1.jpg" alt=""/></li>
<li class="li2"><div class="cover"></div><img src="./img/banner/2.jpg" alt=""/></li>
<li class="li3"><div class="cover"></div><img src="./img/banner/3.jpg" alt=""/></li>
<li class="li4"><div class="cover"></div><img src="./img/banner/4.jpg" alt=""/></li>
<li class="li5"><div class="cover"></div><img src="./img/banner/5.jpg" alt=""/></li>
</ul>
</div>
</body>
<script>
var $shades =$('.shades li');
//给li添加进入和移出事件（控制明暗变化）
$shades.mouseenter(function(){
$(this).find('.cover').stop(true).fadeOut();
}).mouseleave(function(){
$shades.stop(true);
$(this).find('.cover').stop(true).fadeIn();
$shades.eq(1).animate({
"left":280},500);
$shades.eq(2).animate({
"left":560},500);
$shades.eq(3).animate({
"left":840},500);
$shades.eq(4).animate({
"left":1120},500);
})
//给li添加事件（控制位置）
$('.li1').mouseenter(function(){
$shades.stop(true);
$shades.eq(1).animate({
"left":1000},500);
$shades.eq(2).animate({
"left":1100},500);
$shades.eq(3).animate({
"left":1200},500);
$shades.eq(4).animate({
"left":1300},500);
})
$('.li2').mouseenter(function(){
$shades.stop(true);
$shades.eq(1).animate({
"left":100},500);
$shades.eq(2).animate({
"left":1100},500);
$shades.eq(3).animate({
"left":1200},500);
$shades.eq(4).animate({
"left":1300},500);
})
$('.li3').mouseenter(function(){
$shades.stop(true);
$shades.eq(1).animate({
"left":100},500);
$shades.eq(2).animate({
"left":200},500);
$shades.eq(3).animate({
"left":1200},500);
$shades.eq(4).animate({
"left":1300},500);
})
$('.li4').mouseenter(function(){
$shades.stop(true);
$shades.eq(1).animate({
"left":100},500);
$shades.eq(2).animate({
"left":200},500);
$shades.eq(3).animate({
"left":300},500);
$shades.eq(4).animate({
"left":1300},500);
})
$('.li5').mouseenter(function(){
$shades.stop(true);
$shades.eq(1).animate({
"left":100},500);
$shades.eq(2).animate({
"left":200},500);
$shades.eq(3).animate({
"left":300},500);
$shades.eq(4).animate({
"left":400},500);
})
</script>
</html>
三、手风琴
3.1、效果
3.2、代码
accordion.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
*{
margin: 0; padding: 0}
.accordion{
width: 600px; margin: 80px auto; border: 1px solid lightgray; }
.accordion ul{
list-style: none}
.accordion ul li{
border-bottom: 1px solid lightgray}
.accordion ul li h3{
background-color: coral;color:white;position: relative;}
.accordion ul li h3 span{
position: absolute; right: 5px}
.accordion ul .content{
display: none}
</style>
</head>
<body>
<div class="accordion">
<ul>
<li>
<h3>标题一<span>></span></h3>
<div class="content">内容一</div>
</li>
<li>
<h3>标题二 <span>></span></h3>
<div class="content">内容二</div>
</li>
<li>
<h3>标题三 <span>></span></h3>
<div class="content">内容三</div>
</li>
</ul>
</div>
<script>
$('h3').click(function(){
if($(this).siblings().is(':visible')){
//如果是可见的，就把内容收起来
$(this).siblings().slideUp();
//变更符号
$(this).find('span').html('>');
}else{
//在展开当前标题的内容之前，先把其他内容收起来
$(this).parent().siblings().find('.content').slideUp();
//如果是不可见的，把内容div显示
$(this).siblings().slideDown();
$(this).parent().siblings().find('span').html('>');
$(this).find('span').html('v');
}
})
</script>
</body>
</html>
四、选项卡
4.1、效果
4.2、代码
tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
*{
margin: 0; padding: 0}
.tabs{
width: 300px; height: 90px; margin: 80px auto; border: 1px solid}
.tabs .primary-menu{
width: 100%; height: 30px; text-align: center; line-height: 30px}
.tabs .primary-menu ul{
list-style: none}
.tabs .primary-menu ul li{
float: left; width: 100px; background-color: aliceblue; cursor: pointer}
.tabs .primary-menu ul .active-primary-menu{
background-color: coral}
.tabs .sub-menu{
width: 100%; height: 60px; text-align: center; line-height: 60px; background-color: aquamarine; position: relative}
.tabs .sub-menu div{
position: absolute;display: none}
.tabs .sub-menu .active-sub-menu{
display: block}
</style>
</head>
<body>
<div class="tabs">
<div class="primary-menu">
<ul>
<li class="active-primary-menu">首页</li>
<li>手机</li>
<li>电脑</li>
</ul>
</div>
<div class="sub-menu">
<div class="active-sub-menu">推荐 | 特价</div>
<div>小米 | 华为 | 苹果</div>
<div>联想 | 惠普 | mac</div>
</div>
</div>
<script>
var $primaryMenu=$('.primary-menu li');
var $subMenu=$('.sub-menu div');
$primaryMenu.mouseenter(function(){
//上边是li部分：把已经有的li类名去掉，然后给当前点击的li加类名
$(this).addClass('active-primary-menu').siblings().removeClass('active-primary-menu');
//下边div部分：把已经有的div类名去掉，然后给当前点击的li对应的div添加类名
$subMenu.eq($(this).index()).addClass('active-sub-menu').siblings().removeClass('active-sub-menu');
});
</script>
</body>
</html>