关于轮播图的制作
今天看了好久 写了好久 注释都在代码里 直接上代码了
今天写这个的时候 意识到了变量的重要性
在这里面下路导航的变量跟上边含图片的标签的变量分不清 很难受以后不能这么写
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图啊QAQtitle>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 590px;
height: 470px;
margin: 100px auto;
border: 2px solid #ccc;
}
img {
vertical-align: top;
}
.inner {
width: 590px;
height: 470px;
position: relative;
overflow: hidden;
}
.inner ul {
width: 1000%;
position: absolute;
left: 0;
top: 0;
}
.inner li {
float: left;
list-style: none;
}
.indicators {
width: 1000%;
position: absolute;
left: 490px;
top: 452px;
}
.indicators ul {
width: 100px;
height: 18px;
background: rgba(0, 0, 0, 0.1);
line-height: 15px;
border-radius: 10px;
}
.indicators li {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #fff;
text-align: center;
margin-right: 10px;
font-size: 10px;
cursor: pointer;
}
.indicators .current {
background-color: skyblue;
}
.hah {
position: relative;
left: 0;
top: 220px;
display: none;
}
.hah span {
display: block;
width: 30px;
height: 30px;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
}
.left {
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
}
style>
head>
<body>
<div id="box" class="box">
<div class="inner" id="ph">
<ul>
<li><a href="#"><img src="11.jpg" alt="">a>li>
<li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt="">a>li>
<li><a href="#"><img src="33.jpg" alt="">a>li>
<li><a href="#"><img src="44.jpg" alt="">a>li>
ul>
<div class="indicators" id="nav">
<ul>
ul>
div>
<div class="hah" id="ying">
<span class="left"><span>
<span class="right">>span>
div>
div>
div>
<script src="common.js">script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框宽度
var imgWidth = box.children[0].offsetWidth;
//获取含有图片的ul
var ulobj =box.children[0].children[0];
//获取含有图片的所有li标签 获取了所有标签就能获取她的个数了
var liobj = ulobj.children;
//获取右下角的小导航栏
var indicator = box.children[0].children[1].children[0];
//设置一个使得全部元素公用的索引
var indexBttom = 0;
//复制第一个li 添加到最后
var heyLi = ulobj.children[0].cloneNode(true);
ulobj.appendChild(heyLi);
//第一步先根据图片的个数做出来相应导航栏的个数
for (var i = 0;i < liobj.length-1;i++){
var tempLi = document.createElement("li");
//为创建的li添加索引
tempLi.setAttribute("index",i);
//设置li里面的内容
tempLi.innerHTML = i+1;
indicator.appendChild(tempLi);
//以上添加完毕 接着注册鼠标进入的事件
tempLi.onmouseover = function () {
//取消所有li的样式
for (var j = 0;j < indicator.children.length;j++){
indicator.children[j].removeAttribute("class");
//写这个的时候容易把上述获得的 含有图片的li误当作indicator中的li
}
//为当前li 添加背景颜色
this.className = "current";
//在这里获取她的索引值
indexBttom = this.getAttribute("index");
//获取之后进行动画效果
animation(ulobj,-indexBttom*imgWidth);
}
}
indicator.children[0].className = "current";
//第二步写左右箭头
//先设置经过box的时候显示 不经过的时候隐藏
box.onmouseover = function () {
my$("ying").style.display = "block";
}
box.onmouseout = function () {
my$("ying").style.display = "none";
}
//分别获得左右箭头
var arryL = my$("ying").children[0];
var arryR = my$("ying").children[1];
//两个箭头这里 写法不尽相同 因为右箭头到越界的位置的时候 不能再遍历进行去除 必须手动去除
//而到了左箭头这里 由于0的索引值有对应的indicator 所以直接遍历去除就行 不用再分情况
arryL.onclick = function () {
//进来判断位置
if (indexBttom == 0){
//到达最左端
indexBttom = liobj.length-1;
ulobj.style.left = -(indexBttom)*imgWidth + "px";
}
indexBttom--;
//进行动画效果
animation(ulobj,-indexBttom*imgWidth);
for (var i = 0;i < indicator.children.length;i++){
indicator.children[i].removeAttribute("class");
}
//再赋值给相应元素
indicator.children[indexBttom].className = "current";
}
arryR.onclick = function () {
if ( indexBttom == liobj.length-1){
indexBttom = 0;
ulobj.style.left = 0+"px";
}
indexBttom++;
//进行动画效果
animation(ulobj,-indexBttom*imgWidth);
if (indexBttom == liobj.length-1) {
// 取消最后一个背景颜色
indicator.children[indicator.children.length-1].removeAttribute("class");
//设置第一个li背景颜色
indicator.children[0].className = "current";
}
else {
//先排它
for (var i = 0;i < indicator.children.length;i++){
indicator.children[i].removeAttribute("class");
}
//再赋值给相应元素
indicator.children[indexBttom].className = "current";
}
}
script>
body>
html>
今天自己改进了代码 准确说重写了一遍 思路清晰了不少
上代码!
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图啊QAQtitle>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 590px;
height: 470px;
margin: 100px auto;
border: 2px solid #ccc;
}
img {
vertical-align: top;
}
.inner {
width: 590px;
height: 470px;
position: relative;
overflow: hidden;
}
.inner ul {
width: 1000%;
position: absolute;
left: 0;
top: 0;
}
.inner li {
float: left;
list-style: none;
}
.indicators {
width: 1000%;
position: absolute;
left: 490px;
top: 452px;
}
.indicators ul {
width: 100px;
height: 18px;
background: rgba(0, 0, 0, 0.1);
line-height: 15px;
border-radius: 10px;
}
.indicators li {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #fff;
text-align: center;
margin-right: 10px;
font-size: 10px;
cursor: pointer;
}
.indicators .current {
background-color: skyblue;
}
.hah {
position: relative;
left: 0;
top: 220px;
display: none;
}
.hah span {
display: block;
width: 30px;
height: 30px;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
}
.left {
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
}
style>
head>
<body>
<div id="box" class="box">
<div class="inner" >
<ul>
<li><a href="#"><img src="11.jpg" alt="">a>li>
<li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt="">a>li>
<li><a href="#"><img src="33.jpg" alt="">a>li>
<li><a href="#"><img src="44.jpg" alt="">a>li>
ul>
<div class="indicators" id="nav">
<ul>
ul>
div>
<div class="hah" id="ying">
<span class="left"><span>
<span class="right">>span>
div>
div>
div>
<script src="common.js">script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var inner = box.children[0];
//获取相框的宽度
var imgWidth = inner.offsetWidth;
//获取存图片的ul
var ulObj = inner.children[0];
//获取所有图片的li标签
var imgLiObj = ulObj.children;
//获取底部导航栏
var navBottom = my$("nav").children[0];
//获取导航栏的li 标签
var navLiObj = navBottom.children;
//设置一个全局变量使得 底部导航栏和图片的 索引一致
var index = 0;
//添加相应的底部导航栏li标签
for (var i = 0 ;i < imgLiObj.length;i++){
var tempLi = document.createElement("li");
tempLi.innerHTML = i+1;
navBottom.appendChild(tempLi);
tempLi.setAttribute("index",i);
//为每个导航栏li注册鼠标进入事件
tempLi.onmouseover = function () {
for (var j = 0 ;j < navLiObj.length;j++){
navLiObj[j].removeAttribute("class");
}
this.className = "current";
//获取导航栏li的索引
var tempIndex = this.getAttribute("index");
//进行动画效果移动图片
animation(ulObj,-tempIndex*imgWidth);
//更新全局变量index
index = tempIndex;
}
}
navLiObj[0].className = "current";
//克隆第一个图片li标签到最后
var heyLi = imgLiObj[0].cloneNode(true);
ulObj.appendChild(heyLi);
//设置进入div显示两侧导航栏的效果
box.onmouseover = function () {
my$("ying").style.display = "block";
clearInterval(timeId);
}
//设置移出div隐藏两侧导航栏的效果
box.onmouseout = function () {
my$("ying").style.display = "none";
var timeId= setInterval(clickHandle,2000);
}
//获取 左右箭头标签
var arryL = my$("ying").children[0];
var arryR = my$("ying").children[1];
//为每个箭头标签设置点击事件
arryL.onclick = function () {
if (index == 0){
index = navLiObj.length;
ulObj.style.left = -index*imgWidth + "px";
}
index --;
animation(ulObj,-index*imgWidth);
for (var j = 0 ;j < navLiObj.length;j++){
navLiObj[j].removeAttribute("class");
}
navLiObj[index].className = "current";
}
arryR.onclick = function () {
if (index == navLiObj.length){
index= 0;
ulObj.style.left = 0 + "px";
}
index++;
animation(ulObj,-index*imgWidth);
if (index == navLiObj.length) {
navLiObj[navLiObj.length-1].removeAttribute("class");
navLiObj[0].className = "current";
}
else {
for (var j = 0 ;j < navLiObj.length;j++){
navLiObj[j].removeAttribute("class");
}
navLiObj[index].className = "current";
}
}
//自动切换
var timeId= setInterval(clickHandle,2000);
function clickHandle() {
if (index == navLiObj.length){
index= 0;
ulObj.style.left = 0 + "px";
}
index++;
animation(ulObj,-index*imgWidth);
if (index == navLiObj.length) {
navLiObj[navLiObj.length-1].removeAttribute("class");
navLiObj[0].className = "current";
}
else {
for (var j = 0 ;j < navLiObj.length;j++){
navLiObj[j].removeAttribute("class");
}
navLiObj[index].className = "current";
}
}
script>
body>
html>