摘要:是的,趁着在玩轮播我用又写了个滑动式的轮播图,是仿的哔哩哔哩哔哩哔哩。点我转到思路这回我是用修改图片的属性,用的来实现动画过程。滑动式的轮播图图片是怎么动的呢中间为轮播图展示区。
是的,趁着在玩轮播我用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; }
JS
//---------主角:轮播图函数------------- 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 完。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115373.html
摘要:是的,趁着在玩轮播我用又写了个滑动式的轮播图,是仿的哔哩哔哩哔哩哔哩。点我转到思路这回我是用修改图片的属性,用的来实现动画过程。滑动式的轮播图图片是怎么动的呢中间为轮播图展示区。 是的,趁着在玩轮播我用transition又写了个滑动式的轮播图,是仿的哔哩哔哩哔哩哔哩。效果看下面咯。 点我转到CodePen 思路 这回我是用JS修改图片的left属性,用CSS的transition来实...
摘要:本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度。支持手势左右滑动。就是小的控制点了,但移动端没有点击小点的功能。 本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度。支持手势左右滑动。最后会放上源...
摘要:本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度。支持手势左右滑动。就是小的控制点了,但移动端没有点击小点的功能。 本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度。支持手势左右滑动。最后会放上源...
摘要:本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度。支持手势左右滑动。就是小的控制点了,但移动端没有点击小点的功能。 本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度。支持手势左右滑动。最后会放上源...
阅读 3416·2023-04-26 01:45
阅读 2185·2021-11-23 09:51
阅读 3587·2021-10-18 13:29
阅读 3361·2021-09-07 10:12
阅读 666·2021-08-27 16:24
阅读 1725·2019-08-30 15:44
阅读 2150·2019-08-30 15:43
阅读 2901·2019-08-30 13:11