CSS3轮播图实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44285674/article/details/103437471
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词">
    <meta name="Description" content="描述">
    <title>CSS3轮播图</title>
    <style>
       
        #wrap{
            width:640px;
            margin:100px auto;
            position:relative;
            padding-top:320px;
            overflow: hidden;
        }
        #wrap>img{
            position:absolute;left:0px;top:0px;
            transition:all 1s;
        }
        img{
            display:block;

        }
        input{
            display:none;
        }
        label{
            border:3px solid #aaa;
            margin:20px 3px;
            float:left;
            width: 10px;

        }
        input:checked + label{
            border:8px solid #fff;
            opacity:1;
        }
        input ~ img{
            opacity:0;
            transform:scale(1.1);
        }
        input:checked + label + img{
            opacity:1;
            transform:translate(0px);
        }
        .before
        {
            width: 50px;
            height: 320px;
            position: absolute;
            top:0px;
            left:0px;
            z-index:2;
            background: rgb(126, 131, 120, 0.31);
            border: none;
            outline: none;

        }
        .after
        {
            width: 50px;
            height: 320px;
            position: absolute;
            top:0px;
            right:0px;
            z-index:2;
            background: rgb(126, 131, 120, 0.31);
            border:none;
            outline: none;
        }
        .before:active{
            boeder:none;
        }
    </style>
</head>
<body>
<div id="wrap">
    <input type="radio" name="checked" id="id1" checked >
    <label for="id1" id="d1" onclick="eventclick(this.id)">
      1
    </label>
    <img src="../img/272a6b3c8b48c4c454f598e9184a146.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id2">
    <label for="id2" id="d2" onclick="eventclick(this.id)">
      2
    </label>
    <img src="../img/d7dd5550a36a0ae4d3e09aa9a348cda.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id3">
    <label for="id3" id="d3" onclick="eventclick(this.id)">
      3
    </label>
    <img src="../img/272a6b3c8b48c4c454f598e9184a146.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id4" >
    <label for="id4" id="d4" onclick="eventclick(this.id)">
      4
    </label>
    <img src="../img/272a6b3c8b48c4c454f598e9184a146.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id5" >
    <label for="id5" id="d5" onclick="eventclick(this.id)">
      5
    </label>
    <img src="../img/272a6b3c8b48c4c454f598e9184a146.jpg" width="640" height="320">
    <button class="before" id="before" >
       <img src="../img/箭头2_左.png" />
    </button>
    <button class="after" id="after">
        <img src="../img/箭头.png" />
    </button>
</div>
</body>
<script>
    var wrap = new Array();
    var wp=document.getElementById("wrap");
    var before =document.getElementById("before");
    var after = document.getElementById("after");
   for(var i =1;i<=5;i++)
   {
       wrap[i]=document.getElementById("id"+i);
   }
    var j=1;
    function changeImg() {
        ba(j);
        if (j==wrap.length)
        {
            j=0;
        }
        else
        {
            wrap[j].click();
        }
        j++;


    }
    var run=setInterval(changeImg,2000);//每秒重置该函数
    wp.onmousemove=function () {
        clearInterval(run);
    }
    wp.onmouseout=function(){
        run=setInterval(changeImg,2000);
    }
    function ba(j) {
        var i,k;
        i=j;
        k=j;
        before.onclick=function () {
           if(i==wrap.length)
           {
               i=5;
           }
            else if(i==1)
           {
               i=6;
           }
           i--;
               wrap[i].click();
        }
        after.onclick=function () {
            if(k==wrap.length)
            {
                k=0;
            }

            ++k;
            wrap[k].click();

        }
         return j;
    }
    function eventclick(self) {
       var id =self;
        if (id=="d1")
        {
            j=1;
        }
        if (id=="d2")
        {
            j=2;
        }
       if (id=="d3")
       {
           j=3;
       }
        if (id=="d4")
        {
            j=4;
        }
        if (id=="d5")
        {
            j=5;
        }

    }
</script>
</html>