纯javascript仿网易左右轮播图效果

最新推荐文章于 2024-06-27 19:41:31 发布
lucky芬
最新推荐文章于 2024-06-27 19:41:31 发布
阅读量1.3k
点赞数 1
分类专栏：练手小案例
练手小案例专栏收录该内容
42 篇文章 2 订阅
订阅专栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="baidu_union_verify" content="a5f5b8cbab1850a4c826ec91204618e8">
<base target="_blank">
<title>纯javascript仿网易左右轮播图效果 </title>
<meta name="description" content="前端菜鸟（www.bird100.cn）是为前端初学者提供div+css、html5+css3、JavaScript、jquery、前端web开发、移动端html5开发集一体的前端知识以及前端资讯网站！学习前端，从这里开始！" />
<meta name="keywords" content="div+css，html5+css3，JavaScript，jquery，前端web开发，移动端html5开发，前端菜鸟" />
<link rel="shortcut icon" href="http://www.bird100.cn/wp-content/themes/begin/img/favicon.ico">
<link rel="apple-touch-icon" sizes="114x114" href="http://www.bird100.cn/wp-content/themes/begin/img/favicon.png" />
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://www.bird100.cn/xmlrpc.php">
    <style>
        html,body,div,ul,ol,li{ margin: 0; padding: 0; background-color: #323232;}
        .js-silder{
            width: 310px;
            margin: 100px auto;
            position: relative;
        }
        .silder-scroll{
            width: 310px;
            height: 220px;
            overflow: hidden;
        }
        .silder-main{
            width: 620px;
            height: 220px;
            background-color: #f60;
            position: relative;
        }
        .silder-main-img{
            position: absolute;
            top: 0;
            left: 0;
        }
        .js-silder-ctrl{
            margin-top: 10px;
            text-align: center;
        }
        .silder-ctrl-prev,
        .silder-ctrl-next{
            position: absolute;
            top: 50%;
            margin-top: -45px;
            width: 30px;
            height: 45px;
            cursor: pointer;
            background: url(images/icon_v9.png) no-repeat 5px 5px;
        }
        .silder-ctrl-prev{
            left: 0;
        }
        .silder-ctrl-next{
            right: 0;
            background-position: -5px -40px;
        }
        .silder-ctrl-con{
            display: inline-block;
            width: 24px;
            height: 20px;
            margin: 0 5px;
            cursor: pointer;
            text-indent: -100px;
            overflow: hidden;
            background: url(images/icon_v9.png) no-repeat -24px -782px ;
        }
        .current{
            background: url(images/icon_v9.png) no-repeat -24px -763px ;
        }
    </style>
    <script>

        window.onload = function (){
            var js_silder = $("div.js-silder"),
                silder_main = $("div.silder-main"),
                silder_main_imgs = silder_main.children,
                imgs_len = silder_main_imgs.length,
                imgs_width = silder_main_imgs[0].offsetWidth,
                js_silder_ctrl = js_silder.children[1];
            //生成小的点击按钮
            for(var i = 0;i < imgs_len;i ++){
                silder_main_imgs[i].index = i;

                //将除第一张之外的全部图片都移到右边
                if(i != 0){
                    silder_main_imgs[i].style.left = imgs_width + "px";
                }

                var span = document.createElement("span");
                span.className = "silder-ctrl-con";
                if(i == 0){
                    span.className = "silder-ctrl-con current";
                }
                span.innerHTML = i+1;

                //将生成的span插入到最后一个元素的前面
                js_silder_ctrl.insertBefore(span, js_silder_ctrl.children[js_silder_ctrl.children.length - 1]);
            }

            //获取所有的点击按钮
            var silder_ctrl_spans = js_silder_ctrl.children,
                iNow = 0;//控制图片播放
            for (var j = 0,len = silder_ctrl_spans.length; j < len; j++) {

                silder_ctrl_spans[j].onclick = function (){
                    var classname = this.className,
                        thatNum = this.innerHTML - 1;
                    if(classname == "silder-ctrl-prev"){//左边按钮，即上一张按钮
                         //当前这张图片往右边边出去
                        animate(silder_main_imgs[iNow], {"left": imgs_width});

                        iNow--;
                        if(iNow < 0){
                            iNow = imgs_len - 1;
                        }
                        /*上一张图片进来之前先将它移到最左边，这样就能保证无限循环，如果不这样设置，那么第一次到头后就不会有从左边出来的效果了。
                        */
                        silder_main_imgs[iNow].style.left = -imgs_width + "px";
                        //上一张图片进来
                        animate(silder_main_imgs[iNow], {"left": 0});
                    }else if(classname == "silder-ctrl-next"){//右边按钮，即下一张按钮
                        play();
                    }else{
                        /*如果点击的这个数字按钮的数值大于当前图片的索引，那么图片应该从右边出来*/
                        if(thatNum > iNow){
                            animate(silder_main_imgs[iNow], {"left": -imgs_width});
                            silder_main_imgs[thatNum].style.left = imgs_width + "px";
                            animate(silder_main_imgs[thatNum], {"left": 0});
                        }else if(thatNum < iNow){
                            animate(silder_main_imgs[iNow], {"left": imgs_width});
                            silder_main_imgs[thatNum].style.left = -imgs_width + "px";
                            animate(silder_main_imgs[thatNum], {"left": 0});
                        }
                        /*必须要把iNow 设置为 thatNum，因为下一次轮播是从当前的这张图片开始的*/
                        iNow = thatNum;
                    }

                    setCtrlBtnStyle(iNow+1);
                }

            }

            //设置当前点击按钮的样式，不包括左、右按钮
            function setCtrlBtnStyle(num){
                for(var k = 1,len = silder_ctrl_spans.length;k <= len - 2;k ++){
                    silder_ctrl_spans[k].className = "silder-ctrl-con";
                }

                 silder_ctrl_spans[num].className = "silder-ctrl-con current";
            }

            //自动播放
            var timer = null;
            timer = setInterval(function (){
                play();
                setCtrlBtnStyle(iNow+1);
            }, 2000);

            //当鼠标放在图片上的时候停止自动播放
            js_silder.onmouseover = function (){
                clearInterval(timer);
            }
            //当鼠标离开图片的时候自动播放
            js_silder.onmouseleave = function (){
                clearInterval(timer);
                 timer = setInterval(function (){
                    play();
                    setCtrlBtnStyle(iNow+1);
                }, 2000);
            }

            function play(){
                //当前这张图片往左边出去
                animate(silder_main_imgs[iNow], {"left": -imgs_width});

                iNow++;
                if(iNow > imgs_len - 1){
                    iNow = 0;
                }
                /*下一张图片进来之前先将它移到最右边，这样就能保证无限循环，如果不这样设置，那么第一次到尾后就不会有从右边出来的效果了。
                */
                silder_main_imgs[iNow].style.left = imgs_width + "px";
                //下一张图片进来
                animate(silder_main_imgs[iNow], {"left": 0});
            }
        }


        /*动画函数*/
        function animate(ele,attrsJson,fn){
            clearInterval(ele.timer);

            ele.timer = setInterval(function (){
                var flag = true;
                for(var attr in attrsJson){
                    var curStyle = parseInt(getStyle(ele,attr)),
                        step = (parseInt(attrsJson[attr]) - curStyle) / 10;

                    step = step > 0 ? Math.ceil(step) : Math.floor(step);

                    if(curStyle != attrsJson[attr]){
                        flag = false;
                    }

                    if(attr == "zIndex"){
                        ele.style.zIndex = attrsJson[attr];
                    }else{
                        ele.style[attr] = curStyle + step + "px";
                    }

                }
                if(flag){
                    clearInterval(ele.timer);
                    if(fn){
                        fn.call(window);
                    }
                }
            }, 20);
        }
        /*获取元素*/
        function $(selector){
            var classSelectSign = selector.indexOf("."),
                idSelectSign = selector.indexOf("#");

            //id选择器
            if(idSelectSign > -1){
                return document.getElementById(selector.substr(1));
            }

            //class选择器
            if(classSelectSign > -1){
                var classSelect = selector.substr(classSelectSign+1);

                //支持通过class获取元素的浏览器
                if(document.getElementsByClassName){
                    var eles = document.getElementsByClassName(classSelect);
                    if(eles.length == 1){
                        return eles[0];
                    }else{
                        return eles;
                    }
                }else{
                    var baseEleName = classSelectSign > 0 ? selector.substr(0,classSelectSign) : "*",
                        eles = document.getElementsByTagName(baseEleName),
                        elesResult = [];

                    for(var i = 0,len = eles.length; i < len; i ++){
                        if(hasClass(eles[i],classSelect)){
                            elesResult.push(eles[i]);
                        }
                    }
                    if(elesResult.length == 1){
                        return elesResult[0];
                    }else{
                        return elesResult;
                    }
                }
            }

            //标签选择器
            return document.getElementsByTagName(selector);
        }

        /*判断元素是否有某个class*/
        function hasClass(ele,classnameparam){
            var classname = ele.className
                classArr = classname.split(" ");
            for(var i in classArr){
                if(classArr[i] == classnameparam){
                    return true;
                }
            }
            return false;
        }

        /*获取样式*/
        function getStyle(ele,attr){
            if(ele.currentStyle){
                return ele.currentStyle[attr];
            }else{
                return ele.ownerDocument.defaultView.getComputedStyle(ele,null)[attr];
            }
        }
    </script>
</head>
<body>
    <div class="js-silder">
        <div class="silder-scroll">
            <div class="silder-main">
                <div class="silder-main-img">
                    <img src="images/1.png" alt="">
                </div>
                <div class="silder-main-img">
                    <img src="images/2.png" alt="">
                </div>
                <div class="silder-main-img">
                    <img src="images/3.png" alt="">
                </div>
                <div class="silder-main-img">
                    <img src="images/4.png" alt="">
                </div>
                <div class="silder-main-img">
                    <img src="images/5.png" alt="">
                </div>
            </div>
        </div>
        <div class="js-silder-ctrl">
            <span class="silder-ctrl-prev"></span>
            <span class="silder-ctrl-next"></span>
        </div>
    </div>
</body>
</html>
lucky芬
关注
1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯javascript仿网易左右轮播图效果

纯javascript仿网易左右轮播图效果 html,body,div,ul,ol,li{ margin: 0; padding: 0; background-color: #323232;} .js-silder{ width: 310px; margin: 100px auto;
复制链接

扫一扫
专栏目录