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

最新推荐文章于 2022-08-27 16:01:12 发布

一只傻乎乎的猪

最新推荐文章于 2022-08-27 16:01:12 发布

阅读量332

点赞数 2

分类专栏： js实例文章标签： js css javascript html

本文链接：https://blog.csdn.net/Npe_xl_violet/article/details/109214475

版权

js实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

一只傻乎乎的猪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js笔记(2)实现自滚动选项卡效果

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
复制链接

扫一扫