原生JS实现旋转轮播图+文字内容切换

废话不多说，直接上图看效果：

需求：点击左右按钮实现切换用户图片与信息；

原理：点击右侧左侧按钮，把3号的样式给2号，2号的给1号，1号的给5号，5号的给4号，4号的样式给3号，然后根据现在是第几张图片切换成对应的文字；

步骤：

1.让页面加载出所有盒子的样式；

2.把两侧按钮绑定事件(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

3.书写函数：操作函数：左按钮：删除第一个，添加到最后一个；右按钮：删除最后一个，添加到第一个；

4.定义变量，根据对应变量切换对应的文字内容；

代码事例如下：

HTML代码：

写法思路：

1.定义好5张图片，进行图片信息切换；

2.书写好你需要切换的文字内容，定义一个ID；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>学员信息轮播图</title>
    <link rel="stylesheet" href="css/css.css"/>
    <script src="js/jquery1.0.0.1.js"></script>
    <script src="js/js.js"></script>
</head>
<body>

    <div class="feedbackwrap" id="feedbackwrap">
       <div class="feedbackslide" id="feedbackslide">
           <ul>
               <!--五张图片-->
               <li><a href="#"><img src="images/1.png" alt=""/></a></li>
               <li><a href="#"><img src="images/2.png" alt=""/></a></li>
               <li><a href="#"><img src="images/3.png" alt=""/></a></li>
               <li><a href="#"><img src="images/4.png" alt=""/></a></li>
               <li><a href="#"><img src="images/5.png" alt=""/></a></li>
           </ul>
           <!--左右切换按钮-->
           <div class="feedbackarrow" id="feedbackarrow">
               <a href="javascript:;" class="feedbackprev"></a>
               <a href="javascript:;" class="feedbacknext"></a>
           </div>
       </div>
       <div class="feedbackname">
              <p class="p1">学员</p>
              <p class="p2" id="feedstudent">欧阳常斌3</p>
       </div>
    </div>


</body>
</html>

css代码：

写法思路：

1.定义好左右切换按钮的背景图片；

2.清除默认样式；

3.写好绝对定位，相对定位；

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.feedbackwrap{
    width:924px;
    margin:auto;
    margin-top: 300px;
}

.feedbackslide {
    height:144px;
    position: relative;
}

.feedbackslide li{
    position: absolute;
    left:30px;
    top:0;
}

.feedbackslide li img{
    width:100%;
    box-shadow:#d6d4d3 0px 0px 20px;
}

.feedbackarrow{
    opacity: 1;
}

.feedbackprev,.feedbacknext{
    width:27px;
    height:50px;
    position: absolute;
    top:50%;
    margin-top:-25px;
    background: url(../images/leftblue.png) no-repeat;
    z-index: 99;
}

.feedbacknext{
    right:0;
    background-image: url(../images/rightblue.png);
}

.feedbackname{
    width: 100%;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feedbackname .p1{
    font-size: 22px;
    color: #333;
    margin-bottom: 10px;
}

.feedbackname .p2{
    font-size: 18px;
    color: #666;
}

js代码：

写法思路：

1.定义一个数组，方便切换图片的样式，进行动画效果；

2.获取元素，定义名称，方便用取；

3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

4.在次为页面上的所有li赋值属性，利用缓动框架；

window.onload = function () {
    var arr = [
        {   //  1
            width:120,
            top:11,
            left:87,
            opacity:20,
            zIndex:2
        },
        {  // 2
            width:120,
            top:11,
            left:237,
            opacity:40,
            zIndex:3
        },
        {   // 3
            width:144,
            top:0,
            left:387,
            opacity:100,
            zIndex:4
        },
        {  // 4
            width:120,
            top:11,
            left:561,
            opacity:40,
            zIndex:3
        },
        {   //5
            width:120,
            top:11,
            left:711,
            opacity:20,
            zIndex:2
        }
    ];

    //0.获取元素
    var feedbackslide = document.getElementById("feedbackslide");
    var feedbackliArr = feedbackslide.getElementsByTagName("li");
    var feedbackarrow = feedbackslide.children[1];
    var arrowChildren = feedbackarrow.children;
    var arrowleft=5;
    //设置一个开闭原则变量，点击以后修改这个值。
    var flag = true;
    move();
    //3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转) 

    arrowChildren[0].onclick = function () {
        if(flag){
            flag = false;
            move(false);
        }
        
        arrowleft++;
        console.log("left+++",arrowleft)

        if(arrowleft==1){
            document.getElementById("feedstudent").innerText="小岳岳2";
        }else if(arrowleft==2){
            document.getElementById("feedstudent").innerText="张三峰1";
        }else if(arrowleft==3){
            document.getElementById("feedstudent").innerText="林动5";
        }else if(arrowleft==4){
            document.getElementById("feedstudent").innerText="令狐冲4";
        }else if(arrowleft==5){
            document.getElementById("feedstudent").innerText="欧阳常斌3";
            arrowleft=0;
        }else{
            document.getElementById("feedstudent").innerText="小岳岳2";
            arrowleft=1;
        }
        
    }

    arrowChildren[1].onclick = function () {
        if(flag){
            flag = false;
            move(true);
        }

        arrowleft--;
        console.log("right---",arrowleft)

        if(arrowleft==1){
            document.getElementById("feedstudent").innerText="小岳岳2";
        }else if(arrowleft==2){
            document.getElementById("feedstudent").innerText="张三峰1";
        }else if(arrowleft==3){
            document.getElementById("feedstudent").innerText="林动5";
        }else if(arrowleft==4){
            document.getElementById("feedstudent").innerText="令狐冲4";
        }else{
            document.getElementById("feedstudent").innerText="欧阳常斌3";
            arrowleft=5;
        }
        
    }

    //4.书写函数。
    function move(bool){
        //判断：如果等于undefined,那么就不执行这两个if语句
        if(bool === true || bool === false){
            if(bool){
                arr.unshift(arr.pop());
            }else{
                arr.push(arr.shift());
            }
        }
        //在次为页面上的所有li赋值属性，利用缓动框架
        for(var i=0;i<feedbackliArr.length;i++){
            animate(feedbackliArr[i],arr[i], function () {
                flag = true;
            });
        }
    }

}

动画效果js代码如下：

function show(ele){
    ele.style.display = "block";
}

/**
 * 获取元素样式兼容写法
 * @param ele
 * @param attr
 * @returns {*}
 */
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

//参数变为3个
//参数变为3个
function animate(ele,json,fn){
    //先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //开闭原则
        var bool = true;


        //遍历属性和值，分别单独处理json
        //attr == k(键)    target == json[k](值)
        for(var k in json){
            //四部
            var leader;
            //判断如果属性为opacity的时候特殊获取值
            if(k === "opacity"){
                leader = getStyle(ele,k)*100 || 1;
            }else{
                leader = parseInt(getStyle(ele,k)) || 0;
            }

            //1.获取步长
            var step = (json[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            //特殊情况特殊赋值
            if(k === "opacity"){
                ele.style[k] = leader/100;
                //兼容IE678
                ele.style.filter = "alpha(opacity="+leader+")";
                //如果是层级，一次行赋值成功，不需要缓动赋值
                //为什么？需求！
            }else if(k === "zIndex"){
                ele.style.zIndex = json[k];
            }else{
                ele.style[k] = leader + "px";
            }
            //4.清除定时器
            //判断: 目标值和当前值的差大于步长，就不能跳出循环
            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
            if(json[k] !== leader){
                bool = false;
            }
        }
        //只有所有的属性都到了指定位置，bool值才不会变成false；
        if(bool){
            clearInterval(ele.timer);
            //所有程序执行完毕了，现在可以执行回调函数了
            //只有传递了回调函数，才能执行
            if(fn){
                fn();
            }
        }
    },5);
}



//获取屏幕可视区域的宽高
function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

如果复制代码不方便，博主百度网盘分享链接：链接: https://pan.baidu.com/s/1CEez4PN5fh61PC-vud96_w 提取码: t6rh

总结：如果demo出现什么问题或者你书写过程中遇到什么麻烦，欢迎在博文下面留言，博主将一一解答，转载请注明出处，谢谢，请珍惜别人的劳动成果！！！

原生JS实现旋转轮播图+文字内容切换

猜你喜欢