标签：function 轮播 item jq height Header 不喜 true width
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./banner.css">
</head>
<body>
<div id="Header">
<ul class="Header_ul">
<!-- 这里面的class的值是不能变的 -->
<li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3547587137,2341154120&fm=26&gp=0.jpg" alt=""></li>
<li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3816029645,1774218254&fm=15&gp=0.jpg" alt=""></li>
<li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2763265930,2900269443&fm=15&gp=0.jpg" alt=""></li>
<li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1564496763,3761315122&fm=15&gp=0.jpg" alt=""></li>
<li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2130954828,808697001&fm=15&gp=0.jpg" alt=""></li>
</ul>
<!-- 这个id是不可以变的 -->
<ul id="tabs"></ul>
</div>
</body>
<script src="./jquery-1.10.2.min.js"></script>
<script src="./banner2.js"></script>
<script>
// 这个是需要传的参数
var RotationParameters = {
dot : true, // 是否需要小圆点true是需要false是不需要
Button: true, // 是否需要左右按钮true是需要false是不需要
automatic: true, // 是否需要自动轮播true是需要false是不需要
InputTime : 3000, // 多少秒轮播一次(可以更改默认是3000)
}
</script>
</html>
css代码：
*{padding: 0;margin: 0;list-style: none;}
#Header{
width:1370px;
height: 200px;
overflow: hidden;
position: relative;
}
#Header .Header_ul{
width: 100%;
height:100%;
}
#Header .Header_ul .item{
float: left;
width: 100%;
height: 200px;
}
#Header .Header_ul .item img{
width:100%;
height: 100%;
}
#Header .prev{
position: absolute;
left:30px;
top:40%;
text-align: center;
font-size: 40px;
width: 40px;
height: 60px;
background-color:rgba(0,0,0,0.2);
color: #ccc;
display: none;
}
#Header .next{
position: absolute;
right:30px;
top:40%;
text-align: center;
font-size: 40px;
width: 40px;
height: 60px;
background-color:rgba(0,0,0,0.2);
color: #ccc;
display: none;
}
#Header:hover .next{
display: block;
}
#Header:hover .prev{
display: block;
}
#Header #tabs{
position: absolute;
bottom: 0;
left:0;
z-index:999;
width: 200px;
height: 20px;
}
#Header #tabs .tab{
width: 15px;
height: 15px;
margin-left: 2px;
border-radius:50%;
background: #ccc;
float: left;
}
#Header #tabs .active{
background: chartreuse;
}
js代码：
$(document).ready(function(){
var i = 0;
var timer;
$('.item').eq(0).show().siblings('.item').hide();
showTime();
// 判断是否创建小圆点
if(RotationParameters.dot == true){
// 动态创建小圆点
for(let index = 0; index < $('.item').length; index++){
$('#tabs').append('<li class="tab"></li>')
}
$('.tab').eq(0).addClass('active')
// 当鼠标划过小圆点的执行事假
$('.tab').hover(function(){
// 获取当前i的值, 并显示，同时还要清除定时器
i = $(this).index();
Show();
clearInterval(timer);
},function(){
showTime();
})
}
// 判断是否创建左右按钮
if(RotationParameters.Button == true){
// 虚拟创建左侧按钮
$('#Header').append('<div class="btn next">></div>')
// 虚拟创建右侧按钮
$('#Header').append('<div class="btn prev"><</div>')
// 鼠标点击左侧的箭头
$('.prev').click(function(){
clearInterval(timer);
if( i == 0){
i = 0; // 注意此时i的值
}
i--;
Show();
showTime();
})
// 执行鼠标点击右侧的箭头
$('.next').click(function(){
clearInterval(timer);
if(i == 4){
i = -1; // 注意i的值
}
i++;
Show();
showTime();
});
}
// 用来执行定时器的
function showTime(){
timer = setInterval(() => {
Show(); // 在这里执行
if(RotationParameters.automatic == true){
i++; // 每一次执行i都加1
if(i==$('.item').length){ // 判断当i的长度等于li的长度就让i等于0
i=0;
}
}
},RotationParameters.InputTime || 3000);
}
// 创建一个show函数
function Show(){
// 执行图片轮播
$('.item').eq(i).fadeIn(300).siblings('.item').fadeOut(300);
// 执行当点击小按钮跳到对应的图片
$('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
}
})
可能会有点坑希望不要介意
标签：function,轮播,item,jq,height,Header,不喜,true,width 来源： https://www.cnblogs.com/fuxiaoyon/p/13792682.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。