7、JS图片切换案列，找对象的方法，location、history、screen、Navigator对象

最新推荐文章于 2022-09-26 23:57:25 发布

-木化十จุ๊บ

最新推荐文章于 2022-09-26 23:57:25 发布

阅读量252

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/AuhuAo/article/details/103427077

版权

Js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

图片切换

自动切换图片：

<style type="text/css"></style>
<script type="text/javascript">
//页面加载完成后让图片自欧东动起来
window.onload=init;
var i=1;
function init(){
	window.setInterval("tupian()",2000);
	}
function tupian(){
	i++;
	if(i>6){
		i=1;
		}
	//获取了img对象
	var obj=document.getElementById("d1");
	//修改img对象的src属性
	obj.src="图片/"+i+".jpeg";
	}
</script>
<body>
<img id="d1" src="图片/1.jpeg" />
</body>

鼠标放上停止切换：

<style type="text/css"></style>
<script type="text/javascript">
//页面加载完成后让图片自动动起来
window.onload=init;
var i=1;
var d;
function init(){
	d=window.setInterval("tupian()",2000);
	}
function tupian(){
	i++;
	if(i>6){
		i=1;
		}
	//获取了img对象
	var obj=document.getElementById("d1");
	//修改img对象的src属性
	obj.src="图片/"+i+".jpeg";
	}
//让图片停止切换
function stopTu(){
	window.clearInterval(d);
	}
//让图片重新开始切换
function startTU(){
	d=window.setInterval("tupian()",2000);
	}
</script>
<body>
<img id="d1" src="图片/1.jpeg"  onmouseover="stopTu()" onmouseout="startTU()"/>
</body>

点击按钮切换：

鼠标离开li标签继续切换

鼠标放上改变标签背景颜色：

tab案列：

<style type="text/css">
*{
	margin:0px;
	padding:0px;
	}
#d1{
	width:488px;
	height:300px;
	border:1px solid #F00;
	margin-top:5px;
	margin-left:5px;
	}
ul li{
	list-style:none;
	float:left;
	height:50px;
	width:120px;
	border:1px solid #F00;
	text-align:center;
	line-height:50px;
	}
ul{
	height:50px;
	}
#div1,#div2,#div3,#div4{
	display:none;
	}
#div1{
	display:block;
	}
</style>
<script type="text/javascript">
function show(n,m){
	//隐藏所有div内容
	for(var i=1;i<=4;i++){
	var d=document.getElementById("div"+i);
	d.style.display="none";
	}
	//所有li边框显示
	for(var j=1;j<=4;j++){
		var l=document.getElementById("li"+j);
		l.style.border="1px solid red";
		}
	//获取对象
	var obj=document.getElementById("div"+n);
	obj.style.display="block";
	m.style.borderBottom="1px solid white";
	}
</script>
</head>

<body>
<div id="d1">
<ul>
<li id="li1" onmouseover="show(1,this)">国际新闻</li>
<li id="li2" onmouseover="show(2,this)">国内新闻</li>
<li id="li3" onmouseover="show(3,this)">体育新闻</li>
<li id="li4" onmouseover="show(4,this)">娱乐新闻</li>
</ul>
<div id="div1">国际新闻：<br />
是打死你和V会互动式怒会产生uhsinu和此时你吃好吃上课猜你喜欢<br />
我看见你上传带你师父锤死你
</div>
<div id="div2">国内新闻:<br />
US内存卡粉红色开心你深红色<br />
不能超低价说小内裤好玩的
</div>
<div id="div3">体育新闻：<br />
你测试川牛膝五卅晒得我<br />
白醋开会说处三年卡炒粉丝吧
</div>
<div id="div4">娱乐新闻：<br />
吃的是佛下颌位费慧聪网<br />
画册你如何是你会为成为
</div>
</div>
</body>

找对象的方法：

id:document.getElementById("id名");
标签：document.getElementsByTagName("标签名") 获取的是对象的集合//相当于一个数组
对象.getElementsByTagName("标签名")
Name:document.getElementsByName("name名") form集合//数组
className： document.getElementsByClassName("class名") 集合//数组【firefox】
document.images ：获取img对象//数组
document.links ：获取链接对象//数组
document.forms ：获取表单对象//数组
document.body ： body标签对象
document.documentElement ：HTML对象
event ：事件信息对象
this：当前对象

location对象

location.href：返回url信息，【可以获取url信息，也可以给其赋值，实现跳转页面】
location.assign()：加载新的文档【跳转页面】
location.reload()：重新加载当前的文档【刷新】
location.replace()：用新的文档替换当前的文档【跳转】

location.assign()和location.replace()的区别

location.assign()：会产生历史记录

location.replace()：不会产生历史记录

history对象

history.length：获取浏览过的url数量
history.back：返回历史记录的前一个页面
history.forward：加载历史记录中的下一个页面
history.go(n)：跳转到历史记录中指定的页面，如果是-1就相当于是history.back的功能

screen对象

screen.height：获取屏幕的高度
screen.width：获取屏幕的宽度
availHeight：获取任务栏的高度
availWidth：获取任务栏的宽度

Navigator对象

AppName：浏览器名
appCodeName：浏览器代码名
appVersion：版本号和平台信息
userAgent：浏览器信息

查看用户所用的浏览器是什么：

-木化十จุ๊บ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7、JS图片切换案列，找对象的方法，location、history、screen、Navigator对象

图片切换自动切换图片：<style type="text/css"></style><script type="text/javascript">//页面加载完成后让图片自欧东动起来window.onload=init;var i=1;function init(){ window.setInterval("tupian()",200...
复制链接

扫一扫