一:css 样式注意点:left_span 和right_span与图片下面的span 公用一个parent
二:js部分:
- 遍历图片的张数 ,在这里动态创建footer_span inserBefore插入到第二个span中.同时给它们绑定类名,拿出oSpan.innerHTML 为下面的span的索引做准备的提供;
2:设置出了第一张图片以外,其他的图片从新遍历 统一放在右边, left=parent.offsetWidth;
3:遍历所有的 footer_box.children.(遍历所有的span包括 left_span,right_span)
3.1 :通过类名 可以先判断点击的是right_span 与 left_span
3.1.1:点击left_span 图片向右走 count-- .这里就是有三步 1:让当前的图片立即向右走 一个parent.offsetWidth; 2.让上一个来到左边-parent.offsetWidth;位置,等待动画触发.3:让当前对应的索引的图片 动画显示 left:0;
4 :else :如果点击的都不是上面的两个 ,那么就是点击了这里 : 这里就拿上面原来创建span的索引 来 跟 (当前显示的索引)isNow 索引做对比 来判断是点击了相对于当前索引的左边还是右边;
5:footer_span的排他思想就单独另外用一个函数,这样方便我们调用(因为它有三个地方的调用) 具体哪个调用的看代码吧, 在这里主要让你们注意的就是怎么用排他的遍历
在这里我们遍历就 先排除 left_span 与 right_span 列子: for (var i =1; i < footer_box.children.length - 1; i++) ;然后让当前点击的绑定类名 .但是这里就注意 了 isNow + 1; 因为我们遍历的时候是从1 开始遍历故加1,footer_box.children[isNow+1].
className = 'current cur'; 然后设置全部的为另外一个类 footer_box.children[i].className = 'current ';
6:设置无限向左滚动 ,用到定时器
7:onmouseover 的时候清除定时器 这样就停止动画 clearInterval(timer);
8:onmouseout 的时候 开启定时器 timer=setInterval(autoPlay,1000);
代码如下:
<script src="js/MyFunc.js"></script>
<script>
function $(symId) {
return document.getElementById(symId);
}
window.onload = function () {
//找对象
var box = $('box');
var top_main = $('top_main');
var picS = top_main.children;
// var footer_box = box.children[1];
var footer_box = $('footer');
// var iSpan = footer_box.children;
var isNow = 0;//用来判断跳转的页数
//遍历图片
for (var i = 0; i < picS.length; i++) {
//有多少张图片就创建多少个span
// var pic = picS[i];
// pic = i;
//创建span
var oSpan = document.createElement('span');
// 添加类
oSpan.className = 'current';
//footer_box.appendChild(oSpan);
//把创建出来的span 添加到第二个
footer_box.insertBefore(oSpan, footer_box.children[1]);
//查看ospan 的索引 值 发现它是由大到小的. 那么我们就只能拿pics[i].lenght -i
// oSpan.innerHTML= i;
//在这里拿到span的索引
oSpan.innerHTML = picS.length - i;
}
//单独给 最下面的 第一个span (相对来说是第二个 同行来说是第一个)添加类
footer_box.children[1].className = 'current cur';//这行要写在外面不能写在上面的大括号里面
//除了第一张 其他的都给它从新排列
var box_w = box.offsetWidth;
for (var i = 1; i < picS.length; i++) {
picS[i].style.left = box_w + 'px';
}
//判断点击了哪里? 点击了以后让图片滚动 那么多个span的地方可以点击 那么只能遍历 判断了
for (var i = 0; i < footer_box.children.length; i++) { //这里遍历的是 全部的span (包括左右两个小 箭头)
// mySpan[i].index = i;
//拿出单个span
var mySpan = footer_box.children[i];
mySpan.onmousedown = function () {
//alert(0);
if (this.className == 'lf') {//点击了左边 图片向右滚动
//让当前的页快速的向右移动
buffer(picS[isNow], {left: box_w});
isNow--;
// console.log(isNow);
//判断不给它小于0
if (isNow < 0) {
isNow = picS.length - 1;//这里的索引的长 是拿图片的总张数来判断.
}
//让上一张快速的来到左边 等待
picS[isNow].style.left = -box_w + 'px';
//让上一张图片快速的显示在这里
buffer(picS[isNow], {left: 0})
} else if (this.className == 'rg') {//点击了右边
//让当前的页快速的向左移动
buffer(picS[isNow], {left: -box_w});
isNow++;
if (isNow > picS.length - 1) {//如果当前的跳转到第5张图片 (用图片的索引来判断
isNow = 0; //给它直接跳到第0 张
}
//让下一张快速的来到右边等待
picS[isNow].style.left = box_w + 'px';
//让对应索引的这一张动画向左移动 显示 那么此时 left为0
buffer(picS[isNow], {left: 0})
} else {//点击了脚下中间的某个span 那么 这里点击的群体个数就更多了 需要遍历
//但是想想上面都遍历了一次大范围的了 这次遍历就将遍历缩小范围吧
// 就是从第2个span 开始 到小于总数的1
// for (var i = 1; i < footer_box.children.length-1; i++) {
//在这里就拿到 横轴的 所有 span
// footer_box.children[i].className = 'current ';//让所有的为原来的
// this.className = 'current cur';//让当前的单独却换
// 但是这里两步就实现了 索引的却换而已 . 想了想 这里排他实现不应该放这里.
// 我们应该把他另外放,然后好调用
// 在这里我们应该是实现 点击哪个span 给它对应的图片的索引动画显示
//但是我们要想知道我们点击的是当前的span的左边还是右边的话,
// 我们必须另外保存一个变量 用来记录点击的是哪个
// // var mSpan = footer_box.children.length-1.[i];
// // mSpan.onmousedown = function () {
// alert(0);
// var indexNew = 0;//用来判断将要点击的新的span
var indexNew = this.innerHTML - 1;//因为上面我们获取到的span 的索引值从 1 开始 .而现在我们要的索引从0 开始
if (indexNew > isNow) { //点击 了右边
//alert('点击了右边');
buffer(picS[isNow], {left: -box_w});
isNow = indexNew;
//让下一张快速的来到右边等待
picS[indexNew].style.left = box_w + 'px';
//让对应索引的这一张动画向左移动 显示 那么此时 left为0
buffer(picS[isNow], {left: 0})
} else if (indexNew < isNow) {//点击了左边
// alert('点击了左边');
//让当前的页快速的向右移动
buffer(picS[isNow], {left: box_w});
isNow = indexNew;
//让上一张快速的来到左边 等待
picS[isNow].style.left = -box_w + 'px';
//让上一张图片快速的显示在这里
buffer(picS[isNow], {left: 0})
}
}
//当span点击一触发就进行 当然这里也是设置了排除大小于号的span的触发
update();//调用索引却换
}
}
//更新索引
function update() {
for (var i =1; i < footer_box.children.length - 1; i++) {
//在这里就拿到 横轴的 所有 span
footer_box.children[i].className = 'current ';//让所有的为原来的 / 注意不能 - 1
//this.className = 'current cur';//让当前的单独却换 但是这个方式 不能实现
footer_box.children[isNow+1].className = 'current cur';//让当前的单独却换 , 不能不 + 1
// 这里的位置可以写在当前遍历的外面
console.log(footer_box.children[isNow+1]);
}
// for (var i = 0; i < oSpan.innerHTML.length; i++) {//这里是不能直接遍历 oSpan.innerHTML
// oSpan.innerHTML[i].className = 'current';
// this.className = 'current cur';
// }
}
//设置无限轮播 给它无限的向左滚动
var timer = null;
timer = setInterval(autoPlay,1000);
function autoPlay() {
console.log('-------------');
buffer(picS[isNow], {left: -box_w});
isNow++;
if (isNow>picS.length-1) {
isNow = 0;
}
//让下一张快速的来到右边等待
picS[isNow].style.left = box_w + 'px';
//让对应索引的这一张动画向左移动 显示 那么此时 left为0
buffer(picS[isNow], {left: 0});
//让下面的span 条 也跟着跳转
update();//调用索引却换
}
//当 鼠over 与out 时发生的事件
box.onmouseover = function () {
// alert(0);
clearInterval(timer);
// console.log(clearInterval(timer));
};
box.onmouseout = function () {
// alert('lIK')
timer=setInterval(autoPlay,1000);
};
}
</script>
