作业内容：
仿照demo4.html文件，用jQuery写一个选择项卡
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>banner轮播</title>
<style>
body,.banner,.current{
margin: 0;
padding: 0;
}
/*banner块包含所有内容*/
.banner{
position: relative;
width:710px ;
height: 300px;
margin: 50px auto;
/*background-color: blueviolet;*/
}
/*不显示属性*/
.hide{
display: none;
}
/*显示的banner属性*/
.current{
width:710px ;
position: relative;
display: block;
}
/*按钮li*/
li{
float: left;
list-style-type: none;
border-radius: 50%; /* 设置小圆点为圆形 */
width: 12px;
height: 12px;
border:solid 1px white; /*设置小圆点边框*/
/*background-color: white;*/
text-align: center; /* 设置小圆点文本居中 */
line-height: 18px; /* 设置小圆点行高为盒子高 刚好文本上下左右居中 */
margin: auto 3px;
cursor: pointer; /* 设置小圆点可以鼠标点击 */
/*display: inline;*/
}
/*li的高亮显示属性*/
.white{
background-color: white;
}
/*通过绝对定位把按钮放到图片中间*/
.btn{
position: absolute;
/*background-color: deepskyblue;*/
bottom: 40px;
left:270px;
display: block;
/*opacity: 0.5;*/
}
ul{
/*border-radius: 5px;*/
width: 120px;
position: absolute;
/*background-color: red;*/
/*display: inline-block;*/
/*margin-left: -50px;*/
}
</style>
</head>
<body>
<!--整体banner-->
<div class="banner">
<!--轮播的四张banner-->
<div id="banner1" class="current">
<img src="http://www.php.cn/tpl/Index/Static/img/banner1.jpg" alt="">
</div>
<div id="banner2" class="hide">
<img src="http://www.php.cn/tpl/Index/Static/img/banner2.jpg" alt="">
</div>
<div id="banner3" class="hide">
<img src="http://www.php.cn/tpl/Index/Static/img/banner3.jpg" alt="">
</div>
<div id="banner4" class="hide">
<img src="http://www.php.cn/tpl/Index/Static/img/banner4.jpg" alt="">
</div>
<!--按钮-->
<div class="btn">
<ul>
<li index="banner1" class="white"></li>
<li index="banner2"></li>
<li index="banner3"></li>
<li index="banner4"></li>
</ul>
</div>
</div>
<script>
// 循环给四个按钮添加点击事件
for(i=0;i<$('li').length;i++) {
$('li')[i].onclick=function () {
// alert(this)
// this.style.backgroundColor='white'
$(this).addClass('white') //设置点击的按钮高亮白实心显示
.siblings() //选择其他兄弟节点
.removeClass('white') //取消其他兄弟节点高亮白实心显示
var box='#'+$(this).attr('index') //利用索引寻找当显示banner 其实也可以使用 类.current寻找
// alert(box)
$(box)
.addClass('current') //添加banner显示属性
.removeClass('hide') //删除banner隐藏属性
.siblings() //选择其他兄弟banner
.removeClass('current') //其他兄弟banner删除显示属性
.addClass('hide') //其他兄弟banner添加隐藏属性
}
}
setInterval ("showTime()", 1000);//自动切换图片
var mouseover=null //初始化 判断鼠标是否在banner窗口上
$('.banner').mouseenter(function () {
// alert('enter')
mouseover=1
})
$('.banner').mouseleave(function () {
// alert('outer')
mouseover=null
})
function showTime() {
// alert($('.white'))
flag=$('.white').attr('index')
if(mouseover==1) {} //判断鼠标位置是否在banner里面
else {
if(flag!='banner4') { //判断显示的是否最后一个节点
// alert(mouse)
$('.current').next() //选择当且显示节点的下一个节点
.addClass('current') //添加banner显示属性
.removeClass('hide') //删除banner隐藏属性
.siblings() //选择其他兄弟banner
.removeClass('current') //其他兄弟banner删除显示属性
.addClass('hide') //其他兄弟banner添加隐藏属性
$('.white').next() //选择当且显示节点的下一个节点
.addClass('white') //设置点击的按钮高亮白实心显示
.siblings() //选择其他兄弟节点
.removeClass('white') //取消其他兄弟节点高亮白实心显示.
}
else{
$('#banner1') //选择第一个节点
.addClass('current')
.removeClass('hide')
.siblings()
.removeClass('current')
.addClass('hide')
$('li').first()
.addClass('white') //设置点击的按钮高亮白实心显示
.siblings() //选择其他兄弟节点
.removeClass('white')//取消其他兄弟节点高亮白实心显示.
}
}
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
