|
|
@@ -1,53 +1,64 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
<style>
|
|
|
/* css reset */
|
|
|
- body,ul{
|
|
|
- margin:0;
|
|
|
+ body,
|
|
|
+ ul {
|
|
|
+ margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
- li{
|
|
|
+
|
|
|
+ li {
|
|
|
list-style: none;
|
|
|
}
|
|
|
- body{
|
|
|
- height: 100vh;
|
|
|
- background-color: black;
|
|
|
- overflow: hidden;
|
|
|
+
|
|
|
+ body {
|
|
|
+ height: 100vh;
|
|
|
+ background-color: black;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
- .container{
|
|
|
+
|
|
|
+ .container {
|
|
|
width: 490px;
|
|
|
height: 170px;
|
|
|
- border:5px solid #fff;
|
|
|
+ border: 5px solid #fff;
|
|
|
margin: 100px auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .container .slider-img{
|
|
|
+
|
|
|
+ .container .slider-img {
|
|
|
position: relative;
|
|
|
}
|
|
|
- .container .slider-img img{
|
|
|
+
|
|
|
+ .container .slider-img img {
|
|
|
width: 490px;
|
|
|
height: 170px;
|
|
|
}
|
|
|
- .container .slider-img li{
|
|
|
+
|
|
|
+ .container .slider-img li {
|
|
|
position: absolute;
|
|
|
- top:0;
|
|
|
+ top: 0;
|
|
|
left: 0;
|
|
|
display: none;
|
|
|
}
|
|
|
- .container .slider-img .active{
|
|
|
+
|
|
|
+ .container .slider-img .active {
|
|
|
display: block;
|
|
|
}
|
|
|
- .slider-btn{
|
|
|
+
|
|
|
+ .slider-btn {
|
|
|
position: absolute;
|
|
|
bottom: 10px;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .slider-btn ul li{
|
|
|
+
|
|
|
+ .slider-btn ul li {
|
|
|
color: #fff;
|
|
|
display: inline-block;
|
|
|
width: 20px;
|
|
|
@@ -58,21 +69,25 @@
|
|
|
line-height: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .slider-btn .active{
|
|
|
+
|
|
|
+ .slider-btn .active {
|
|
|
background-color: red;
|
|
|
}
|
|
|
- .slider-btn .slider-btn-left{
|
|
|
+
|
|
|
+ .slider-btn .slider-btn-left {
|
|
|
float: left;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
- .slider-btn .slider-btn-right{
|
|
|
+
|
|
|
+ .slider-btn .slider-btn-right {
|
|
|
float: right;
|
|
|
padding-right: 20px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
- <div class="container">
|
|
|
+ <div class="container">
|
|
|
<div class="slider-img">
|
|
|
<ul>
|
|
|
<li class="img-item active">
|
|
|
@@ -95,8 +110,8 @@
|
|
|
<div class="slider-btn">
|
|
|
<div class="slider-btn-left">
|
|
|
<ul>
|
|
|
- <li><</li>
|
|
|
- <li>></li>
|
|
|
+ <li class="left-btn"><</li>
|
|
|
+ <li class="right-btn">></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="slider-btn-right">
|
|
|
@@ -115,25 +130,87 @@
|
|
|
var numBtn = document.getElementsByClassName("num-btn");
|
|
|
// 获取5张图片
|
|
|
var imgItem = document.getElementsByClassName("img-item");
|
|
|
+ // 获取向右按钮
|
|
|
+ var rightBtn = document.getElementsByClassName("right-btn")[0];
|
|
|
+ // 获取向左按钮
|
|
|
+ var leftBtn = document.getElementsByClassName("left-btn")[0];
|
|
|
+ // 标识当前显示的是第几个
|
|
|
+ var nowIndex = 0;
|
|
|
+
|
|
|
+
|
|
|
|
|
|
+ // 数字按钮功能
|
|
|
// 给5个数字按钮绑定事件
|
|
|
for(var i=0;i<numBtn.length;i++){
|
|
|
// 循环过程当中给每一个按钮添加一个新属性index 用来保存索引i
|
|
|
numBtn[i].index = i;
|
|
|
+ // 循环给每一个按钮绑定按钮事件
|
|
|
numBtn[i].onmouseenter = function(){
|
|
|
- // 循环所有按钮 将选中状态的active类逐个移除
|
|
|
- for(var j=0;j<numBtn.length;j++){
|
|
|
- // 移除按钮的active类
|
|
|
- numBtn[j].classList.remove("active");
|
|
|
- // 移除图片的选中状态 active类
|
|
|
- imgItem[j].classList.remove("active");
|
|
|
- }
|
|
|
- // 向当前移入的数字按钮中添加一个新类 activ 变为选中状态
|
|
|
- this.classList.add("active");
|
|
|
- // 向制定索引的图片添加选中状态acitve类
|
|
|
- imgItem[this.index].classList.add("active");
|
|
|
+ // 调用runFun函数 实现控制
|
|
|
+ runFun(this.index);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //向后按钮事件
|
|
|
+ rightBtn.onclick=function(){
|
|
|
+ runFun(nowIndex+1);
|
|
|
+ }
|
|
|
+ // 向上按钮事件
|
|
|
+ leftBtn.onclick = function(){
|
|
|
+ runFun(nowIndex-1)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 封装函数实现控制第n个按钮和图片的现实
|
|
|
+ function runFun(n) {
|
|
|
+ // 控制向右到达边界的时候更正
|
|
|
+ if(n==5){
|
|
|
+ n = 0
|
|
|
+ }
|
|
|
+ // 控制向左到达边界的时候更正
|
|
|
+ if(n<0){
|
|
|
+ n = 4
|
|
|
}
|
|
|
+ //循环所有按钮 将选中状态的active类逐个移除
|
|
|
+ for (var j = 0; j < numBtn.length; j++) {
|
|
|
+ // 移除按钮的active类
|
|
|
+ numBtn[j].classList.remove("active");
|
|
|
+ // 移除图片的选中状态 active类
|
|
|
+ imgItem[j].classList.remove("active");
|
|
|
+ }
|
|
|
+ // 控制第N个按钮 和图片的现实
|
|
|
+ numBtn[n].classList.add("active");
|
|
|
+ imgItem[n].classList.add("active");
|
|
|
+ // 将当前的索引 赋值给nowIdex;
|
|
|
+ nowIndex = n;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //未封装函数前的数字按钮功能
|
|
|
+ // // 给5个数字按钮绑定事件
|
|
|
+ // for(var i=0;i<numBtn.length;i++){
|
|
|
+ // // 循环过程当中给每一个按钮添加一个新属性index 用来保存索引i
|
|
|
+ // numBtn[i].index = i;
|
|
|
+ // // 循环给每一个按钮绑定按钮事件
|
|
|
+ // numBtn[i].onmouseenter = function(){
|
|
|
+ // // 循环所有按钮 将选中状态的active类逐个移除
|
|
|
+ // for(var j=0;j<numBtn.length;j++){
|
|
|
+ // // 移除按钮的active类
|
|
|
+ // numBtn[j].classList.remove("active");
|
|
|
+ // // 移除图片的选中状态 active类
|
|
|
+ // imgItem[j].classList.remove("active");
|
|
|
+ // }
|
|
|
+ // // 向当前移入的数字按钮中添加一个新类 activ 变为选中状态
|
|
|
+ // this.classList.add("active");
|
|
|
+ // // 向制定索引的图片添加选中状态acitve类
|
|
|
+ // imgItem[this.index].classList.add("active");
|
|
|
+ // }
|
|
|
+ // }
|
|
|
</script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
