js笔记(2)实现自滚动选项卡效果

it2025-07-07 10

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); }

鼠标移上去时，暂停滚动，移出继续滚动

最新回复(0)