JS復習作業(yè)：選項卡，全選/全不選效果，默認，圖片移入，輪播圖【詩書畫唱】
案例1:選項卡
CSS和JS部分：
<style>
? ? ?*{margin:0;padding:0;font:normal 12px "微軟雅黑";
? ? ?
? ? /* color:#000000;*/
? ? ?
? ? ?}
? ? ?ul{list-style-type: none;color: orange;}
? ? ?a{text-decoration: none;color: blue;}
? ? ?a:hover{color: red;}
?
? ? ?#All{width: 275px;height:190px;margin: 20px auto;}
?
? ? ?#xuanXiangUl{border-bottom: 2px solid #8B4513;height: 32px;}
? ? ?#xuanXiangUl li{display: inline-block;width: 60px;line-height: 30px;
? ? ?text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
? ? ?#xuanXiangUl li:hover{cursor: pointer;}
? ? ?#xuanXiangUl li.xuanXiangLi{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
?
? ? ?#All div{border: 1px solid #7396B8;border-top: none;}
? ? ?#All div li{height: 30px;line-height: 30px;text-indent: 8px;}
? ? ?
? ? ?.neiRongShow{display: block;}
? ? ?.neiRongHide{display: none;}
</style>
<script>
// JS實現(xiàn)選項卡切換
? ? window.onload = function() {
? ? ? ? var xuanXiangUl = document.getElementById("xuanXiangUl");
? ? ? ? var allLi = xuanXiangUl.getElementsByTagName("li");
? ? ? ? var allDiv = document.getElementById("All");
? ? ? ? var divShuZu = allDiv.getElementsByTagName("div");
? ? ? ? for(var i = 0; i < allLi.length; i++) {
? ? ? ? ? ? allLi[i].index = i;
? ? ? ? ? ? allLi[i].onmouseover = function() {
? ? ? ? ? ? ? ? for(var i = 0; i < allLi.length; i++) {
? ? ? ? ? ? ? ? ? ? allLi[i].className = "";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.className = "xuanXiangLi";
? ? ? ? ? ? ? ? for(var j = 0; j < divShuZu.length; j++) {
? ? ? ? ? ? ? ? ? ? divShuZu[j].className = "neiRongHide";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? divShuZu[this.index].className = "neiRongShow";
? ? ? ? ? ? }? ? ? ??
? ? ? ? }
? ? }
</script>
案例2:全選/全不選效果
JS：
window.onload = function() {
//用getElementsByName獲取愛好
var aiHaoShuZu = document.getElementsByName("aiHaoName");
var anNiuShuZu = document.getElementsByTagName("input")[3];
//用. onclick給按鈕添加點擊事件
anNiuShuZu.onclick = function() {
//點擊按鈕的時候用if去判斷按鈕的內(nèi)容是全選還是全不選
if(this.value == "全選") {
//用for遍歷這三個愛好，用ture給每個愛好添加選中屬性
//并且用=讓按鈕的內(nèi)容設(shè)置賦值為全不選
for(var i of aiHaoShuZu) {
i.checked = "true";
}
this.value = "全不選";
}
//因為現(xiàn)在這個循環(huán)是寫在函數(shù)里面的，
//不是寫在函數(shù)外面的，所以i現(xiàn)在是可以用的，有效果作用
else if(this.value == "全不選") {
for(var i of aiHaoShuZu) {
i.checked = "";
//用=賦值""(空)給i. checked,達到取消全選的效果
}
this.value = "全選";
}
}
}
????CSS：
#btn1 {
height: 35px;
width: 100px;
}
HTML：
<input type="checkbox" name="aiHaoName" />點贊
<input type="checkbox" name="aiHaoName" />三連
<input type="checkbox" name="aiHaoName" />關(guān)注B站up主詩書畫唱
<input type="button" value="全選"? ?/>
案例3:默認圖片，圖片移入顯示其他圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img {
width: 200px;
height: 300px;
}
</style>
<script>
window.onload = function() {
var imgShuZu = document.getElementsByTagName("img");
for(var i of imgShuZu) {
i.onmouseover = function() {
//if判斷中要用==,不然沒用，==表示相等，=表示賦值，
//img/1.jpg格式和./img/3.jpg格式都可以引入圖片
if(this.title == "11") {
this.src = "img/1.png";
}
if(this.title == "22") {
this.src = "img/2.png";
}
if(this.title == "33") {
this.src = "./img/3.png";
}
if(this.title == "44") {
this.src = "./img/4.png";
}
}
i.onmouseout = function() {
this.src = "./img/5.png";
}
}
}
</script>
</head>
<body>
<img src="img/5.png" title="11" />
<img src="img/5.png" title="22" />
<img src="img/5.png" title="33" />
<img src="img/5.png" title="44" />
</body>
</html>
案例4:輪播圖完整版(選做)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*allDivId:所有div的ID*/
#allDivId {
/*?
relative: 相對的*/
/*? absolute:絕對的;
? position: 位置;
? position: absolute;(絕對定位,可設(shè)置具體左右上下坐標位置)*/
width: 600px;
height: 400px;
margin: 0px auto;
position: relative;
}
#allDivId div {
position: absolute;
right: 20px;
bottom: 10px;
width: 200px;
height: 60px;
}
/*
display 屬性規(guī)定元素應(yīng)該生成的框的類型。
使段落生出行內(nèi)框：
p.inline
? {
? display:inline;
? }
??
?display: inline-block; 意思是用來處理行內(nèi)非替換元素的高寬問題的！
行內(nèi)非替換元素，比如span、a等標簽，正常情況下是不能設(shè)置寬高的，
加上該屬性之后，就可以觸發(fā)讓這類標簽表現(xiàn)得如塊級元素一樣，可以設(shè)置寬高。
將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。
之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）
inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。*/
#allDivId div span {
width: 10px;
height: 10px;
background-color: white;
display: inline-block;
margin-left: 8px;
margin-top: 10px;
border: 1px solid red;
border-radius: 50%;
/*? border-radius: 50%;個人理解:將角度矩形的四個角的弧度都設(shè)置為90度.*/
cursor: pointer;
}
#allDivId div .xuanZhongYuanDian {
background-color: yellow;
}
#allDivId .leftErDuo {
/*margin-top: -40px;表示距離上邊界向上40px,
元素向頭部移動40px,也就是頭部距離相鄰元素減小40px。
margin-top: 40px的話，表示距離上邊界向下40px,
頭部的外邊距為40像素，就是頭部答距離相鄰元素為40px；*/
width: 40px;
height: 40px;
opacity: 0.2;
position: absolute;
left: 40px;
top: 50%;
margin-top: -40px;
background-color: blue;
cursor: pointer;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: white;
}
#allDivId .rightErDuo {
/* position: absolute;left: 40px; top:50%;*/
left: auto;
right: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: white;
}
#allDivId .leftErDuo:hover {
opacity: 0.8;
/*??
opacity:n.不透明性;
從 0.0 （完全透明）到 1.0（完全不透明）。*/
}
</style>
<title></title>
<script>
window.onload = function() {
?
window.imgShuZu = ["./img/1.png", "./img/2.png", "./img/3.png", "./img/4.png"];
? ? ?
? ??
window.indexXiaBiao = 0; //indexXiaBiao代表每次獲取數(shù)組的下標
? ? ?//用getElementByIallDiv外層的allDivId
? ??
window.allDiv = document.getElementById("allDivId");
? ??
window.imgShuZuVar = allDiv.getElementsByTagName("img")[0];
? ? ?//用getElementsByTagName獲取圖片
? ??
window.start = null;
? ??
window.start = setInterval(lunBoFunction, 666);
? ? ?//onmouseout：鼠標移出事件
? ??
window.allDiv.onmouseout = function() {
? ? ??
window.start = setInterval(lunBoFunction, 666);
? ??
}
? ? ?//用onmouseover，clearInterval設(shè)置出鼠標移入的時候停止輪播的效果
? ??
window.allDiv.onmouseover = function() {
//? ? ? Interval:間隔
? ? ??
clearInterval(window.start);
? ? ?
window.start = null;
? ??
}
? ? ?//用.獲取所有的span標簽，spanXiaoYuanDianShuZuspan小圓點數(shù)組
? ??
window.spanXiaoYuanDianShuZu = window.allDiv.children[1].children;
? ? ?//分別給4個span添加事件
? ??
for(var i of window.spanXiaoYuanDianShuZu) {
? ? ?
i.onclick = function() {
? //用.src和換數(shù)組下標的方法實現(xiàn)切換背景圖片的效果
? //得到點擊的spanXiaoYuanDianShuZu的title，即下標（span的title默認為數(shù)字下標，
//? ? ? ? ? 因為這里在html中給每個span設(shè)置了數(shù)字下標類型的title）。
? ? ??
var titleVar = this.title;
? ? ? ?//點擊span小圓點的時候?qū)ndexXiaBiao設(shè)置為titleVar
? ? ??
window.indexXiaBiao = titleVar;
//? ? ? ? ? 用.src把變換后的圖片內(nèi)容賦值給現(xiàn)在的圖片內(nèi)容
? ? ??
window.imgShuZuVar.src = window.imgShuZu[indexXiaBiao];
? ? ? ?//先用.style.backgroundColor將所有的span小圓點的背景顏色設(shè)置為白色,
//? 點擊的哪一個就將那個背景顏色設(shè)置為灰色
? //? xiaBiaoNeiRong和i在for......of......格式中都為下標(對應(yīng),代表的)內(nèi)容。
? ? ??
for(var xiaBiaoNeiRong of spanXiaoYuanDianShuZu) {
? ? ? ?
xiaBiaoNeiRong.style.backgroundColor = "white";
? ? ??
}
? ? ??
this.style.backgroundColor = "yellow";
? ? ?
}
? ??
}
? ? ?//用getElementsByClassName獲取兩個耳朵，這里的leftErDuo在左右耳朵
//? ? ? 都含有class="leftErDuo"，所以可當做allErDuo，這樣寫是為了css等處少寫代碼
//? ? ? 比如 #allDivId .leftErDuo:hover只要設(shè)置一個,兩只耳朵就都有效果了。
//? ? ? allErDuoShuZu:所有的耳朵數(shù)組
? ??
var allErDuoShuZu = window.allDiv.getElementsByClassName("leftErDuo");
//? ? ? xiaBiaoNeiRong和i在for......of......格式中都為下標(對應(yīng),代表的)內(nèi)容。
? ??
for(var i of allErDuoShuZu) {
? ? ? //使用className區(qū)分是哪個耳朵
? ? ?
if(i.className == "leftErDuo rightErDuo") {
? ? ??
i.onclick = function() {
//因為傳值的不是zuoErDuo，什么都沒傳，所以執(zhí)行的是lunBoFunction(chuanZhi);中的
//? else{}中的內(nèi)容,點擊右方耳朵耳朵的時候window.indexXiaBiao依次增加，
//? ? ? ? ? ? 數(shù)組內(nèi)容改變,即改變背景圖片和span小圓點
? ? ? ? //的背景顏色
? ? ? ?
lunBoFunction();
? ? ??
}
? ? ?
} else {
? ? ??
i.onclick = function() {
? ? ? ?
lunBoFunction("zuoErDuo");
? ? ??
}
? ? ?
}
? ??
}
? ?
}
//? ? chuanZhi:傳值,只有出現(xiàn)或需要XXX("xxx"),
//? ? 那么xxx就是被傳和要傳的值,要設(shè)置XXX(xxx){}格式的函數(shù)
? ?
function lunBoFunction(chuanZhi) {
//? ? console.log(xxx);格式中的xxx會在谷歌
//? ? 開發(fā)版按F12后在控制臺中打印顯現(xiàn)xxx內(nèi)容,用于調(diào)試,
//? ? 比如檢查xxx是否為null等,是否有錯誤,
//? ? 進而縮小錯誤在哪里的范圍,更容易找到錯誤等
//? ? ? ? console.log(chuanZhi);
? ? ?//用if語句判斷傳入的參數(shù)的內(nèi)容，如果是“zuoerduo”就index依次--
? ??
if(chuanZhi == "zuoErDuo") {
//? ? ? 在要循環(huán)效果的時候用兩個if,要二選一時用if和else if
? ? ?
if(window.indexXiaBiao >= 0) {
? ? ??
indexXiaBiao--;
? ? ?
}
? ? ?
if(window.indexXiaBiao < 0) {
? ? ??
indexXiaBiao = 3;
? ? ?
}
}
else {
? ??
if(window.indexXiaBiao <= 3) {
? ? ??
indexXiaBiao++;
? ? ?
}
? ? ?
if(window.indexXiaBiao > 3) {
? ? ??
indexXiaBiao = 0;
? ? ?
}
? ??
}
? ? ?
? ? ?
? ? ? //輪播的時候也讓所有的span背景顏色改為白色，
? ? ? //讓index==title的span的背景顏色改為灰色
? ? ??
for(var j of spanXiaoYuanDianShuZu) {
? ? ? ??
j.style.backgroundColor = "white";
? //如果下標和span的title相等的時候讓這個span背景顏色改為灰色
? ? ? ??
if(j.title == indexXiaBiao) {
? ? ? ? ?
j.style.backgroundColor = "yellow";
? ? ? ??
}
? ? ??
}
? ? ? ?
? ? ?
window.imgShuZuVar.src = window.imgShuZu[indexXiaBiao];
? ? ?
? ?
}
</script>
</head>
<body>
<!--用來固定輪播圖的位置-->
<div id="allDivId">
<img src="./img/1.png" width="600px" height="400px" />
<div>
<span title="0" class="xuanZhongYuanDian"></span><span title="1"></span>
<span title="2"></span><span title="3"></span></div>
<span class="leftErDuo"><<!--? ?<代表<（小于：less than），?
>代表>（大于：greater than）
? ?--></span>? <span class="leftErDuo rightErDuo"> ></span></div>
</body>
</html>
