php图片滑动的属性,CSS transition属性实现滑动式轮播图

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

思路

这回我是用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

if(i==current) {

imgs[i].className="active";

pages[i].className="active";

descrips[i].className="active";

} else {

pages[i].className="";

descrips[i].className="";

if(i

imgs[i].className="left";

} else {

imgs[i].className="";

}

}

}

current++; //自增1

if(current>=length) {

current=0;

}

}

//每2s调用changeSlide函数进行图片轮播

var slideon=setInterval(changeSlide,2000);

slideshow.οnmοuseοver=function(){

clearInterval(slideon); //当鼠标移入时清除轮播事件

}

slideshow.οnmοuseοut=function(){

slideon=setInterval(changeSlide,2000); //当鼠标移出时重新开始轮播事件

}

for(var i=0; i

pages[i].οnmοuseοver=function(){

current=this.getAttribute("name"); //得到当前鼠标指的页码

changeSlide();

}

}

}

slideshow();

完。