JS10(网易广告轮播、旋转木马轮播图)

最新推荐文章于 2024-03-15 14:40:52 发布

weixin_30802171

最新推荐文章于 2024-03-15 14:40:52 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/java-g/articles/6598196.html

版权

网易广告轮播

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/css.css"/>
    <script src="js/animate.js" type="text/javascript"></script>
    <script src="js/slider.js" type="text/javascript"></script>
</head>
<body>
<div class="w-slider" id="js_slider">
    <div class="slider">
        <div class="slider-main" id="slider_main_block">
            <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""/></a></div>
        </div>
    </div>
    <div class="slider-ctrl" id="slider_ctrl">
        <span class="slider-ctrl-prev"></span>
        <span class="slider-ctrl-next"></span>
    </div>
</div>
</body>
</html>

css.css

* {margin:0;padding:0; }
img {
    vertical-align: top;
}
.w-slider {
    width: 310px;
    height: 265px;
    margin:100px auto;
    position: relative;
    overflow: hidden;
}
.slider {
    width: 310px;
    height: 220px;

}
.slider-main {
    width: 620px;
    height: 220px;
}
.slider-main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
    height: 220px;
}
.slider-main-img img {
    width: 100%;
}
.slider-ctrl {
    text-align: center;
    padding-top: 5px;
}
.slider-ctrl-con {
    width: 24px;
    height: 20px;
    display:inline-block;
    background:url(../images/icon.png) no-repeat -24px -782px;
    margin: 0 5px;
    cursor: pointer;
    text-indent: -20em;
    overflow: hidden;
}
.current {
    background-position: -24px -762px;
}
.slider-ctrl-prev,
.slider-ctrl-next {
    position: absolute;
    top: 50%;
    margin-top: -35px;
    background:url(../images/icon.png) no-repeat 6px top;
    width: 30px;
    height: 35px;
    opacity: 0.8;
    cursor: pointer;
}
.slider-ctrl-prev {
    left: 0;
}
.slider-ctrl-next {
    right: 0;
    background-position: -6px -44px;
}



slider.js

/**
 * Created by andy on 2015/11/23.
 */
window.onload = function() {
    // 获取元素
    function $(id) {return document.getElementById(id);}
    var js_slider = $("js_slider");  // 获取最大盒子
    var slider_main_block = $("slider_main_block");  // 滚动图片的父亲
    var imgs = slider_main_block.children;  // 获得所有的图片组 需要滚动的部分
    var slider_ctrl = $("slider_ctrl");  // 获得 控制span 的 父盒子
    // 操作元素
    // 生成小span
    for(var i=0;i<imgs.length; i++) {

        var span = document.createElement("span");// 创建 span
        span.className = "slider-ctrl-con"; // 添加类名
        span.innerHTML = imgs.length-i;  //  6 - 0     6 - 1   // 实现 倒序 的方式插入
        slider_ctrl.insertBefore(span,slider_ctrl.children[1]);  // 再 父亲 倒数第二个盒子的前面插入
    }
    // 下面的第一个小span  是默认的蓝色
    var spans = slider_ctrl.children;   // 得到所有的 span
    spans[1].setAttribute("class","slider-ctrl-con current");  // 两个类名

    var scrollWidth = js_slider.clientWidth; // 得到大盒子的宽度 也就是  后面动画走的距离  310
    //  刚开始，按道理   第一张图片 留下   其余的人走到 310 的位置上
    for(var i = 1; i<imgs.length; i++) { // 从1 开始 因为第一张不需要计算

        imgs[i].style.left =  scrollWidth + "px";  // 其他人 先右移动到 310 的位置
    }
    // 遍历三个按钮
     // spans 是 8个按钮 他们都是 span
    var iNow = 0; //  用来 控制播放张数
    for(var k in spans){   //   k  是索引号  spans[k]    spans[0]  第一个span
        spans[k].onclick = function() {
            // alert(this.innerHTML);
            if(this.className == "slider-ctrl-prev"){ // 判断当前点击的这个按钮是不是 prev
                // alert("您点击了左侧按钮");
                //  当我们左侧点击时候， 当前的这张图片 先慢慢的走到右边  上一张 一定先快速走到左侧 （-310）的位置，然后慢慢的走到舞台中
                animate(imgs[iNow],{left: scrollWidth});
                --iNow < 0 ?  iNow = imgs.length - 1 : iNow;
                imgs[iNow].style.left = -scrollWidth + "px";
                animate(imgs[iNow],{left: 0});
                setSquare();
            }
            else if(this.className == "slider-ctrl-next") {  // 右侧按钮开始
                autoplay();
            }
            else {
                // alert("您点击了下面的span");
                // 我们首先要知道我们点击是第几张图片  --- 获得当前的索引号
                // alert(this.innerHTML);
                var that = this.innerHTML - 1;
                // console.log(typeof that);
                if(that > iNow) {
                      // 做法等同于 右侧按钮
                    animate(imgs[iNow],{left: -scrollWidth});  // 当前的这张慢慢的走出去 左侧
                    imgs[that].style.left = scrollWidth + "px"; // 点击的那个索引号 快速走到右侧  310
                }
                else if(that < iNow) {
                    // 做法等同于 左侧按钮
                    animate(imgs[iNow],{left: scrollWidth});
                    imgs[that].style.left = -scrollWidth + "px";
                }
                iNow = that;  // 给当前的索引号
                animate(imgs[iNow],{left: 0});
                /*比如 已经播放到 第4张    我点击了 第2张   把 2 给  inow
                下一次播放，应该播放第3张*/
               // animate(imgs[iNow],{left: 0});
                setSquare();
            }
        }
    }
    //  一个可以控制 播放span 的 函数   当前
    function setSquare() {
       //  清除所有的span current   留下 满足需要的拿一个
        for(var i=1;i<spans.length-1;i++){   //  8个span   我们要 1-6  不要 7  索引号
            spans[i].className = "slider-ctrl-con";
        }
        spans[iNow+1].className = "slider-ctrl-con current";  // 记住 + 1
    }
    // 定时器开始  其实， 定时器就是  右侧按钮
    var timer = null;
    timer = setInterval(autoplay,2000);  // 开启定时器
    function autoplay() {
        //  当我们点击时候， 当前的这张图片 先慢慢的走到左边  下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中
        // alert("您点击了右侧按钮");
        //iNow == 0
        animate(imgs[iNow],{left: -scrollWidth});
        // 当前的那个图片 慢慢的走到 -scrollWidth 位置
        // 变成1   先 ++   ++iNow  先自加  后 运算
        ++iNow > imgs.length -1 ?  iNow = 0 : iNow;
        imgs[iNow].style.left = scrollWidth + "px";  // 立马执行  快速走到右侧
        animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置  慢慢走过来
        setSquare();  // 调用square
    }
    //鼠标经过清除定时器
    js_slider.onmouseover = function() {
        clearInterval(timer);
    }
    js_slider.onmouseout = function() {
        clearInterval(timer);  // 要执行定时器 先清除定时器
        timer = setInterval(autoplay,2000);  // 开启定时器
    }
}

旋转木马轮播图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
   <div class="slide" id="slide">
       <ul>
           <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
       </ul>
       <div class="arrow" id="arrow">
           <a href="javascript:;" class="prev"></a>
           <a href="javascript:;" class="next"></a>
       </div>
   </div>
</div>
</body>
</html>
<script src="js/animate.js" type="text/javascript"></script>
<script>
    var wrap = document.getElementById("wrap");  // 大盒子
    var arrow = document.getElementById("arrow");  // 三角
    var slider = document.getElementById("slide");
    var lis = slider.getElementsByTagName("li");  // 所有要操作的盒子
    wrap.onmouseover = function() {  // 鼠标经过显示和隐藏 左右两个箭头
         animate(arrow,{'opacity':100});
    }
    wrap.onmouseout = function() {
        animate(arrow,{'opacity':0});
    }
    //  存储了每个图片的信息
    var json = [
        {   //  1
            width:400,
            top:20,
            left:50,
            opacity:20,
            z:2
        },
        {  // 2
            width:600,
            top:70,
            left:0,
            opacity:80,
            z:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {  // 4
            width:600,
            top:70,
            left:600,
            opacity:80,
            z:3
        },
        {   //5
            width:400,
            top:20,
            left:750,
            opacity:20,
            z:2
        }
    ];
    //  两个按钮点击事件
    // 函数节流
    var jieliu = true; //  用来控制函数节奏的 变量
    var as = arrow.children;
    change();
    for(var k in as)
    {
        as[k].onclick = function() {
            if(this.className == "prev")
            {
                //  alert("左侧")  移除第一个   放到json 最后一个
                if(jieliu == true)
                {
                    change(false);
                    jieliu = false;  // 点击完毕之后，立马取反
                }

            }
            else
            {
               // alert('右侧');   把 最后一个json 删除   并且把最后一个添加到json 第一个位置
                if(jieliu == true)
                {
                    change(true);
                    jieliu = false;  // 点击完毕之后，立马取反
                }
            }
        }
    }

    function change(flag) {
        //  来判断
        if(flag)
        {
            // 把 最后一个json 删除   并且把最后一个添加到json 第一个位置
             json.unshift(json.pop());
        }
        else
        {
            //   移除第一个   放到json 最后一个
            json.push(json.shift());
        }
      // 为什么给for呢？ 以为我们的json 有5个  盒子li 有 5个
        for(var i=0;i<json.length; i++)
        {
            animate(lis[i],{
                width: json[i].width,
                top: json[i].top,
                left: json[i].left,
                opacity:json[i].opacity,
                zIndex:json[i].z
            },function(){ jieliu = true;})  // 回调函数是等动画执行完毕  才行
        }
    }

</script>

转载于:https://www.cnblogs.com/java-g/articles/6598196.html

weixin_30802171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS10(网易广告轮播、旋转木马轮播图)

网易广告轮播<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/css.css"/> &...
复制链接

扫一扫