JS_DOM_选项卡_轮播图

柠檬养乐多.

于 2022-02-21 20:05:19 发布

阅读量304

点赞数

文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/ysj94s7/article/details/123054735

版权

01-复习
   BOM
       BOM
window
alert confirm prompt close open
navigator
uearAgent 浏览器信息
appName
appVersion
location
href
reload
history
back
forward
go
事件
onload
onresize
onscroll
获取页面宽高
document.documentElement.clientWidth / clientHeight
widnow.innerWidth / innerHeight
获取滚动距离
document.documentElement.scrollTop / scrollLeft

定时器
setInterval(fn, ms)
clearInterval()

02-定时器
   a.定时器
       定时器
setInterval(function () { -> 一直执行
console.log(1)
}, 1000)
   b.定时器
       定时器
setTimeout(function () { -> 执行一次
console.log(2)
}, 1000)
   c.定时器停止
       定时器停止
clearInterval
clearTimeout
   d.例子
       小广告效果
           <style>
#box {
width: 300px;
height: 400px;
background-color: pink;
position: fixed;
right: 0;
bottom: 0;
display: none;
}
</style>
</head>

<body>
<div id="box">
<input value="x" type="button" id="btnClose">
</div>
<script>
// 定时器
// setInterval(function () { // 一直执行
// console.log(1)
// }, 1000)

// setTimeout(function () { // 执行一次
// console.log(2)
// }, 1000)

// 定时器停止
// clearInterval
// clearTimeout

// 小广告
setTimeout(function () {
box.style.display = 'block'
}, 3000)

btnClose.onclick = function () {
box.style.display = 'none'
setTimeout(function () {
box.style.display = 'block'
}, 3000)
}
</script>

03-DOM
   含义
       DOM：Document Object Model（文档对象模型）
   作用
       利用DOM 所提供的方法获取表单元素
           使用两个标准的获取方法：
（1）getElementById （通过标签的id获取标签，相对效率、准确率高；但不能精准选择元素）
（2）getElementsByTagName （通过标签明获取标签，获取到的元素是一个集合，也就是获取的是一个伪数组，即使一个标签获取的也一样是个集合）
           （1）document.getElemetsByClassName（通过class名来获取）：选取复合class名的元素，组成一个集合，跟TagName的规则一样；劣势：有的浏览器不支持，有兼容性问题；
（2）document.getElementsByName（针对表单元素，通过name属性值来获取元素），跟TagName的规则也一样；劣势：兼容问题，局限性比较大；
   例子
       <body>
<div class="box" id="box">div</div>
<script>
// DOM
// - document object model
// - 操作标签
// - document -> html -> head body -> div span a b

// 不符合w3c规范，不允许直接使用id 必须先获取到（浏览器有一个兼容）
// box.style.background = 'yellow'

// var oBox = document.getElementById('box') // id
// var oBox = document.getElementsByTagName('div')[0] // 标签名获取到的是一组，需要写下标
var oBox = document.getElementsByClassName('box')[0] // class名获取到的是一组，需要写下标
oBox.style.background = 'yellow'
</script>
</body>

04-获取元素
   a.通过指定选择器，选择第一个元素对象
       语法:document.querySelector('选择器');
用途:根据指定选择器选择第一个元素对象
参数:选择器 ,类选择器前面加.(点),id选择器前面加#号
兼容问题:支持ie9以上版本，包括ie9。
   b.通过指定选择器，选择所有元素对象
       语法:document.querySelectorAll('选择器');
作用:选择所有指定选择器的元素对象
参数:选择器是一个字符串，区分大小写。
兼容问题:支持ie9以上版本，包括ie9。
   c.例子
       <body>
<input class="btn" id="btn" type="button" value="按钮">
<input class="btn" id="btn" type="button" value="按钮">
<input class="btn" id="btn" type="button" value="按钮">
<input class="btn" id="btn" type="button" value="按钮">
<script>
// 1. 获取元素
// - querySelector 通过选择器获取
// - 只有四个不能用 l v h a
// var oBtn = document.querySelector('.btn')

// console.log(oBtn)

// oBtn.onclick = function () {
// alert(1)
// }

// 1. 获取元素
var aBtn = document.querySelectorAll('input')

// aBtn[0].onclick = function () {
// alert(1)
// }
// aBtn[1].onclick = function () {
// alert(1)
// }
// aBtn[2].onclick = function () {
// alert(1)
// }
// aBtn[3].onclick = function () {
// alert(1)
// }

aBtn.forEach(function (ele) {
ele.onclick = function () {
ele.style.background = 'yellow'
}
})
</script>
</body>

05-常见属性
   a.属性
       属性
- value type src alt href tittle style id className innerHTML
   b.例子
       <style>
.abc {
color: rebeccapurple;
}

.on {
background-color: yellow;
}
</style>
</head>

<body>
<input class="abc" type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<script>
// 属性
// - value type src alt href tittle style id className innerHTML

var aBtn = document.querySelectorAll('input')

aBtn.forEach(function (ele) {
ele.onclick = function () {
// ele.className += ' on'
ele.classList.add('on') // 不兼容ie11以下
}
})
</script>

06-选项卡
<style>
.box input.on {
background-color: yellow;
}

.box div {
display: none;
}

.box div.on {
display: block;
}
</style>
</head>

<body>
<div class="box">
<input class="on" type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<div class="on">1</div>
<div>2</div>
<div>3</div>
</div>
<script>
var aBtn = document.querySelectorAll('.box input')
var aDiv = document.querySelectorAll('.box div')

aBtn[0].onclick = function () {
aBtn[1].classList.remove('on')
aBtn[2].classList.remove('on')
aDiv[1].classList.remove('on')
aDiv[2].classList.remove('on')

aBtn[0].classList.add('on')
aDiv[0].classList.add('on')
}

aBtn[1].onclick = function () {
aBtn[0].classList.remove('on')
aBtn[2].classList.remove('on')
aDiv[0].classList.remove('on')
aDiv[2].classList.remove('on')

aBtn[1].classList.add('on')
aDiv[1].classList.add('on')
}

aBtn[2].onclick = function () {
aBtn[0].classList.remove('on')
aBtn[1].classList.remove('on')
aDiv[0].classList.remove('on')
aDiv[1].classList.remove('on')

aBtn[2].classList.add('on')
aDiv[2].classList.add('on')
}
</script>
</body>

06-选项卡2
<style>
.box input.on {
background-color: yellow;
}

.box div {
display: none;
}

.box div.on {
display: block;
}
</style>
</head>

<body>
<div class="box">
<input class="on" type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<div class="on">1</div>
<div>2</div>
<div>3</div>
</div>
<script>
var aBtn = document.querySelectorAll('.box input')
var aDiv = document.querySelectorAll('.box div')

aBtn[0].onclick = function () {
aBtn[0].classList.remove('on')
aDiv[0].classList.remove('on')

aBtn[1].classList.remove('on')
aDiv[1].classList.remove('on')

aBtn[2].classList.remove('on')
aDiv[2].classList.remove('on')

aBtn[0].classList.add('on')
aDiv[0].classList.add('on')
}

aBtn[1].onclick = function () {
aBtn[0].classList.remove('on')
aDiv[0].classList.remove('on')

aBtn[1].classList.remove('on')
aDiv[1].classList.remove('on')

aBtn[2].classList.remove('on')
aDiv[2].classList.remove('on')

aBtn[1].classList.add('on')
aDiv[1].classList.add('on')
}

aBtn[2].onclick = function () {
aBtn[0].classList.remove('on')
aDiv[0].classList.remove('on')

aBtn[1].classList.remove('on')
aDiv[1].classList.remove('on')

aBtn[2].classList.remove('on')
aDiv[2].classList.remove('on')

aBtn[2].classList.add('on')
aDiv[2].classList.add('on')
}
</script>
</body>

06-选项卡3
<style>
.box input.on {
background-color: yellow;
}

.box div {
display: none;
}

.box div.on {
display: block;
}
</style>
</head>

<body>
<div class="box">
<input class="on" type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<div class="on">1</div>
<div>2</div>
<div>3</div>
</div>
<script>
var aBtn = document.querySelectorAll('.box input')
var aDiv = document.querySelectorAll('.box div')

aBtn.forEach(function (ele, index) {
aBtn[index].onclick = function () {
for (var i = 0; i < aBtn.length; i++) {

aBtn[i].classList.remove('on')
aDiv[i].classList.remove('on')
}

aBtn[index].classList.add('on')
aDiv[index].classList.add('on')
}
})

</script>
</body>

06-选项卡4封装
<style>
.box input.on {
background-color: yellow;
}

.box div {
display: none;
width: 200px;
height: 200px;
border: 1px solid red;
}

.box div.on {
display: block;
}
</style>
</head>

<body>
<div class="box">
<input class="on" type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<div class="on">1</div>
<div>2</div>
<div>3</div>
</div>
<div class="box">
<input class="on" type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<div class="on">1</div>
<div>2</div>
<div>3</div>
</div>
<script>
// var oBox = document.querySelector('.box') // 一个
var aBox = document.querySelectorAll('.box') // 一组

// console.log(aBox)

// fn(aBox[0])
// fn(aBox[1])

// for (var i = 0; i < aBox.length; i++) {
// fn(aBox[i])
// }

aBox.forEach(function (ele) {
fn(ele)
})

function fn(obj) {
var aBtn = obj.querySelectorAll('input')
var aDiv = obj.querySelectorAll('div')

aBtn.forEach(function (ele, index) {
aBtn[index].onclick = function () {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('on')
aDiv[i].classList.remove('on')
}

aBtn[index].classList.add('on')
aDiv[index].classList.add('on')
}
})
}
</script>

07-京东选项卡
<style>
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

.banner {
width: 300px;
margin: 100px auto;
height: 491px;
position: relative;
}

.banner img {
width: 300px;
height: 491px;
}

.banner li {
display: none;
}

.banner li.on {
display: block;
}

.page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}

.page span {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: yellow;
margin: 10px;
}

.page span.on {
background-color: pink;
}
</style>
</head>

<body>
<div class="banner">
<ul class="list">
<li class="on">
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
</ul>
<div class="page">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="banner">
<ul class="list">
<li class="on">
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src=""
alt="">
</a>
</li>
</ul>
<div class="page">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var aBanner = document.querySelectorAll('.banner')

aBanner.forEach(function (ele, index) {
tab(ele)
})

function tab(obj) {
var aBtn = obj.querySelectorAll('.page span')
var aLi = obj.querySelectorAll('.list li')

// console.log(aBtn, aLi)

// 一组元素加事件必须循环
aBtn.forEach(function (ele, index) {
aBtn[index].onclick = function () {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('on')
aLi[i].classList.remove('on')
}
aBtn[index].classList.add('on')
aLi[index].classList.add('on')
}
})
}
</script>
</body>

07-京东选项卡2
<style>
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

.banner {
width: 300px;
margin: 100px auto;
height: 491px;
position: relative;
overflow: hidden;
}

.banner ul {
display: flex;
position: absolute;
left: 0;
top: 0;
transition: .3s;
}

.banner img {
width: 300px;
height: 491px;
}

.page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}

.page span {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: yellow;
margin: 10px;
}

.page span.on {
background-color: pink;
}
</style>
</head>

// 加事件
aBtn.forEach(function (ele, index) {
aBtn[index].onclick = function () {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('on')
}
aBtn[index].classList.add('on')
// 0 300 600 900 1200
// index * 300
oList.style.left = -index * 300 + 'px'
}
})
</script>
</body>

08-京东轮播图
<style>
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

.banner {
width: 300px;
margin: 100px auto;
height: 491px;
position: relative;
overflow: hidden;
}

.banner ul {
display: flex;
position: absolute;
left: 0;
top: 0;
transition: .3s;
}

.banner img {
width: 300px;
height: 491px;
}

.page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}

.page span {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: yellow;
margin: 10px;
}

.page span.on {
background-color: pink;
}

.prev,
.next {
position: absolute;
top: 50%;
width: 50px;
height: 100px;
margin-top: -50px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .3s;
}

.prev {
left: -50px;
}

.next {
right: -50px;
}

.banner:hover .prev {
left: 0;
}

.banner:hover .next {
right: 0;
}
</style>
</head>

var iNow = 0

// 加事件
aBtn.forEach(function (ele, index) {
aBtn[index].onclick = function () {
iNow = index

tab()
}
})

oNext.onclick = function () {
iNow++
if (iNow === aBtn.length) {
iNow = 0
}
tab()
}

oPrev.onclick = function () {
iNow--
if (iNow === -1) {
iNow = aBtn.length - 1
}
tab()
}

function tab() {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('on')
}
aBtn[iNow].classList.add('on')
oList.style.left = -iNow * 300 + 'px'
}
</script>
</body>

08-京东轮播图2
<style>
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

.banner {
width: 300px;
margin: 100px auto;
height: 491px;
position: relative;
overflow: hidden;
}

.banner ul {
display: flex;
position: absolute;
left: 0;
top: 0;
transition: .3s;
}

.banner img {
width: 300px;
height: 491px;
}

.page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}

.page span {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: yellow;
margin: 10px;
}

.page span.on {
background-color: pink;
}

.prev {
left: -50px;
}

.next {
right: -50px;
}

.banner:hover .prev {
left: 0;
}

.banner:hover .next {
right: 0;
}
</style>
</head>

var iNow = 0

// 加事件
aBtn.forEach(function (ele, index) {
aBtn[index].onclick = function () {
iNow = index

tab()
}
})

oNext.onclick = function () {
iNow++
if (iNow === aBtn.length) {
iNow = 0
}
tab()
}

oPrev.onclick = function () {
iNow--
if (iNow === -1) {
iNow = aBtn.length - 1
}
tab()
}

// 自动播放
setInterval(function () {
iNow++
if (iNow === aBtn.length) {
iNow = 0
}
tab()
}, 2000)

function tab() {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('on')
}
aBtn[iNow].classList.add('on')
oList.style.left = -iNow * 300 + 'px'
}
</script>
</body>

08-京东轮播图3
<style>
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

.banner {
width: 300px;
margin: 100px auto;
height: 491px;
position: relative;
overflow: hidden;
}

.banner ul {
display: flex;
position: absolute;
left: 0;
top: 0;
transition: .3s;
}

.banner img {
width: 300px;
height: 491px;
}

.page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}

.page span {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: yellow;
margin: 10px;
}

.page span.on {
background-color: pink;
}

.prev {
left: -50px;
}

.next {
right: -50px;
}

.banner:hover .prev {
left: 0;
}

.banner:hover .next {
right: 0;
}
</style>
</head>

var iNow = 0

// 加事件
aBtn.forEach(function (ele, index) {
aBtn[index].onclick = function () {
iNow = index

tab()
}
})

oPrev.onclick = function () {
iNow--
if (iNow === -1) {
iNow = aBtn.length - 1
}
tab()
}

oNext.onclick = next

// 自动播放
setInterval(next, 2000)

function next() {
iNow++
if (iNow === aBtn.length) {
iNow = 0
}
tab()
}

function tab() {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('on')
}
aBtn[iNow].classList.add('on')
oList.style.left = -iNow * 300 + 'px'
}
</script>
</body>