怎么用html5+css3 实现图片轮播?
怎么用html5+css3 实现图片轮播
函数式编程浏览 24297回答 1
1回答
-
牛魔王的故事
<!DOCTYPE html><html><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="0">0000</div><div class="item" index="1">1111</div><div class="item" index="2">2222</div><div class="item" index="3">3333</div><div class="item" index="4">4444</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>
随时随地看视频慕课网APP
CSS3
Html5