一个可以设置是否循环播放的简易手动轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#controls {
width:400px;
margin: auto;
text-align: center;
}
#container {
width: 400px;
height:400px;
border: 10px solid #eee;
position: relative;
background: gray;
margin: 10px auto 0;
}
#prev, #next {
position: absolute;
background: black;
filter:alpha(opacity:40);/*IE8以及更早的版本的兼容*/
opacity: 0.4;
font-size: 20px;
color: white;
width: 40px;
height: 40px;
border: 2px solid white;
line-height: 40px;
text-align: center;
top: 180px;
pointer: cursor;
text-decoration: none;
}
#prev:hover, #next:hover {
filter:alpha(opacity:80);
opacity: 0.8;
}
#order, #info {
position: absolute;
width:100%;
height: 30px;
line-height: 30px;
text-align: center;
background: black;
filter:alpha(opacity:60);
opacity: 0.6;
font-size: 20px;
color: white;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#picture {
height: 400px;
width: 400px;
}
#order {
top: 0;
}
#info {
bottom: 0;
}
</style>
</head>
<body>
<div id="controls">
<input id="round" type="button" value = "循环播放">
<input id="single" type="button" value = "顺序播放">
</div>
<div id="container">
<a href='javascript:' id="prev"><</a>
<a href='javascript:' id="next">></a>
<div id="order">图片加载中……</div>
<div id="info">图片加载中……</div>
<img id="picture">
</div>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var imgsArr = ['one.jpg','two.jpg','three.jpg','four.jpg','five.jpg'];
var index = 0;
var imgsInfo = ['图片一','图片二','图片三','图片四','图片五'];
var flag = true;//设置一个标记默认为顺序播放，不能循环播放
function showImg(){
$('picture').src = imgsArr[index];
$('order').innerText = (index+1)+'/'+imgsArr.length;
$('info').innerText = imgsInfo[index];
}
showImg();
//为左右箭头添加事件
$('next').onclick = function(){
index++;
if(index > imgsArr.length-1 && flag){
alert('已经是最后一张')
index = imgsArr.length-1;
}
if(index>imgsArr.length-1 && !flag){
index = 0;
}
showImg();
}
$('prev').onclick = function(){
index--;
if(index<0 && flag){
alert('已经是第一张了');
index = 0;
}
if(index<0 && !flag){
index = imgsArr.length-1;
}
showImg();
}
//手动切换是顺序播放还是循环播放
$('round').onclick = function(){
alert('现在是循环播放')
flag = false;
}
$('single').onclick = function(){
alert('现在是顺序播放')
flag = true;
}
</script>
</html>
节点关系parentNode和firstChild以及和firstElementChild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" id="tb">
<tr id="tr1">
<td>111</td>
<td>1111</td>
<td>
<input type="button" value="删除" />
</td>
</tr>
<tr id="tr2">
<td>222</td>
<td>2222</td>
<td>
<input type="button" value="删除" />
</td>
</tr>
</table>
<script type="text/javascript">
var btns = document.getElementsByTagName("input");
/* obj.parentNode 父节点 原生的js通过这种方式寻找元素的父节点*/
for(var i=0; i<btns.length; i++) {
btns[i].onclick = function() {
alert(this.parentNode.parentNode.nodeName);//TR
}
}
var tb = document.getElementById("tb");
console.log(tb);
console.log(tb.firstChild); //#text 文本对象
console.log(tb.firstElementChild.tagName);//TBODY
//firstChild和firstElementChild的差别
// firstChild获取指定元素的第一个子节点，可以是元素节点，也可以是文本节点。若父元素与第一个子元素之间存在空白节点，firstChild获取到的将是空白节点而不是第一个子元素
//firstElementChild
//获取指定元素的第一个子元素节点，不会检测到文本节点
</script>
</body>
</html>
节点关系之childNodes和children的关系
three 节点关系之childNodes和children的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>aaaa</li>
<li>bbbbbb</li>
<li>cccc</li>
<li>ddddd</li>
<li>eeeee</li>
</ul>
<script type="text/javascript">
var oUl = document.querySelector("ul");
var lis = oUl.childNodes; // 所有的儿子 包括文本和标签 包含空白节点
console.log(lis);
alert(lis.length); // 11
//对所有的li增加字体颜色样式 red
for(var i=0; i<lis.length; i++) {
// 元素的nodeType值为1 表示元素节点
if (lis[i].nodeType === 1) {
lis[i].style.color = "red";
}
}
var lis = oUl.children; // 只包含元素节点儿子
console.log(lis)
alert(lis.length);//5
//childNodes和children的区别
// childNodes:
// 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType=='1'时才是元素节点，
// 2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确
//children:
// 非标准的，它返回指定元素的子元素集合。经测试，它只返回html节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。需注意children在IE中包含注释节点。
// 返回指定元素的子元素集合，只包括元素节点，不包括文本节点。
</script>
</body>
</html>
dom节点的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="oul">
<li id="one">123</li>
<li id="two">123</li>
<li id="three">123</li>
</ul>
</body>
<script type="text/javascript">
var odiv = document.createElement('div');
document.getElementById('oul').appendChild(odiv);
odiv.innerText = '我是一个动态创建出来的div';
odiv.style.cssText = "width:100px;height:100px;background:pink;border:1px solid gray"
var op = document.createElement('p');
op.innerText = '我是一个动态创建出来的p标签'
var oli = document.getElementById('two')
document.getElementById('oul').insertBefore(op,oli);
//appendChild与insertBefore的区别
//appendChild() 方法向节点添加最后一个子节点。
//insertBefore() 方法可在已有的子节点前插入一个新的子节点。需要两个参数
</script>
</html>
动态创建元素的一个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background: #000;
}
</style>
</head>
<body>
<button id = 'btn'>创建图片</button>
</body>
<script type="text/javascript">
// js在文档中创建图片
function f1(){
var oImg = document.createElement("img");
oImg.src = "one.jpg";
document.body.appendChild(oImg);
// 设置图片宽度为随机的 20~30
var w = parseInt(Math.random()*101+20);
var l = parseInt(Math.random()*100);
var t = parseInt(Math.random()*300);
//console.log(w);
oImg.style.position = 'absolute';
oImg.style.width = oImg.style.height = w + "px";
oImg.style.left = l + 'px'
oImg.style.top = t+'px'
}
document.getElementById('btn').onclick = function(){
f1();
}
</script>
</html>
网友评论