CSS transition属性实现滑动式轮播图

ybak 发布于2019-08-22 10:45 / 636人阅读

摘要：是的，趁着在玩轮播我用又写了个滑动式的轮播图，是仿的哔哩哔哩哔哩哔哩。点我转到思路这回我是用修改图片的属性，用的来实现动画过程。滑动式的轮播图图片是怎么动的呢中间为轮播图展示区。

是的，趁着在玩轮播我用transition又写了个滑动式的轮播图，是仿的哔哩哔哩哔哩哔哩。效果看下面咯。

点我转到CodePen

思路

这回我是用JS修改图片的left属性，用CSS的transition来实现动画过程。比如说一个图left: 200px; transition: left 0.3s linear;，然后我用JS把这个图的left改为0，这样图片就有个0.3s的左移动画啦。

滑动式的轮播图图片是怎么动的呢？

“中间”为轮播图展示区。假设有3张图，我们理下逻辑。

初始的时候，所有图片都位于“右边”。然后图1到“中间” → 图1到“左边” & 图2到“中间” → 图2到“左边” & 图3到“中间” → 图2图3到“右边” & 图1到“中间”。这样一个循环的过程。

我用修改类名的方式来修改图片的left值。没有类名的时候图片位于右侧，有active类时图片位于中间，有left类时位于左侧。

img{
  left: 260px;  /*图片均位于右侧*/
  transition: left 0.3s linear;  /*改变left值实现动画*/
}
img.active{
  left: 0;
}
img.left{
  left: -260px;
}

然后在JS里通过setInterval(code,millisec)来定时执行切换图片的函数。

代码

HTML


  
  
  
  
  
  
    
  
  
  刀剑乱舞-花丸-
  我太受欢迎了该怎么办
  少女编号

CSS

*{
  padding: 0; 
  margin: 0;
}
/*-- 轮播图整体样式-- */
#slideshow{
  width: 260px;
  height: 248px;
  margin: 20px auto;
  border-radius: 5px; 
  overflow: hidden;
  position: relative;
}
/*-- 图片样式 --*/
#slideshow img{
  position: absolute;
  top: 0;
  left: 260px;  /*图片均位于右侧*/
  transition: left 0.3s linear;  /*改变left值实现动画*/
}
#slideshow img.active{
  left: 0;
}
#slideshow img.left{
  left: -260px;
}
/*-- 页码样式 --*/
#slideshow div{
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 0;
  text-align: center;
  padding: 5px 0;
  background: rgba(0,0,0,0.7);
}
#slideshow span{
  display: inline-block;
  width: 15px;
  height: 10px;
  margin: 0 3px;
  border-radius: 5px;
  background: white;
  transition: width 0.3s;
}
#slideshow span.active{
  width: 25px;
  background: rgb(216,83,127);
}
/*-- 图片描述的样式 --*/
#slideshow p{
  position: absolute;
  bottom: 20px;
  width: 100%;
  line-height: 20px;
  font-size: 14px;
  text-indent: 5px;
  color: white;
  background: rgba(0,0,0,0.4);
  cursor: default;
  opacity: 0;
  transition: opacity 0.3s linear;
}
#slideshow p.active{
  opacity: 1;
}

//---------主角：轮播图函数-------------
function slideshow() {
  var slideshow=document.getElementById("slideshow"),
  imgs=slideshow.getElementsByTagName("img"), //图片们
  pages=slideshow.getElementsByTagName("span"), //页码们
  descrips=slideshow.getElementsByTagName("p"), //描述们
  length=imgs.length, //图片数目
  current=1; //current为当前活跃的图片、页码、描述的编号

  function changeSlide() { //切换图片的函数
    for (var i=0; i=length) {
      current=0;
    }
  }

  //每2s调用changeSlide函数进行图片轮播
  var slideon=setInterval(changeSlide,2000);  

  slideshow.onmouseover=function(){
    clearInterval(slideon); //当鼠标移入时清除轮播事件
  }
  slideshow.onmouseout=function(){
    slideon=setInterval(changeSlide,2000); //当鼠标移出时重新开始轮播事件
  }

  for(var i=0; i

完。

GPU云服务器云服务器 react实现轮播图轮播图写轮播图将轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91197.html

CSS transition属性实现滑动式轮播图

摘要：是的，趁着在玩轮播我用又写了个滑动式的轮播图，是仿的哔哩哔哩哔哩哔哩。点我转到思路这回我是用修改图片的属性，用的来实现动画过程。滑动式的轮播图图片是怎么动的呢中间为轮播图展示区。是的，趁着在玩轮播我用transition又写了个滑动式的轮播图，是仿的哔哩哔哩哔哩哔哩。效果看下面咯。点我转到CodePen 思路这回我是用JS修改图片的left属性，用CSS的transition来实...

godruoyi 2019-08-30 13:11 评论0 收藏0
移动端轮播图实现方法（dGun.js）

摘要：本文章介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。就是小的控制点了，但移动端没有点击小点的功能。本文章介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。最后会放上源...

hyuan 2019-08-29 17:01 评论0 收藏0
移动端轮播图实现方法（dGun.js）

摘要：本文章介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。就是小的控制点了，但移动端没有点击小点的功能。本文章介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。最后会放上源...

littleGrow 2019-08-02 11:45 评论0 收藏0
移动端轮播图实现方法（dGun.js）

摘要：本文章介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。就是小的控制点了，但移动端没有点击小点的功能。本文章介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。最后会放上源...

waruqi 2019-08-23 12:25 评论0 收藏0