1.html<标签>解析
2.js页面元素获取，及初始化创建轮播圆点解析
3.点击事件逻辑：切换图片及圆点样式更新
4.less布局
.common-title {}
.common-ps {}
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
body {
height: 100%;
#wrap {
width: 600px;
height: 900px;
border: 5px solid steelblue;
border-radius: 8%;
background: antiquewhite;
box-shadow: 2px 2px 5px #000000;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 2% auto;
text-align: center;
transition: 2s;
//绝对定位，子元素继承位置
position: absolute;
.ct {
margin: 10px auto;
}
.cps {
margin-left: 60%;
}
&:hover {
background: seashell;
}
#btn1 {
transition: 1s !important;
}
.cevent-carousel {
margin-top: 1%;
left: 7%;
position: absolute;
.carousel-img {
img {
width: 500px;
height: 300px;
}
}
button {
position: relative;
//nth-child所包含的元素必须和父元素相同，这里父元素为button，这个为span，需要nth-of-type()
&:nth-of-type(1) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
&:nth-of-type(2) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
}
}
.cevent-carousel-pro {
position: absolute;
top: 55%;
.carousel-img {
img {
width: 500px;
height: 300px;
}
}
button {
position: relative;
//nth-child所包含的元素必须和父元素相同，这里父元素为button，这个为span，需要nth-of-type()
&:nth-of-type(1) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
&:nth-of-type(2) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
}
#dotReplacePic {
position: absolute;
list-style: none;
text-align: center;
width: 100%;
margin-left: 30%;
top: 103%;
li {
float: left;
width: 30px;
height: 30px;
background: steelblue;
color: white;
border: 2px solid silver;
border-radius: 50%;
opacity: .8;
margin: 0 1.5%;
transition:1s;
&:hover {
background: tomato;
opacity: .7;
transform: scale(1.5);
}
}
}
}
}
}
}
5.js操纵页面元素
/* DOM-html-document对象
* 注意：$(function(){}) jQuery中，获取btn的value失效，需要转为window.onload
*/
window.onload = function() {
var btn1 = document.getElementById("btn1");
console.log("mei点", btn1.innerHTML);
var flag = true;
btn1.onclick = function() {
if(flag) {
btn1.innerHTML = "BT Button";
} else {
btn1.innerHTML = "Link Button";
}
flag = !flag;
}
btn1.onmouseenter = function() {
btn1.style.background = "deepskyblue";
}
btn1.onmouseleave = function() {
btn1.style.background = "white";
}
//获取btn
var previous = document.getElementById("btn-previous")
var next = document.getElementById("btn-next");
//获取图片，结果为array数组，需要后面加[index]索引
var imgs = document.getElementsByTagName("img")[0];
console.log("img对象[]:", imgs);
previous.onclick = function() {
console.log("上一张");
imgs.src = "./static/img/logo-500-300-5.jpg";
}
next.onclick = function() {
console.log("下一张");
imgs.src = "./static/img/logo-500-300-1.jpg";
}
//获取btn
var previousPro = document.getElementById("previous")
var nextPro = document.getElementById("next");
var imgList = document.getElementsByClassName("carousel-img-list")[0];
console.log("图片集合：", imgList, "info: ", info);
//获取图片，结果为array数组，需要后面加[index]索引
var imgsPro = ["./static/img/logo-500-300-1.jpg", "./static/img/logo-500-300-5.jpg", "./static/img/logo-500-300-2.jpg", "./static/img/logo-500-300-3.jpg", "./static/img/logo-500-300-4.jpg"];
//保存当前显示图片索引，默认0，第一张
var index = 0;
//共 5 张图片-当前第 1 张
var info = document.getElementById("info");
info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + 1 + " 张";
//原点切换图片
var dotReplacePic = document.getElementById("dotReplacePic");
//在js中创建的元素，想要操作，必须在这里重新获取
var dotLi = document.getElementsByTagName("li");
//每次点击dot，判断index位置
var dotIndex = 0;
//（1）存放li标签
var liNodes = "";
//（2）存放style：css
var liStyle = document.createElement("style");
var liCss = "";
for(var i = 0; i < 5; i++) {
liNodes += "<li></li>";
//这里添加css没有起作用，改为less中添加
liCss = "ul > li:nth-child(" + (i + 1) + "){}";
console.log("liCss: ", liCss);
}
dotReplacePic.innerHTML = liNodes;
liStyle.innerHTML += liCss;
console.log("最后的liStyle：", liStyle);
//放入html
document.head.appendChild(liStyle);
//dot初始化
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
console.log("img对象:", imgs);
previousPro.onclick = function() {
//初始化css样式
dotLi[dotIndex].style.transform = "scale(1)";
dotLi[dotIndex].style.opacity = .8;
dotLi[dotIndex].style.background = "steelblue";
console.log("上一张，索引自减");
index--;
if(index < 0) {
index = imgsPro.length - 1;
}
imgList.src = imgsPro[index];
//在index自减之后记录index位置
dotIndex = index;
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + (index + 1) + " 张";
}
nextPro.onclick = function() {
//初始化css样式
dotLi[dotIndex].style.transform = "scale(1)";
dotLi[dotIndex].style.opacity = .8;
dotLi[dotIndex].style.background = "steelblue";
console.log("下一张，索引自增");
index++;
if(index > imgsPro.length - 1) {
index = 0;
}
imgList.src = imgsPro[index];
//在index自增之后记录index位置
dotIndex = index;
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + (index + 1) + " 张";
}
}
6.html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>html-document对象</title>
<link rel="stylesheet" href="../less/6-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/4-js-document.css" />
<body>
<div id="wrap">
<h1 class="ct common-title">原生js-DOM轮播图操作</h1>
<h3 class="cps common-ps">一刀coder</h3>
<button id="btn1" class="btn btn-default">这是个link按钮</button>
<div class="cevent-carousel">
<div class="carousel-img">
<img src="static/img/logo-500-300-1.jpg" alt="..." class="img-thumbnail">
</div>
<button id="btn-previous" class=" btn btn-primary" type="button">上一张 <span>↑</span> P</button>
<button id="btn-next" class="btn-next btn btn-warning" type="button">下一张 <span>↓</span> N</button>
</div>
<div class="cevent-carousel-pro">
<div class="carousel-img img-thumbnail">
<img src="static/img/logo-500-300-1.jpg" alt="..." class="carousel-img-list">
</div>
<button id="previous" class=" btn btn-danger" type="button">上一张 <span>↑</span> P</button>
<button id="next" class="btn-next btn btn-success" type="button">下一张 <span>↓</span> N</button>
<button id="info" class="btn-next btn btn-default disabled" type="button"></button>
<ul id="dotReplacePic">
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../less/6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../less/6-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/4-js-document.js"></script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
