html自动变换图片,html5+css3实现图片自动切换

!DOCTYPE html

html lang=en

head

meta charset=UTF-8

script type=text/javascript src=jquery-3.2.1.js/script

title轮播特效/title

style

.box1{

width:200px;

height:300px;

border:1px dotted black;

background: #aaa;

overflow: hidden;

}

.item{

width: 198px;

height:200px;

border:1px solid red;

float:left;

background:#ff00cc;

}

.cont{

width:1000px;

position:relative;

}

/style

/head

body

div class=box1

div class=cont

div class=item index=00000/div

div class=item index=11111/div

div class=item index=22222/div

div class=item index=33333/div

div class=item index=44444/div

/div

/div

/body

script type=text/javascript

var index=0;

$(.box1).on(click,function(){

var curr=(index++)%5;

console.log(1111);

$(.cont).animate({left:-200px},1000,function(){

$(.cont).css(left,0);

$(.item[index=+ curr +]).appendTo($(.cont));

});

});

/script

/html

取消

评论