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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了原生JS实现旋转轮播图+文字内容切换，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

需求：用户图片与信息；

原理：图片切换成对应的文字；

步骤：

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

调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

函数：函数：左按钮：删除第一个，添加到最后一个；删除最后一个，添加到第一个；

文字内容；

代码事例如下：

HTML代码：

图片，进行图片信息切换；

文字内容，定义一个ID；

Meta 学员信息轮播图 
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backwrap"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backwrap"</span><span style="color: #0000ff"&gt;></span>
   <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backslide"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backslide"</span><span style="color: #0000ff"&gt;></span>
       <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt;五张<a href="/tag/tupian/" target="_blank" class="keywords">图片</a></span><span style="color: #008000"&gt;--></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="#"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="images/1.png"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="#"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="images/2.png"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="#"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="images/3.png"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="#"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="images/4.png"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="#"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="images/5.png"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
       <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
       <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt;左右切换按钮</span><span style="color: #008000"&gt;--></span>
       <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backarrow"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backarrow"</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="javascript:;"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backprev"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="javascript:;"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backnext"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></span>
       <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
   <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
   <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backname"</span><span style="color: #0000ff"&gt;></span>
          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="p1"</span><span style="color: #0000ff"&gt;></span>学员<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="p2"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student"</span><span style="color: #0000ff"&gt;></span>欧阳常斌3<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
   <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

代码：

图片；

{:;:}{:;:;}{:}{:}{:;:;}{:;}{:;}.Feedbackwrap{<span style="color: #ff0000">
width:<span style="color: #0000ff">924px;<span style="color: #ff0000">
margin:<span style="color: #0000ff">auto;<span style="color: #ff0000">
margin-top:<span style="color: #0000ff"> 300px;
}<span style="color: #800000">

.Feedbackslide {<span style="color: #ff0000">
height:<span style="color: #0000ff">144px;<span style="color: #ff0000">
position:<span style="color: #0000ff"> relative;
}<span style="color: #800000">

.Feedbackslide li{<span style="color: #ff0000">
position:<span style="color: #0000ff"> absolute;<span style="color: #ff0000">
left:<span style="color: #0000ff">30px;<span style="color: #ff0000">
top:<span style="color: #0000ff">0;
}<span style="color: #800000">

.Feedbackslide li img{<span style="color: #ff0000">
width:<span style="color: #0000ff">100%;<span style="color: #ff0000">
Box-shadow:<span style="color: #0000ff">#d6d4d3 0px 0px 20px;
}<span style="color: #800000">

.Feedbackarrow{<span style="color: #ff0000">
opacity:<span style="color: #0000ff"> 1;
}<span style="color: #800000">

.Feedbackprev,.Feedbacknext{<span style="color: #ff0000">
width:<span style="color: #0000ff">27px;<span style="color: #ff0000">
height:<span style="color: #0000ff">50px;<span style="color: #ff0000">
position:<span style="color: #0000ff"> absolute;<span style="color: #ff0000">
top:<span style="color: #0000ff">50%;<span style="color: #ff0000">
margin-top:<span style="color: #0000ff">-25px;<span style="color: #ff0000">
background:<span style="color: #0000ff"> url(../images/leftblue.png) no-repeat;<span style="color: #ff0000">
z-index:<span style="color: #0000ff"> 99;
}<span style="color: #800000">

.Feedbacknext{<span style="color: #ff0000">
right:<span style="color: #0000ff">0;<span style="color: #ff0000">
background-image:<span style="color: #0000ff"> url(../images/rightblue.png);
}<span style="color: #800000">

.Feedbackname{<span style="color: #ff0000">
width:<span style="color: #0000ff"> 100%;<span style="color: #ff0000">
margin-top:<span style="color: #0000ff"> 26px;<span style="color: #ff0000">
display:<span style="color: #0000ff"> flex;<span style="color: #ff0000">
flex-direction:<span style="color: #0000ff"> column;<span style="color: #ff0000">
align-items:<span style="color: #0000ff"> center;<span style="color: #ff0000">
justify-content:<span style="color: #0000ff"> center;
}<span style="color: #800000">

.Feedbackname .p1{<span style="color: #ff0000">
font-size:<span style="color: #0000ff"> 22px;<span style="color: #ff0000">
color:<span style="color: #0000ff"> #333;<span style="color: #ff0000">
margin-bottom:<span style="color: #0000ff"> 10px;
}<span style="color: #800000">

.Feedbackname .p2{<span style="color: #ff0000">
font-size:<span style="color: #0000ff"> 18px;<span style="color: #ff0000">
color:<span style="color: #0000ff"> #666;
}

代码：

图片的样式，进行动画效果；

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

调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

页面上的所有li赋值属性，利用缓动框架；

<div class="cnblogs_code">

window.onload =  arr =
            width:1201187202
            width:120237403
            width:14403871004
            width:120561
            width:1207112</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;0.<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>元素</span>
<span style="color: #0000ff"&gt;var</span> <a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backslide = document.getElementById("<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backslide"<span style="color: #000000"&gt;);
</span><span style="color: #0000ff"&gt;var</span> <a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backliArr = <a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backslide.getElementsByTagName("li"<span style="color: #000000"&gt;);
</span><span style="color: #0000ff"&gt;var</span> <a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backarrow = <a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backslide.children[1<span style="color: #000000"&gt;];
</span><span style="color: #0000ff"&gt;var</span> arrowChildren =<span style="color: #000000"&gt; <a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backarrow.children;
</span><span style="color: #0000ff"&gt;var</span> arrowleft=5<span style="color: #000000"&gt;;
</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;设置一个开闭原则变量，点击以后<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>这个值。</span>
<span style="color: #0000ff"&gt;var</span> flag = <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;;
move();
</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;3.把两侧按钮绑定事件。(<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>同一个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，只有一个参数，true为正向旋转，false为反向旋转) </span>

<span style="color: #000000">
arrowChildren[0].onclick = <span style="color: #0000ff">function<span style="color: #000000"> () {
<span style="color: #0000ff">if<span style="color: #000000">(flag){
flag = <span style="color: #0000ff">false<span style="color: #000000">;
move(<span style="color: #0000ff">false<span style="color: #000000">);
}

    arrowleft</span>++<span style="color: #000000"&gt;;
    console.log(</span>"left+++"<span style="color: #000000"&gt;,arrowleft)

    </span><span style="color: #0000ff"&gt;if</span>(arrowleft==1<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="小岳岳2"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span> <span style="color: #0000ff"&gt;if</span>(arrowleft==2<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="张三峰1"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span> <span style="color: #0000ff"&gt;if</span>(arrowleft==3<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="林动5"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span> <span style="color: #0000ff"&gt;if</span>(arrowleft==4<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="令狐冲4"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span> <span style="color: #0000ff"&gt;if</span>(arrowleft==5<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="欧阳常斌3"<span style="color: #000000"&gt;;
        arrowleft</span>=0<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt;{
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="小岳岳2"<span style="color: #000000"&gt;;
        arrowleft</span>=1<span style="color: #000000"&gt;;
    }

}

arrowChildren[</span>1].onclick = <span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; () {
    </span><span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(flag){
        flag </span>= <span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;;
        move(</span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;);
    }

    arrowleft</span>--<span style="color: #000000"&gt;;
    console.log(</span>"right---"<span style="color: #000000"&gt;,arrowleft)

    </span><span style="color: #0000ff"&gt;if</span>(arrowleft==1<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="小岳岳2"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span> <span style="color: #0000ff"&gt;if</span>(arrowleft==2<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="张三峰1"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span> <span style="color: #0000ff"&gt;if</span>(arrowleft==3<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="林动5"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span> <span style="color: #0000ff"&gt;if</span>(arrowleft==4<span style="color: #000000"&gt;){
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="令狐冲4"<span style="color: #000000"&gt;;
    }</span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt;{
        document.getElementById(</span>"<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>student").innerText="欧阳常斌3"<span style="color: #000000"&gt;;
        arrowleft</span>=5<span style="color: #000000"&gt;;
    }

}

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;4.书写<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>。</span>
<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; move(bool){
    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;判断：如果等于undefined,那么就不执行这两个if语句</span>
    <span style="color: #0000ff"&gt;if</span>(bool === <span style="color: #0000ff"&gt;true</span> || bool === <span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;){
        </span><span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(bool){
            arr.unshift(arr.pop());
        }</span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt;{
            arr.push(arr.shift());
        }
    }
    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;在次为<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>上的所有li赋值<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>，利用缓动框架</span>
    <span style="color: #0000ff"&gt;for</span>(<span style="color: #0000ff"&gt;var</span> i=0;i<<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backliArr.length;i++<span style="color: #000000"&gt;){
        animate(<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>backliArr[i],arr[i],</span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; () {
            flag </span>= <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;;
        });
    }
}

}

效果js代码如下：

= "block"<span style="color: #008000">/<span style="color: #008000">

  • 获取元素样式兼容写法
  • @param ele
  • @param attr
  • @returns {}
    <span style="color: #008000">    /
    <span style="color: #0000ff">function<span style="color: #000000"> getStyle(ele,attr){
    <span style="color: #0000ff">if<span style="color: #000000">(window.getComputedStyle){
    <span style="color: #0000ff">return window.getComputedStyle(ele,<span style="color: #0000ff">null<span style="color: #000000">)[attr];
    }
    <span style="color: #0000ff">return<span style="color: #000000"> ele.currentStyle[attr];
    }

<span style="color: #008000">//<span style="color: #008000">参数变为3个<span style="color: #008000">
//<span style="color: #008000">参数变为3个
<span style="color: #0000ff">function<span style="color: #000000"> animate(ele,json,fn){
<span style="color: #008000">//<span style="color: #008000">先清定时器
<span style="color: #000000"> clearInterval(ele.timer);
ele.timer = setInterval(<span style="color: #0000ff">function<span style="color: #000000"> () {
<span style="color: #008000">//<span style="color: #008000">开闭原则
<span style="color: #0000ff">var bool = <span style="color: #0000ff">true<span style="color: #000000">;

    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;遍历<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>和值，分别单独处理json</span>
    <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;attr == k(键)    target == json[k](值)</span>
    <span style="color: #0000ff"&gt;for</span>(<span style="color: #0000ff"&gt;var</span> k <span style="color: #0000ff"&gt;in</span><span style="color: #000000"&gt; json){
        </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;四部</span>
        <span style="color: #0000ff"&gt;var</span><span style="color: #000000"&gt; leader;
        </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;判断如果<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>为opacity的时候特殊<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>值</span>
        <span style="color: #0000ff"&gt;if</span>(k === "opacity"<span style="color: #000000"&gt;){
            leader </span>= getStyle(ele,k)*100 || 1<span style="color: #000000"&gt;;
        }</span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt;{
            leader </span>= parseInt(getStyle(ele,k)) || 0<span style="color: #000000"&gt;;
        }

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

}

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

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

：无间隙自动轮播图：

Meta 图片轮播 Box Box ul Box-sizingBox li Box-sizingBox li>img Box" < < < < < < < <

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">><span style="background-color: #f5f5f5; color: #000000">
window.onload <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000">() {
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> Box <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.querySelector(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">#Box<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> ul <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.querySelector(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">#Box ul<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> sW <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> ul.scrollWidth;
ul.innerHTML <span style="background-color: #f5f5f5; color: #000000">+=<span style="background-color: #f5f5f5; color: #000000"> ul.innerHTML;
ul.style.width <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> ul.scrollWidth;

 </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; v </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
 setInterval(() </span><span style="background-color: #f5f5f5; color: #000000"&gt;=></span><span style="background-color: #f5f5f5; color: #000000"&gt; {
     v</span><span style="background-color: #f5f5f5; color: #000000"&gt;++</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
     </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt; (v </span><span style="background-color: #f5f5f5; color: #000000"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt; sW) {
         v </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
     }
     ul.style.transform </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;translateX(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span> <span style="background-color: #f5f5f5; color: #000000"&gt;+</span> <span style="background-color: #f5f5f5; color: #000000"&gt;-</span><span style="background-color: #f5f5f5; color: #000000"&gt;v </span><span style="background-color: #f5f5f5; color: #000000"&gt;+</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;px)</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
 },</span><span style="background-color: #f5f5f5; color: #000000"&gt;20</span><span style="background-color: #f5f5f5; color: #000000"&gt;);

}

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> isFirefox <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">/<span style="background-color: #f5f5f5; color: #000000">Firefox<span style="background-color: #f5f5f5; color: #000000">/<span style="background-color: #f5f5f5; color: #000000">i.test(navigator.userAgent) <span style="background-color: #f5f5f5; color: #000000">? <span style="background-color: #f5f5f5; color: #0000ff">true<span style="background-color: #f5f5f5; color: #000000"> : <span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> unMouseBtn <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000">(e) {
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> e <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> e <span style="background-color: #f5f5f5; color: #000000">||<span style="background-color: #f5f5f5; color: #000000"> window.event;
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (e.wheelDelta <span style="background-color: #f5f5f5; color: #000000">&&<span style="background-color: #f5f5f5; color: #000000"> e.ctrlKey) { <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">IE/Opera/Chrome e.wheelDelta±120
<span style="background-color: #f5f5f5; color: #000000"> e.preventDefault <span style="background-color: #f5f5f5; color: #000000">?<span style="background-color: #f5f5f5; color: #000000"> e.preventDefault() : e.returnValue <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">;
} <span style="background-color: #f5f5f5; color: #0000ff">else <span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (e.detail <span style="background-color: #f5f5f5; color: #000000">&&<span style="background-color: #f5f5f5; color: #000000"> e.ctrlKey) { <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">Firefox e.detail±3
<span style="background-color: #f5f5f5; color: #000000"> e.preventDefault <span style="background-color: #f5f5f5; color: #000000">?<span style="background-color: #f5f5f5; color: #000000"> e.preventDefault() : e.returnValue <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">;
}
};
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> mousewheelevt <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> isFirefox <span style="background-color: #f5f5f5; color: #000000">? <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">DOMMouseScroll<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000"> : <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">mousewheel<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (document.attachEvent) { <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">IE/Opera/Chrome
<span style="background-color: #f5f5f5; color: #000000"> document.attachEvent(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">on<span style="background-color: #f5f5f5; color: #000000">" <span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000"> mousewheelevt,unMouseBtn);
} <span style="background-color: #f5f5f5; color: #0000ff">else <span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (document.addEventListener) { <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">Firefox
<span style="background-color: #f5f5f5; color: #000000"> document.addEventListener(mousewheelevt,unMouseBtn,<span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">);
}
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> unCtrl <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000">(e) {
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> e <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> e <span style="background-color: #f5f5f5; color: #000000">||<span style="background-color: #f5f5f5; color: #000000"> window.event;
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> isFirefox <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #000000">/<span style="background-color: #f5f5f5; color: #000000">Firefox<span style="background-color: #f5f5f5; color: #000000">/<span style="background-color: #f5f5f5; color: #000000">i.test(navigator.userAgent)) <span style="background-color: #f5f5f5; color: #000000">? <span style="background-color: #f5f5f5; color: #0000ff">true<span style="background-color: #f5f5f5; color: #000000"> : <span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">; <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">Firefox
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> code <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> isFirefox <span style="background-color: #f5f5f5; color: #000000">? <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">109,107,173,61<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000"> : <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">109,189,187<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">; <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> + -
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (e.ctrlKey <span style="background-color: #f5f5f5; color: #000000">&&<span style="background-color: #f5f5f5; color: #000000"> code.indexOf(e.keyCode) <span style="background-color: #f5f5f5; color: #000000">!= <span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">) {
e.preventDefault <span style="background-color: #f5f5f5; color: #000000">?<span style="background-color: #f5f5f5; color: #000000"> e.preventDefault() : e.returnValue <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">;
}
};
document.onkeydown <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> unCtrl;
<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

总结：

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作