Question

我正在尝试使用css从左到右translate我的图像。但它不能正常工作。我试试这个css

ul{
  padding:0px;
  margin:0px;
}

.imageSlider {
  width :325px;
  overflow:hidden;
  transition: width 2s;
   position:relative;
}
.imageSlider ul {
  width:3250px;

}

.imageSlider ul li{
  display:inline-block;
  width :325px;
  transition: all 1s ease;
   transition: width 2s;
}

.imageSlider ul li img{
    transition: all 1s ease;
   transition: width 2s;
}

.imageSlider ul li span{
  position:absolute;
  left:0;
  color:#fff;
  bottom:5px

}

我想这样做 http://mumbaimirror.indiatimes.com/，其中图片在从一个图像更改为另一个图像时移动right to left动画

这是我的代码 https://jsbin.com/lexicazefu/edit?html,css,js,output

$(function(){
  var counter =0;
  var length =$('.imageSlider ul li').length;
   setInterval(function(){
     if(counter >= length){
       counter =0
     }
     $('.imageSlider ul li').hide();
     console.log(counter)
     $('.imageSlider ul').children('li').eq(counter).show();
          counter ++;

   },5000);
})

我不想使用jquery。我们可以使用css为图像添加动画

Answer 1

您可以尝试 CSS动画，并在@keyframes中分配它们。类似的东西：

@keyframes slide {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

根据您的图片，您可以指定.imageSlider的宽度。并使用display: flex将它们彼此相邻对齐。

查看下面的工作代码段：

＆＃13;

.imageSlider {
  overflow: hidden;
  width: 320px;
}

.imageSlider ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  left: 0;
  text-align: left;
  position: relative;
  animation: 30s slide infinite;
}

.imageSlider ul li {
  float: left;
}

.imageSlider ul li a {
  display: block;
}

.imageSlider ul li img {
  margin: 0 auto;
}

@keyframes slide {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

＆＃13;

  <div>
   <div class="imageSlider">
      <ul>
         <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59691652,width-320,height-385,resizemode-4.cms"></a>
        </li>
        <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59691954,width-320,height-385,resizemode-4.cms"></a>
        </li>
        <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59692159,width-320,height-385,resizemode-4.cms"></a>
        </li>
        <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59691142,width-320,height-385,resizemode-4.cms"></a>
        </li>
      </ul>
   </div>
</div>

＆＃13;

希望这有帮助！

Answer 2

您可以使用Animate.css插件尝试一些非常棒的动画效果。

Animate.css

如何使用CSS动画图像？

2 个答案: