用js和CSS写图片切换效果(轮播图)

轮播图 专栏收录该内容
1 篇文章 0 订阅

用js和CSS写图片切换效果(轮播图)、

** 学习前提**

  1. 了解CSS伪类元素,css3过度效果
  2. 对js拥有基础的了解。
  3. 清楚图片切换原理。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词">
    <meta name="Description" content="描述">
    <title>CSS3轮播图</title>
    <style>
        body{
            background:#ccc;
        }
        #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:2px 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="images/1.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="images/2.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="images/3.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="images/4.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="images/5.jpg" width="640" height="320">
    <button class="before" id="before" >
        前
    </button>
    <button class="after" id="after">
        后
    </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>

这个还有些问题,有人知道请告诉我!

评论 3 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

weixin_42975115

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值