jquery Banner轮播选项卡
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
本文实例为大家分享了jquery Banner轮播选项卡的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wraper{
width: 1200px;
margin: 0 auto;
position: relative;
}
.banner{
width: 100%;
position: relative;
height: 460px;
}
.banner ul{
position:absolute;
left:0;
top:0;
width:10000px;
}
.ba_slider{ width:1920px;
height:460px;
position:absolute;
overflow: hidden;
left: 50%;
margin-left: -960px;
}
.ba_center{
position: absolute;
height: 460px;
left: 50%;
top: 0;
margin-left:-600px;
}
.ba_slider ul{ position:relative;
width: 100000px;
}
.ba_slider ul li{
position: relative;
float: left;
}
.ba_slider img{
width:1920px;
height:460px;
}
.ba_prev,.ba_next{
width:60px;
height:100px;
background:rgba(0,0,0,0.5);
color:#fff;
text-decoration:none;
font-size:50px;
line-height:100px;
text-align:center;
position:absolute;
top:50%;
margin-top:-50px;
z-index:99;
}
.ba_prev{ left:0; }
.ba_next{ right:0; }
.ba_slider ol{
position:absolute;
left:50%;
bottom:10px;
overflow:hidden;
margin-left:-220px;
}
.ba_slider ol li{
width:100px;
height:6px;
background:rgb(85,85,85);
float:left; margin-right:10px;
}
.ba_slider ol li.on{
background:#fff;
}
</style>
</head>
<body>
<div class="banner">
<div class="ba_slider">
<div class="wraper ba_center">
<a class="ba_prev" href="javascript:;"><</a>
<a class="ba_next" href="javascript:;">></a>
</div>
<ul>
<li>
<a href="javascript:;">
<img src="/UploadFiles/2021-04-02/11-140FQ53531Q9.jpg">
github地址：https://github.com/seven-it/jqBanner
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：Javascript中常用类型的格式化方法小结