js笔记(2)实现自滚动选项卡效果
1.实例
如下图bilibili官网的效果
2.简单的原理实现,不带图片
#1css部分代码
xxk.css
@charset="utf-8";
#div1{
float: left;
}
#div1 div{
width: 100px;height: 100px;
background: #bdbdbd;
border: 1px solid black;
display: none;
}
#div1 .change{
background-color: yellow;
}
#2html标签代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="xxk.css">
</head>
<body>
<div id = 'div1'>
<div style="display: block;">1</div>
<div>2</div>
<div>3</div>
<input type="button" name="" value="1" class="change">
<input type="button" name="" value="2">
<input type="button" name="" value="3">
<a href="#">左</a>
<a href="#">右</a>
</div>
</body>
</html>
#3显示效果
#4js代码的分步实现
@1:定义变量
var all_input = document.getElementsByTagName('input');
var all_div = div1.getElementsByTagName('div');
var all_a = document.getElementsByTagName('a');
var in_dex = 0;
var timer = null;
all_input; all_div; all_a 是选取所有的这些标签。
in_dex是作为索引值而存在,便于实现“左”“右”按钮
timer用来实现定时器setInterval效果
@2:点击button实现样式切换
for(var i = 0; i < all_input.length; i++){
all_input[i].setAttribute('suoyin',i);
all_input[i].onclick = function (){
for (var i = 0;i<all_input.length;i++){
all_input[i].className='';
all_div[i].style.display = 'none';
}
//console.log(i);
all_div[this.getAttribute('suoyin')].style.display = 'block';
this.className = 'change';
in_dex = this.getAttribute('suoyin');
}
}
使用attribute设置索引值便于设置style
@3:实现向右按钮
function roll(){
in_dex++;
if(in_dex == all_input.length) in_dex=0;
for (var i = 0;i<all_input.length;i++){
all_input[i].className='';
all_div[i].style.display = 'none';
}
all_div[in_dex].style.display = 'block';
all_input[in_dex].className = 'change';
}
all_a[1].onclick = roll;
这里用函数进行封装,便于设置定时器
@4:实现向左按钮
all_a[0].onclick = function(){
in_dex--;
if(in_dex == -1) in_dex=all_input.length-1;
for (var i = 0;i<all_input.length;i++){
all_input[i].className='';
all_div[i].style.display = 'none';
}
all_div[in_dex].style.display = 'block';
all_input[in_dex].className = 'change';
}
根据向右的函数进行简单修改即可
@5:设置定时器,并确定鼠标事件
clearInterval(timer);
timer = setInterval(roll,500);
div1.onmouseover = function(){
clearInterval(timer);
}
div1.onmouseout = function(){
clearInterval(timer);
timer = setInterval(roll,500);
}
鼠标移上去时,暂停滚动,移出继续滚动