2020-02-03

一.分页案例:

<head>

<meta charset="UTF-8">

<title>分页</title>

<style type="text/css">

ul li{

list-style: none;

width: 50px;

height: 50px;

line-height: 50px;

float: left;

border: 1px solid cyan;

text-align: center;

cursor: pointer;

}

.active{

background: orange;

}

</style>

</head>

<body>

<ul>

<li><<</li>

<li class="active pages" name="pages">1</li>

<li class="pages" name="pages">2</li>

<li class="pages" name="pages">3</li>

<li class="pages" name="pages">4</li>

<li>>></li>

</ul>

<script>

//1.点击页码 对应的页码颜色改变 给多个元素添加点击事件

//2.当前是谁 点的是向前还是相后 给一个元素添加点击事件

//向前  2==>active

//相后  4==>active

var aPages = document.getElementsByName("pages")

var len = aPages.length;

for(var i = 0; i<len; i++){

aPages[i].onclick = function(){

//this==>当前被点击的对象

change(this)

}

}

//显示当前,隐藏所有

function change(obj){

for(var j =0; j<len; j++){

aPages[j].className = "";

}

obj.className = "active";

}

</script>

</body>


二.选项卡案例:

<head>

<meta charset="UTF-8">

<title>选项卡</title>

<style type="text/css">

#div1 div{

width: 300px;

height: 300px;

border: 1px solid cyan;

display: none;

}

.active{

background: orange;

}

</style>

</head>

<body>

<div id="div1">

<button class="active">1</button>

<button>2</button>

<button>3</button>

<div style="display: block;">111111</div>

<div>222222</div>

<div>333333</div>

</div>

<script>

var div1 = document.getElementById("div1")

var aBtn = div1.getElementsByTagName("button")

var aDiv = div1.getElementsByTagName("div")

//1.给一组元素添加点击事件

for(var i = 0; i<aBtn.length; i++){

aBtn[i].index = i;//给每个btn添加自定义属性,每个自定义属性为i

aBtn[i].onclick = function(){

//去掉所有

for(var j = 0; j<aBtn.length; j++){

aBtn[j].claseName = "";

aDiv[j].style.display = "none"

}

//当前

this.className = "active"

//this==>被点击的btn 找到对应的div

aDiv[this.index].style.display = "block";

}

}

</script>

</body>


三.轮播图案例:

<head>

<meta charset="UTF-8">

<title>轮播图</title>

<style type="text/css">

*{padding: 0; margin: 0;}

li{list-style: none;}

#focus{

width: 400px;

height: 250px;

margin: auto;

border: 1px solid green;

}

#focus #item li{

width: 400px;

display: none;

}

#focus #item img{

width: 100%;

}

</style>

</head>

<body>

<div id="focus">

<ul id="item">

<li><img src="img/0.jpg"/></li>

<li><img src="img/1.jpg"/></li>

<li><img src="img/2.jpg"/></li>

<li><img src="img/3.jpg"/></li>

<li><img src="img/4.jpg"/></li>

</ul>

<ul id="pagging">

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<a href="" id="prev"></a>

<a href="" id="next"></a>

</div>

<script>

var timer = null;

var index = 0;

var focus = document.getElementById("focus");

var item = document.getElementById("item");

var aItem = item.getElementsByTagName("li");

function slide(){

index++;

show()

}

//显示当前,隐藏其他

function show(){

if(index>=aItem.length){

index=0;

}

for(var i = 0; i<aItem.length; i++){

aItem[i].style.display = "none"

}

aItem[index].style.display = "block"

}

timer = setInterval(slide,2000);

focus.onmouseover = function(){

clearInterval(timer)

}

focus.onmouseout = function(){

timer = setInterval(slide,2000);

}

</script>

</body>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容