左右轮播图-酷炫

最新推荐文章于 2023-03-29 10:18:24 发布

秋天1014童话

最新推荐文章于 2023-03-29 10:18:24 发布

阅读量641

点赞数

分类专栏： web前端 javaScript CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/54582354

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta keyword="左右轮播图-效果比较好">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css.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">
                <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-con current"></span>
            <span class="slider-ctrl-con"></span>
            <span class="slider-ctrl-con"></span>
            <span class="slider-ctrl-con"></span>
            <span class="slider-ctrl-con"></span>
            <span class="slider-ctrl-con"></span> -->
            <span class="slider-ctrl-next"></span>
        </div>
    </div>
    <script>    

    </script>
</body>
</html>

主要css代码：

.w-slider{
    width: 310px;
    height: 265px;
    background-color: pink;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.slider{
    width: 310px;
    height: 220px;
}
.slider-main{
    width: 620px; /* 两个图片的宽度 */
    height: 310px;
}
.slider-main img{
    vertical-align: top; /* 消除图片上下3px的间隙 */
}
.slider-main-img{
    position: absolute;
    top: 0;
    left: 0;
}
.slider-ctrl{
    text-align:center;
    padding-top: 8px;
}
.slider-ctrl-con{
    display: inline-block;
    width: 24px;
    height: 20px;
    background-color: blue;
    margin: 0 5px;
    background: url(../images/icon.png) no-repeat -24px -782px;
    cursor: pointer;
    text-indent: -20em; /* 为了将span的标号隐藏掉 */
    overflow: hidden;
}
.slider-ctrl .current{
    background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
    position: absolute;
    top: 50%;
    margin-top: -35px;
    display: inline-block;
    width: 30px;
    height: 35px;
    background: url(../images/icon.png) no-repeat 6px top;
    opacity: 0.8;
    cursor: pointer;
}
.slider-ctrl-prev{
    left: 0;
}
.slider-ctrl-next{
    right: 0;
    background-position: -6px -44px;
}

主要js代码（slider.js）：

window.onload = function(){
    function $(id){ return document.getElementById(id);}
    var js_slider = $("js_slider");
    var slider_main = $("slider_main"); //获取轮播图片的父盒子
    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;
        slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
    }
    var spans = slider_ctrl.children;
    spans[1].setAttribute("class","slider-ctrl-con current"); //设置第一个span增加current样式

    //布局图片，第一张在正确位置，其余的在右边
    var scrollWidth = js_slider.clientWidth; //获取大盒子的宽度，也就是后面动画走的距离
    for(var i=1; i<imgs.length; i++){ //第一张图片在正确位置
        imgs[i].style.left = scrollWidth + "px"; //其余图片在310px的位置
    }

    //遍历三个按钮--左、右和下面的span
    var iNow = 0; //设置当前显示的图片的索引号
    for(var k in spans){ //k是索引号
        spans[k].onclick = function(){
            if(this.className == "slider-ctrl-prev"){

                //当前图片右移（从0 -> 310px）
                animate(imgs[iNow],{left: scrollWidth});
                iNow = --iNow < 0 ? imgs.length-1 : iNow;
                imgs[iNow].style.left = -scrollWidth + "px";//快速执行，即将显示的一页立马走到左边，然后显示
                animate(imgs[iNow],{left:0}); //下一张图片右移，从-310px->0
                setSquare();
            }else if(this.className == "slider-ctrl-next"){

                //当前图片左移（从0 -> -310px）
                animate(imgs[iNow],{left: -scrollWidth});
                iNow = (++iNow) % imgs.length;
                imgs[iNow].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示
                animate(imgs[iNow],{left:0}); //下一张图片左移，从310px->0
                setSquare();
                //或者精简为函数
                /*autoPlay();*/
            }else{
                /*alert("点击了下面的span");*/
                var clickIndex = this.innerHTML - 1;
                if(clickIndex > iNow){
                    //做法等同于右侧按钮
                    animate(imgs[iNow],{left: -scrollWidth});
                    imgs[clickIndex].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示
                }else if(clickIndex < iNow){
                    //做法等同于左侧
                    animate(imgs[iNow],{left: scrollWidth});
                    imgs[clickIndex].style.left = -scrollWidth + "px";//快速执行，即将显示的一页立马走到左边，然后显示
                }
                iNow = clickIndex;
                animate(imgs[iNow],{left:0}); 
                setSquare();
            }
        }
    }
    //控制span小方块的样式 函数
    function setSquare(){
        //下面的span样式清空，将iNow设置为current，注意是下面的span，不包含左右控制按钮
        for(var i=1; i<spans.length-1; i++){
            spans[i].className = "slider-ctrl-con";
        }
        spans[iNow+1].className = "slider-ctrl-con current"; //注意iNow是索引号，要加1
    }

    //设置定时器 ，和右侧按钮功能一致
    var timer =null;
    timer = setInterval(autoPlay,2000);
    function autoPlay(){
        animate(imgs[iNow],{left: -scrollWidth});
        iNow = (++iNow) % imgs.length;
        imgs[iNow].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示
        animate(imgs[iNow],{left:0}); //下一张图片左移，从310px->0
        setSquare();
    }

    //清除定时器
    js_slider.onmouseover = function(){
        clearInterval(timer);
    }
    //开启定时器
    js_slider.onmouseout = function(){
        clearInterval(timer); //要执行定时器，先清除定时器
        timer = setInterval(autoPlay,2000);
    }
}

缓动动画js代码：（animate.js）

//返回当前样式
function getStyle(obj,attr){ //obj对象，attr属性名
    if(obj.currentStyle){ //ie等
        return obj.currentStyle[attr];
    }else{ //w3c
        return window.getComputedStyle(obj,null)[attr];
    }
}
 function animate(obj,json,fn) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                //开始遍历 json
                // 计算步长    用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = 0;
                if(attr == "opacity")
                {
                    current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用户没有定义opacity，则返回undefined
                    console.log(current);
                }
                else
                {
                    current = parseInt(getStyle(obj,attr)); // 数值，去除样式的 “px”
                }
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //判断透明度
                if(attr == "opacity")  // 判断用户有没有输入 opacity
                {
                     if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                     {
                         // obj.style.opacity，//支持opacity-----opacity:0.3
                         obj.style.opacity = (current + step) /100; 
                     }
                    else
                     {  // obj.style.filter = alpha(opacity = 30)
                         obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

                     }
                }
                else if(attr == "zIndex")
                {
                    obj.style.zIndex = json[attr];
                }
                else
                {
                    obj.style[attr] = current  + step + "px" ;
                }

                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
                if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
                {
                    fn(); // 函数名 +  （）  调用函数  执行函数 暂且这样替代
                }
            }
        },30)
    }

秋天1014童话

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
左右轮播图-酷炫

html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css">
复制链接

扫一扫