模仿轮播图
模仿轮播图中用到了排他思想,定时器和一些方法,刚开始在第一张图片和最后一张图片的衔接处处理的不好,后来解决了bug,下面的是我的代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 400px;
height: 300px;
margin: 100px auto;
position: relative;
border: 1px solid #ccc;
}
a {
display: none;
width: 400px;
height: 300px;
cursor: move;
text-align: center;
font: 700 80px/300px "simsun";
}
.show {
display: block;
}
ul {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -66px;
}
li {
float: left;
width: 18px;
height: 18px;
text-align: center;
color: #fff;
line-height: 18px;
cursor: pointer;
margin: 2px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
}
.current {
background-color: red;
}
span {
position: absolute;
top: 50%;
text-align: center;
font: 700 30px/60px "simsun";
color: #fff;
margin-top: -30px;
width: 30px;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
}
span:hover {
background: rgba(0, 0, 0, 0.8);
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="show">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span class="left"><</span>
<span class="right">></span>
</div>
<script>
var box = document.getElementsByClassName("box")[0];
var aArr = document.getElementsByTagName("a");
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
//定义一个颜色数组
var colorArr = ["skyblue","yellow","pink","#CA66FF","green","orange"];
//1.给每一个a链接上色;
for(var i=0;i<aArr.length;i++){
aArr[i].style.background = colorArr[i];
}
//2.下面的li标签被点击的时候,点亮的同时让a链接显示出来;
for(var i=0;i<liArr.length;i++){
//自定义属性,索引值
liArr[i].index = i;
liArr[i].onclick = function () {
//排他思想
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
aArr[j].className = "";
}
this.className = "current";
aArr[this.index].className = "show";
}
}
//3.点击右边的span,显示下一张图片;
var count = 0;
spanArr[1].onclick = function () {
count++;
if(count === 6){
count = 0;
}
//排他思想
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
aArr[j].className = "";
}
liArr[count].className = "current";
aArr[count].className = "show";
}
//4.点击左边的span,显示上一张图片;
spanArr[0].onclick = function () {
count--;
if(count === -1){
count = 5;
}
//排他思想
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
aArr[j].className = "";
}
liArr[count].className = "current";
aArr[count].className = "show";
}
//5.加定时器;
var timer = setInterval(spanArr[1].onclick,1000);
//6.鼠标移上去,停止滑动,清除定时器;鼠标移开,添加定时器,开始滑动
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval(spanArr[1].onclick,1000);
}
</script>
</body>
</html>
其实这个代码还可以进行封装,减小代码量,下面的是封装以后的:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 400px;
height: 300px;
margin: 100px auto;
position: relative;
border: 1px solid #ccc;
}
a {
display: none;
width: 400px;
height: 300px;
cursor: move;
text-align: center;
font: 700 80px/300px "simsun";
}
.show {
display: block;
}
ul {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -66px;
}
li {
float: left;
width: 18px;
height: 18px;
text-align: center;
color: #fff;
line-height: 18px;
cursor: pointer;
margin: 2px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
}
.current {
background-color: red;
}
span {
position: absolute;
top: 50%;
text-align: center;
font: 700 30px/60px "simsun";
color: #fff;
margin-top: -30px;
width: 30px;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
}
span:hover {
background: rgba(0, 0, 0, 0.8);
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="show">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span class="left"><</span>
<span class="right">></span>
</div>
<script src="tool.js"></script>
<script>
//0.老三步;给每一个a链接上色;
//1.下面的li标签被点击的时候,点亮的同时让a链接显示出来;
//2.点击右边的span,显示下一张图片;
//3.点击左边的span,显示上一张图片;
//4.加定时器;
var box = document.getElementsByClassName("box")[0];
var aArr = document.getElementsByTagName("a");
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
//定义一个颜色数组
var colorArr = ["skyblue","green","pink","yellow","blue","orange"];
//0.老三步;给每一个a链接上色;
for(var i=0;i<aArr.length;i++){
aArr[i].style.background = colorArr[i];
}
//1.下面的li标签被点击的时候,点亮的同时让a链接显示出来;
//排他思想,干掉所有人,剩下我自己
for(var i=0;i<liArr.length;i++){
liArr[i].onclick = function () {
count = this.innerHTML-1;
fn();
}
}
//2.点击右边的span,显示下一张图片;
var count = 0;
spanArr[1].onclick = fn1;
//3.点击左边的span,显示上一张图片;
spanArr[0].onclick = fn2;
//4.加定时器;
//定时器的逻辑和右边的span一样
var timer = setInterval(spanArr[1].onclick,1000);
//5.鼠标放上去,停止滑动,清除定时器;鼠标离开,滑动开始.添加定时器
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
// setInterval(timer);
timer = setInterval(spanArr[1].onclick,1000);
}
</script>
</body>
</html>
封装方法的tool.js引用包:
//封装点亮盒子和显示a链接
function fn() {
//点亮li,只需要排他思想加this,但是如果让对应的a链接显示,就要模拟tab栏,获取索引值
//利用排他思想,点亮li
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
//a标签的显示也要依靠排他思想
aArr[j].className = "";
}
//剩下我自己
liArr[count].className = "current";
//让对应的a链接显示出来,获取索引值:this.index
aArr[count].className = "show";
}
//封装右侧span
function fn1() {
count++;
//count的最大值为5,等于6的时候,显示第一个
if(count === 6){
count = 0;
}
//排他思想,干掉所有人,剩下我自己
fn();
}
//封装左侧span
function fn2() {
count--;
//count的最大值为5,等于6的时候,显示第一个
if(count === -1){
count = 5;//索引值为5最后一张图
}
//排他思想,干掉所有人,剩下我自己
fn();
}
浙公网安备 33010602011771号