美文网首页
11.1.wangyi 小结

11.1.wangyi 小结

作者: 康轩 | 来源:发表于2017-06-05 14:44 被阅读0次

一:css 样式注意点:left_span 和right_span与图片下面的span 公用一个parent
二:js部分:

  1. 遍历图片的张数 ,在这里动态创建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>

相关文章

  • 11.1.wangyi 小结

    一:css 样式注意点:left_span 和right_span与图片下面的span 公用一个parent二:j...

  • 训练营 总结

    昨天做了个小结,今天做个小结的小结,其实应该这么说,昨天小结了个人收获,今天小结一下总体的情况。 非常令我意外,一...

  • Unity3D开发特效组件之TrailRenderer(三)

    本节要点 小结 本节要点 小结

  • 2017小结

    当豆瓣疯狂推送2017观影小结音乐小结阅读小结各种小结的时候,才意识到这一年又快走到头了。 往年的小结都比较磨叽,...

  • 2018.11.23 目标任务

    今日任务 1. 省实验中学宣讲会; 2. 全年小结; 3. 半年小结与全年小结抄写。 加油ヽ(≧Д≦)ノ 全年小结...

  • 渗透命令行

    本文仅作学习记录,如有侵权,请联系删除 Linux命令小结: wmic命令小结: cmd命令小结: powersh...

  • 【C4D】方块组合

    独角兽配色??? 收工打卡 小结 不需要小结 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...

  • UITextView、UITextFeild、block界面传值

    1、UITextView小结 2、UITextFeild小结 UITextFeild参考链接 3、dictiona...

  • find的常见用法

    小结

  • iOS实录16:GCD使用小结(二)

    iOS实录16:GCD使用小结(二) iOS实录16:GCD使用小结(二)

网友评论

      本文标题:11.1.wangyi 小结

      本文链接:https://www.haomeiwen.com/subject/kyvifxtx.html