JavaScript網頁特效（三）選項卡切換的效果和輪播圖效果
阿新 • • 發佈：2019-01-27
選項卡的切換，主要是li列表的一個一個的選項卡，以及每個選項卡下的內容，點選的時候能夠一一對應，實現起來也不難。
一：html佈局和css樣式
選項卡標題使用ul..li無序列表，選項卡內容用三個div。
/* CSS樣式製作 */
*{
margin: 0;
padding: 0;
}
#main{
margin-left: 20px;
}
#libox{
list-style: none;
display: block;
padding-left: 5px;
}
#libox li{
position: relative;
float: left;
margin: 10px;
padding: 10px 15px;
border: 1px solid #ccc;
border-bottom: none;
}
#libox li:hover{
cursor: pointer;
}
.licontent{
position: absolute;
display: block;
width: 280px;
height: 150px;
padding: 5px;
line-height: 30px;
top: 48px;
border: 1px solid #ccc;
border-top: 2px solid red;
}
#libox li.active{
border-top: 2px solid red;
background: #fff;
z-index: 999;
}
#tab2,#tab3{
display: none;
}
</style 這樣就完成了靜態的頁面，接下來用js實現選項卡切換的效果
window.onload=function(){
var ul=document.getElementById("libox");
var divtabs=document.getElementsByClassName("licontent");
var lis=ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].index=i;//將點選的項儲存為lis[i]的一個屬性index
lis[i].onclick=function(){
//重置所有的效果
for (var j = 0; j < divtabs.length; j++) {
lis[j].className="";
divtabs[j].style.display="none";
}
//為點選的項新增效果
this.className="active";
divtabs[this.index].style.display="block";
}
}
}
</script>選項卡效果完。
輪播圖的js程式碼和選項卡切換的程式碼核心是一樣的，在滑鼠選中一個圖時，需要重置所有的效果，然後再設定被選中的那一項的效果，因為不這樣的話切換下一個選項卡的時候，上一個被選中的選項卡還是處於選中狀態，也就是說選中的效果還在。
輪播圖效果：
程式碼直接給出：
<style>
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
#main{
width: 651px;
height: 270px;
border:1px solid #000;
position: relative;
}
#main #two li{
/*position: absolute;*/
width: 651px;
height: 270px;
display: none;
}
#main #one{
position: absolute;
right: 5px;
bottom: 5px;
}
#main #one li{
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-weight: 800;
border-radius: 15px;
background-color: orange;
margin: 0 5px;
}
</style>
</head>
<body>
<div id="main">
<!-- 功能區域 -->
<ul id="one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 輪播圖區域 -->
<ul id="two">
<li style="display:block"><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript">
//獲取物件
var one=document.getElementById('one');
var two=document.getElementById('two');
//獲取li物件
var oneLi=one.getElementsByTagName("li");
var twoLi=two.getElementsByTagName("li");
//設定定時器
var timer=setInterval(fun,2000);
var a=0;//全域性變數
var num=0;//關係變數
//迴圈新增滑鼠事件
for (var i = 0; i < oneLi.length; i++) {
oneLi[i].onmouseover = function(){
// console.log(this.innerHTML);
num=this.innerHTML-1;//num儲存著滑鼠懸浮的那一項
//清空定時器
clearInterval(timer);
/*功能區切換顏色*/
//1. 初始化功能區的顏色
for (var i = 0; i < oneLi.length; i++) {
oneLi[i].style.backgroundColor='orange';
}
this.style.backgroundColor='red';
for (var k = 0; k < twoLi.length; k++) {
k==num?twoLi[num].style.display='block':twoLi[k].style.display='none';
}
}
oneLi[i].onmouseout=function(){
a=num;//當滑鼠從圓圈上移開時，把num賦給a,這樣才能從當前的位置繼續輪播下去
console.log(a);
timer=null;//初始化
timer=setInterval(fun,2000);
}
}
function fun(){
/*遍歷輪播圖*/
for (var j = 0; j < twoLi.length; j++) {
if (j == a) {
twoLi[a].style.display = 'block';
}else{
twoLi[j].style.display = 'none';
}
}
/*遍歷功能區*/
//全部重置
for (var i = 0; i < oneLi.length; i++) {
oneLi[i].style.backgroundColor='orange';
}
//單獨設定
oneLi[a].style.backgroundColor='red';
a++;
if (a%oneLi.length==0) {
a=0;
}
// console.log(a);
}
</script>
</body>輪播圖效果完。