音乐播放器-图片切换-轮播图效果

朴灿烈づ我的快乐病毒、 2021-09-19 10:16 300阅读 0赞

* {
     margin: 0;
     padding: 0;
      border: 0;
      }

`CSS3 @keyframes` 动画效果

@keyframs  myframes{
    
    from{   }
    
    to{  transform:translate(300px);  }
    
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]  
\-moz-animation  
\-webkit-animation  
\-o-animation  
\-ms-animation

@keyframes完成图片切换

css动画属性–轮播图效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]

@keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }
    
    @-moz-keyframes mymove /* Firefox */
    {
    from {top:0px;}
    to {top:200px;}
    }
    
    @-webkit-keyframes mymove /* Safari 和 Chrome */
    {
    from {top:0px;}
    to {top:200px;}
    }
    
    @-o-keyframes mymove /* Opera */
    {
    from {top:0px;}
    to {top:200px;}
    }

@keyframes img {
    0% {
     transform: rotate(0deg);
     }
     100% {
      transform: rotate(360deg);
      }
      }

div
    {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); 	/* Opera */
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]

.img {
     background: url(4.jpg) no-repeat;
     width: 200px;
     height: 200px;
     background-size: 100%;
     border: 1px solid #d1d1d1;
     border-radius: 50%;
     animation: img 3s infinite linear paused;
     }
     .img .runging{
     animation-paly-state: running;
     }
     li {
     height: 50px;
     line-height: 50px;
     text-indent: 10px;
     }
     li+li{
     border-top: 1px solid red;
    }
    .volume {
     dispaly: inline-block;
     width: 40px;
     height: 40px;
     border: 1px solid #d1d1d1;
     text-align: center;
     line-height:40px;
     }
     <script src="http://code.jquery.com/jquery-1.8.0.min.js";></script>

$(".volume").on("click",function(){
                      //取出自定义属性上的 值，用来区分 加 减
                      var volume = audio.volume + $(this).data("volume");
                      if(volume>1){
                            volume=1;//声音最大为 1
                      }
                      if(volume<0){
                            volume=0;//最小为 0 0 为静音
                      }
                      audio.volume=volume;
                  })
                 
                  $("li").on("click",function(){
                      var src=$(this).data("src");
                      //设置音频的播放时间
                      audio.currentTime=0;
                      audio.src=src;
                      
                      audio.play();//播放
                      // audio.pause(); //暂停
                 });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/8cd920e2ef2a48d69446f8bf43b6372d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]: /images/20210724/afd733c6b22f453787ede01ccfcbfdc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]: /images/20210724/31dd24a769d14e9f8b9c012d033b582c.png