CSS

<style>
            *{
                margin: 0px;
                padding: 0px;
                text-decoration: none;
            }
            #out{
                width: 600px;
                height: 400px;
                border: 2px solid #ccc;
                margin: 0px auto;
                position: relative;
                top:100px;
                overflow: hidden;
                cursor: pointer;
            }
            #images{
                width: 4200px;
                height: 400px;
                position: absolute;
            }
            #images img{
                float: left;
            }
            #btn{
                width: 100px;
                height: 10px;
                position: absolute;
                left:250px;
                bottom: 20px;
            }
            #btn span{
                width: 10px;
                height: 10px;
                display: block;
                float: left;
                margin-left: 5px;
                border-radius: 50%;
                background-color: #ccc;
                cursor: pointer;
            }
            #btn .on{
                background-color: orangered;
            }
            .arrow{
                width: 40px;
                height: 40px;
                line-height: 40px;
                font-size: 36px;
                font-weight: bold;
                text-align: center;
                background:rgba(0,0,0,0.3);
                position: absolute;
                top:200px;
                color:#fff;
                display: none;
            }
            #prev{
                left:20px;
            }
            #next{
                right:20px
            }
            #out:hover .arrow{
                display: block;
            }
        </style>

HTML

<div id="out">
    <div id="images" style="left:-600px">
        <img src="imgs/5.jpg">
        <img src="imgs/1.jpg">
        <img src="imgs/2.jpg">
        <img src="imgs/3.jpg">
        <img src="imgs/4.jpg">
        <img src="imgs/5.jpg">
        <img src="imgs/1.jpg">
    </div>
    <div id="btn">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

Javascript

<script>
    /*
    * 先布局
    * 1、有哪些操作对象
    * 2、让图片动起来
    *    改变left值
    * 3、给左右两个按钮设定点击事件
      4、给每一个span按钮都设置点击事件
    * */
    var out=document.getElementById('out')
    var imgs=document.getElementById('images')
    var spans=document.getElementsByTagName('span')
    var prev=document.getElementById('prev')
    var next=document.getElementById('next')
    //设置原点按钮的下标
    var index=1
    //设置定时器
    var timer;
    //开关判断,当图片正在移动时,不能做其他操作
    var aa=false;
    //移动图片函数
    function animtate(offset){
        if(offset==0){
            return
        }
        aa=true
        //设置每一次移动的距离
        var speed=offset/30
        //获取每次所移动到的终点
        var left=parseInt(imgs.style.left)+offset
        //动起来
        var go= function () {
            if((speed>0 && parseInt(imgs.style.left)<left)|| (speed<0 && parseInt(imgs.style.left)>left)){
                imgs.style.left=parseInt(imgs.style.left)+speed+'px'
                setTimeout(go,10)
            }else{
                if(left>-600){
                    imgs.style.left=-600*5+'px'
                }
                if(left<(-600*5)){
                    imgs.style.left='-600px'
                }
                aa=false
            }
        }
        go()
    }
    
    //开始移动函数
    function play(){
        timer=setTimeout(function () {
            next.onclick()
            play()
        },3000)
    }
    //按钮操作函数
    function btnShow(){
        for(var i=0;i<spans.length;i++){
            if(spans[i].className=='on'){
                spans[i].className=''
            }
        }
        spans[index-1].className='on'
    }
    //下一张函数
    next.onclick= function () {
        if(aa){
            return
        }
        if(index==5){
            index=1
        }else{
            index++
        }
        animtate(-600)
        btnShow()
    }
    //上一张函数
    prev.onclick= function () {
        if(aa){
            return
        }
        if(index==1){
            index=5
        }else{
            index--
        }
        animtate(600)
        btnShow()
    }
    //停止函数
    function stop(){
        clearInterval(timer)
    }
    //给每一个按钮都添加一个点击事件
    for(var i=0;i<spans.length;i++){
        spans[i].onclick= function () {
            //获取index属性值
            var myIndex=this.getAttribute('index')
            //点击那个位置,图片就切换到那个位置
            imgs.style.left=-600*myIndex+'px'
            //重新把当前按钮的myIndex值赋值给全局的index变量
            index=myIndex
            btnShow()
        }
    }

    out.onmouseover=stop
    out.onmouseout=play
    play()
</script>
Last modification:October 11th, 2019 at 08:52 am
如果觉得我的文章对你有用,请随意赞赏