点击轮播图片

来源:4-1 焦点轮播图效果

water28

2017-12-03 17:26

怎么给它加加个左右按钮,可以点击切换的,求告知

写回答 关注

1回答

  • LANXUE1997
    2018-01-06 22:23:17

    <!--

                     &lt:HTML字符转义,代表"<"

                     &gt:HTML字符转义,代表">"

    -->

    <a href="javascript:;" id="prev" class="arrow">&lt;</a>

    <a href="javascript:;" id="next" class="arrow">&gt;</a>


    css部分:

    .arrow{

    width: 30px;

    height: 30px;

    background-color: rgba(0,0,0,0.3);

    cursor: pointer;

    /*opacity: 0.6;*/

    color: #FFFFFF;

    text-align: center;

    line-height: 30px;

    font-size: 16px;

    }

    #prev{

    position: absolute;

    top: 40%;

    left:5px;

    }

    #next{

    position: absolute;

    top: 40%;

    right:5px;

    }

    js部分:

    var prev=document.getElementById("prev");

    var next=document.getElementById("next");

    prev.onclick=function(){

    index--;

    if(index<0){

    index=4;

    }

            change(index);

            if(timer){

            clearInterval(timer);

            timer=null;

            }

            timer=setInterval(autoPlay,2000);

    }

    next.onclick=function(){

    index++;

    if(index>4){

    index=0;

    }

    change(index);

    if(timer){

            clearInterval(timer);

            timer=null;

            }

            timer=setInterval(autoPlay,2000);

    }


Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65469 学习 · 533 问题

查看课程

相似问题