美文网首页
14_JS轮播图案例

14_JS轮播图案例

作者: 对方不想理你并向你抛出一个异常 | 来源:发表于2017-09-10 14:36 被阅读0次

仿网易轮播图

  • 初始状态，第一张图片在盒子中间，其他图片在右边imgs[i].style.left = 盒子宽度+"px";
  • 图片在盒子左边：img.style.left = - 盒子宽度+"px"，图片在盒子中间：img.style.left = 0;，图片在盒子右边：img.style.left = 盒子宽度+"px";
  • 当点击下一张按钮，当前盒子中间图片的缓慢移动（带动画）到盒子左边，下一张图片快速移动（不带动画）到盒子右边，然后再让这下一张图片缓慢移动（带动画）到盒子中间。
  • 当点击上一张按钮，当前盒子中间图片的缓慢移动（带动画）到盒子右边，下一张图片快速移动（不带动画）到盒子左边，然后再让这下一张图片缓慢移动（带动画）到盒子中间。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/basic.css"/>
    <script type="text/javascript" src="js/animate.js"></script>
    <script type="text/javascript" src="js/slider.js"></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="#">![](images/1.jpg)</a></div>
                <div class="slider-main-img"><a href="#">![](images/2.jpg)</a></div>
                <div class="slider-main-img"><a href="#">![](images/3.jpg)</a></div>
                <div class="slider-main-img"><a href="#">![](images/4.jpg)</a></div>
                <div class="slider-main-img"><a href="#">![](images/5.jpg)</a></div>
                <div class="slider-main-img"><a href="#">![](images/6.jpg)</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/basic.css

@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
img{
    display: block;
}
.w-slider{
    width: 310px;
    height: 265px;
    margin: 100px auto;
    background-color: pink;
    position: relative;
    overflow: hidden;
}
.slider{
    width: 310px;
    height: 220px;
    /*background-color: purple;*/

}
.slider-main{
    width: 200%;
    height: 100%;
    /*background: purple;*/

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

js/animate.js

/**
 * Created by huhch on 2017/6/13.
 */
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,null)[attr];
    }
}
function $(id){return document.getElementById(id);}
function animate(obj , json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        /*
         关闭定时器的思路，不用判断多个属性都到达target,
         只要判断有一个属性未到target，定时器就不能停止
         */
        //用户判断是否可以关闭定时器
        var flag  = true;
        //开始遍历
        for(var attr in json){
            //当前位置
            var current;
            if(attr == "opacity"){
                if("opacity" in obj.style){
                    current = parseInt(getStyle(obj,attr)*100);
                }else{//IE6、7、8
                    var alphaStr = getStyle(obj,"filter");
                    var cs = alphaStr.substring(alphaStr.lastIndexOf("=")+1 , alphaStr.lastIndexOf(")"));
                    current = isNaN(parseInt(cs))?100:parseInt(cs);
                }

            }else{
                current = parseInt(getStyle(obj,attr));
            }

            //计算步长
            //target = json[attr]
            var step = (json[attr] - current)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            if(attr == "opacity"){//判断用户是否要修改opacity属性
                if("opacity" in obj.style){//判断浏览器是否支持opacity属性
                    obj.style.opacity = (current+step)/100;
                }else{
                    obj.style.filter = "alpha(opacity="+(current+step)+")";
                }
            }else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = current+step+"px";
            }
            if(current != json[attr]){
                flag = false;
            }
        }
        if(flag){//如果flag=true,说明多个属性都=target了
            clearInterval(obj.timer);
            //alert("动画完成");
            if(fn) fn();
        }

    },20);
}

js/slider.js

/**
 * Created by huhch on 2017/6/13.
 */
window.onload = function () {
    var slider = $("js_slider");//最大的盒子
    var slider_main = $("slider_main_block");//存放图片的盒子

    var imgs = slider_main.children;//所有的图片

    var slider_ctrl = $("slider_ctrl");//控制的盒子
    //生成序列的span
    for(var i = 0; i<imgs.length; i++){
        var span = document.createElement("span");
        span.className = "slider-ctrl-con";
        span.innerHTML = imgs.length-i;
        //console.log(slider_ctrl.children.length);
        slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
    }

    var spans = slider_ctrl.children;//得到所有的span
    spans[1].setAttribute("class","slider-ctrl-con current");

    //得到大盒子的宽度，也就是后面动画走的距离
    var scrollWidth = imgs[0].clientWidth;

    //第一张图片在盒子中，其他图片右移一个盒子宽度
    for(var i = 1; i<imgs.length; i++){
        imgs[i].style.left = scrollWidth+"px";
    }
    var iNow = 0;
    for(var k in spans){
        spans[k].onclick = function () {
            if(this.className == "slider-ctrl-prev"){
                //左侧
                animate(imgs[iNow],{left:scrollWidth});
                //iNow--;
                //if(iNow<0){
                //    iNow = imgs.length-1;
                //}
                //iNow = --iNow<0?imgs.length-1:iNow;//这一句等同于上面注释的四行代码
                --iNow<0?iNow=imgs.length-1:iNow;//等同于上面
                imgs[iNow].style.left = -scrollWidth+"px";
                animate(imgs[iNow],{left:0});
                setSquece();
            }else if(this.className == "slider-ctrl-next"){
                /*
                //当我们点击的时候，下一张图片快速（不带动画）移动到盒子右边，然后当前图片动画的向左移动盒子距离，下一张图片动画的移动到盒子中间
                //右侧
                animate(imgs[iNow],{left:-scrollWidth});
                //iNow++;
                //if(iNow>imgs.length-1){
                //    iNow = 0;
                //}
                iNow = (++iNow>imgs.length-1)?0:iNow;//这一句等同于上面注释的四行代码
                imgs[iNow].style.left = scrollWidth+"px";
                animate(imgs[iNow],{left:0});
                setSquece();
                */
                autoPlay();
            }else{
                //点击下方的按钮
                var that = this.innerHTML -1;
                if(that>iNow){
                    imgs[that].style.left = scrollWidth+"px";
                    animate(imgs[iNow],{left:-scrollWidth});
                }else if(that<iNow){
                    imgs[that].style.left = -scrollWidth+"px";
                    animate(imgs[iNow],{left:scrollWidth});
                }
                iNow = that;
                animate(imgs[iNow],{left:0});
                setSquece();
            }
        }
    }

    //设置序列号
    function setSquece(){
        for(var i=1;i<spans.length-1 ;i++){//第一个和最后一个是上一张和下一张按钮
            spans[i].className = "slider-ctrl-con";
        }
        spans[iNow+1].className = "slider-ctrl-con current";
    }
    //定时器开始轮播
    var timer = null;
    timer = setInterval(autoPlay,3000);
    function autoPlay(){
        animate(imgs[iNow],{left:-scrollWidth});
        iNow = (++iNow>imgs.length-1)?0:iNow;
        imgs[iNow].style.left = scrollWidth+"px";
        animate(imgs[iNow],{left:0});
        setSquece();
    }
    slider.onmouseout = function () {
        clearInterval(timer);
        timer = setInterval(autoPlay,3000);
    }
    slider.onmouseover = function () {
        clearInterval(timer);
    }
}

images下有1~6.jpg和icon.png

例：旋转木马
index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马</title>
    <link rel="stylesheet" type="text/css" href="css/basic.css"/>
    <script type="text/javascript" src="js/animate.js"></script>
    <script type="text/javascript">
        //  存储了每个图片的信息
        var json = [
            {   //  1
                width:200,
                top:0,
                left:500,
                opacity:10,
                z:2
            },
            {   //  2
                width:400,
                top:20,
                left:180,
                opacity:30,
                z:3
            },
            {   //  3
                width:450,
                top:40,
                left:100,
                opacity:50,
                z:4
            },
            {   //  4
                width:500,
                top:60,
                left:0,
                opacity:70,
                z:5
            },
            {   // 3
                width:800,
                top:100,
                left:200,
                opacity:100,
                z:6
            },{   //  4
                width:500,
                top:60,
                left:700,
                opacity:70,
                z:5
            },
            {   //  3
                width:450,
                top:40,
                left:650,
                opacity:50,
                z:4
            },
            {   //  2
                width:400,
                top:20,
                left:620,
                opacity:30,
                z:3
            }
        ];

        window.onload = function () {
            var slider = document.getElementById("slider");

            var lis = slider.children[0].children;
            var arrow = document.getElementById("arrow");
            var as = arrow.getElementsByTagName("a");
            slider.onmouseover = function () {
                animate(arrow,{opacity:100});
            };
            slider.onmouseout = function () {
                animate(arrow,{opacity:0});
            };
//            函数节流
            var jieliu = true;
            as[0].onclick = function () {
                if(jieliu == false){
                    change(false);
                    jieliu = true
                }

            };
            as[1].onclick = function () {
                if(jieliu == false){
                    change(true);
                    jieliu = true
                }
            }
            change();
            function change(flag){
                //next按钮
                if(flag){
                    //json数组第一个移出，放入最后一个
                    json.push(json.shift());
                }else{
                    //json数组最后一个移出，放入第一个
                    json.unshift(json.pop());
                }
                for(var i=0;i<lis.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 = false;
                    });
                }
            }

        }
    </script>
</head>
<body>
    <div class="wrap">
        <div class="slider" id="slider">
            <ul>
                <li><a href="#">![](images/slidepic1.jpg)</a></li>
                <li><a href="#">![](images/slidepic2.jpg)</a></li>
                <li><a href="#">![](images/slidepic3.jpg)</a></li>
                <li><a href="#">![](images/slidepic4.jpg)</a></li>
                <li><a href="#">![](images/slidepic5.jpg)</a></li>
                <li><a href="#">![](images/slidepic6.jpg)</a></li>
                <li><a href="#">![](images/slidepic7.jpg)</a></li>
                <li><a href="#">![](images/slidepic8.jpg)</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>

css/basic.css

*{
    padding: 0;
    margin: 0;
}
ul,li{
    list-style: none;
}
.wrap{
    width: 1200px;
    margin: 0 auto;
}
.slider{
    width: 100%;
    height: 600px;
    position: relative;
    /*background-color: #ccc;*/
}
.slider li{
    position: absolute;
    left: 0;
    top: 0;
    /*width: 200px;*/
}
.slider img{
    width: 100%;
}
.arrow{
    position: absolute;
    width: 100%;
    opacity: 0;
    z-index: 100;
    left: 0;
    top: 40%;
}
.prev ,
.next{
    position: absolute;
    width: 76px;
    height: 112px;
    top: 0;
    z-index: 99;
}
.prev{
    left: 0;
    background: url(../images/prev.png) no-repeat;
}
.next{
    right: 0;
    background: url(../images/next.png) no-repeat;
}

js/animate.js

/**
 * Created by huhch on 2017/6/13.
 */
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,null)[attr];
    }
}
function $(id){return document.getElementById(id);}
function animate(obj , json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        /*
         关闭定时器的思路，不用判断多个属性都到达target,
         只要判断有一个属性未到target，定时器就不能停止
         */
        //用户判断是否可以关闭定时器
        var flag  = true;
        //开始遍历
        for(var attr in json){
            //当前位置
            var current;
            if(attr == "opacity"){
                if("opacity" in obj.style){
                    current = parseInt(getStyle(obj,attr)*100);
                }else{//IE6、7、8
                    var alphaStr = getStyle(obj,"filter");
                    var cs = alphaStr.substring(alphaStr.lastIndexOf("=")+1 , alphaStr.lastIndexOf(")"));
                    current = isNaN(parseInt(cs))?100:parseInt(cs);
                }

            } else{
                current = parseInt(getStyle(obj,attr));
            }

            //计算步长
            //target = json[attr]
            var step = (json[attr] - current)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            if(attr == "opacity"){//判断用户是否要修改opacity属性
                if("opacity" in obj.style){//判断浏览器是否支持opacity属性
                    obj.style.opacity = (current+step)/100;
                }else{
                    obj.style.filter = "alpha(opacity="+(current+step)+")";
                }
            }else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = current+step+"px";
            }
            if(current != json[attr]){
                flag = false;
            }
        }
        if(flag){//如果flag=true,说明多个属性都=target了
            clearInterval(obj.timer);
            //alert("动画完成");
            if(fn) fn();
        }

    },20);
}

相关文章

  • 14_JS轮播图案例

    仿网易轮播图 初始状态，第一张图片在盒子中间，其他图片在右边imgs[i].style.left = 盒子宽度+"...

  • JavaScript实战项目：移动端 Touch 轮播图

    Touch 轮播图 touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。 1...

  • 原生js实现移动端Touch轮播图的方法步骤

    Touch 轮播图 touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。 1...

  • 原生js轮播图

    今天和大家分享的案例是轮播图 简书 由js实现的轮播图效果 代码展示： css部分： HTML部分： script...

  • web前端学习基础教程，简单的图片旋转木马自动轮播js代码

    一款简单的图片旋转木马自动轮播js代码，图片叠加轮播切换效果，支持点击左右箭头按钮控制切换。 案例效果图 案例源码...

  • Axure案例——轮播图例制作

    Axure案例——轮播图例制作 制作流程： 1、添加轮播图的动态面板，注意，设置状态时，通过复制状态来设置； 2、...

  • 无标题文章

    轮播图分为：传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色，各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为：传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步，得到元素 第二步，设置...

  • JS-WEB-API-Day5

    一次性定时器 案例：协议按钮禁用： 案例：div渐变： div变宽： 案例：移动元素 封装动画： 简单的轮播图 h...

  • 现金红包

    每日红包 轮播图 详情图 周末红包 轮播图 详情图 圣诞红包 轮播图 详情图

网友评论

      本文标题：14_JS轮播图案例

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|14_JS轮播图案例|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！