怎么用html5+css3 实现图片轮播 怎么用DIV+CSS做5个图片滚动带链接的效果。
\u6c42CSS\u56fe\u7247\u8f6e\u64ad\u5b8c\u6574\u4ee3\u7801\uff1f\u4ee54\u5f20\u56fe\u7247\u4e3a\u4f8b\uff1a
1.\u57fa\u672c\u5e03\u5c40\uff1a
\u5c064\u5f20\u56fe\u7247\u5de6\u6d6e\u52a8\u6a2a\u5411\u5e76\u6392\u653e\u5165\u4e00\u4e2adiv\u5bb9\u5668\u5185\uff0c\u56fe\u7247\u8bbe\u7f6e\u7edf\u4e00\u5c3a\u5bf8\uff0cdiv\u5bbd\u5ea6\u8bbe\u7f6e4\u4e2a\u56fe\u7247\u7684\u603b\u5c3a\u5bf8\uff0c\u7136\u540e\u653e\u5165\u76f8\u6846\u5bb9\u5668div\uff0c
\u76f8\u6846\u8bbe\u7f6e1\u4e2a\u56fe\u7247\u7684\u5927\u5c0f\u5e76\u8bbe\u7f6e\u6ea2\u51fa\u9690\u85cf\uff0c\u4ee5\u4fdd\u8bc1\u6b63\u786e\u663e\u793a\u4e00\u4e2a\u7167\u7247\u3002
2.\u8bbe\u7f6e\u52a8\u753b\uff1a
\u7136\u540e\u4f7f\u7528css3\u52a8\u753b\uff0c\u901a\u8fc7\u5bf9photos\u8fdb\u884c\u4f4d\u79fb\uff0c\u4ece\u800c\u8fbe\u5230\u663e\u793a\u4e0d\u540c\u7684\u56fe\u7247\uff0c\u6bcf\u6b21\u504f\u79fb\u4e00\u4e2a\u56fe\u7247\u7684\u5bbd\u5ea6\uff0c\u5373\u53ef\u663e\u793a\u4e0b\u4e00\u5f20\u56fe\u7247\u3002
4\u5f20\u56fe\u7247\uff0c\u9700\u8981\u5207\u63623\u6b21.
\u6839\u636e\u9700\u8981\u53ef\u4ee5\u5bf9\u5404\u4e2a\u56fe\u7247\u6dfb\u52a0\u76f8\u5e94\u7684\u5e8f\u53f7\u548c\u56fe\u7247\u7b80\u4ecb\u3002
3.\u4ee3\u7801\u5982\u4e0b\uff1a
\u590d\u5236\u4ee3\u7801
1
2 #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
3 #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
4 #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
5 #photos img{float:left;width:300px;height:200px}
6 #photos { position: absolute;z-index:9; width: calc(300px * 4);/*---\u4fee\u6539\u56fe\u7247\u6570\u91cf\u7684\u8bdd\u9700\u8981\u4fee\u6539\u4e0b\u9762\u7684\u52a8\u753b\u53c2\u6570*/ }
7 .play{ animation: ma 20s ease-out infinite alternate;}
8 @keyframes ma {
9 0%,25% { margin-left: 0px; }
10 30%,50% { margin-left: -300px; }
11 55%,75% { margin-left: -600px; }
12 80%,100% { margin-left: -900px; }
13
14 }
15
\u590d\u5236\u4ee3\u7801
\u590d\u5236\u4ee3\u7801
www.scxhdzs.com#www.scxhdzs.com#111
22222222222222
33333333333333
44444444444444
\u62ff\u8d70\u4e0d\u8c22\uff01
css\u548cdiv\u505a\u6eda\u52a8\u6548\u679c\u7684\u6211\u6ca1\u5b9e\u73b0\u8fc7\uff0c\u90fd\u7528\u7684js\u5b9e\u73b0\u7684\uff1b
\u6548\u679c\u5982\u4e0b\u56fe
\u5b8c\u6574\u4ee3\u7801\u4ee5\u53ca\u5f15\u7528\u7684\u63d2\u4ef6\u76f4\u63a5\u538b\u7f29\u5305\u4e86\uff0c\u67e5\u770b\u8bf7\u4e0b\u8f7d\u9644\u4ef6\u3002
\u70b9\u51fb\u5de6\u8d70\u6216\u53f3\u8d70#body .middle{width:1024px; height:180px; margin:5px auto; overflow:hidden; position:relative}#body .middle .bt .l{position:absolute; left:10px; top:70px; background:#000; z-index:20; width:30px; height:30px; font-size:20px; opacity:0.7; border-radius:15px; cursor:pointer; color:#fff; text-align:center;line-height:30px;}#body .middle .bt .r{position:absolute; right:10px; top:70px; background:#000; z-index:20;width:30px; height:30px; font-size:20px; opacity:0.7; border-radius:15px; cursor:pointer; color:#fff; text-align:center; line-height:30px;}#body .middle .gd ul{position:absolute; width:1022px; margin-top:5px;}#body .middle .gd li{float:left; width:159px; height:160px; margin-left:10px }#body .middle .gd li img{width:100%; height:100%} $(function(){ //\u8f7d\u5165\u540e var d=$('#body .middle .gd '); var ul=d.find('ul'); var li=ul.find('li'); var l=$('#body .middle .bt .l'); var r=$('#body .middle .bt .r') //\u8bbe\u7f6eul\u7684\u5bbd ul.width( (li.width()+10)*li.length ); var zy=false; //\u7ed9\u5de6\u53f3\u52a0\u4e8b\u4ef6 l.click(function(){ zy=true; zou(true); }); r.click(function(){ zy=false; zou(false); }); //\u81ea\u52a8\u5207\u6362 window.setInterval(function(){ if(zy){l.click(); //\u81ea\u52a8\u70b9\u51fb }else{r.click(); //\u81ea\u52a8\u70b9\u51fb } },2000);/*zuozou \u5411\u5de6\u6216\u5411\u53f3\u8d70*/function zou(zuozou){var k=$('#body .middle .gd ul li').width()*-1;var t=$('#body .middle .gd ul li').length-1;if(zuozou){//\u5411\u5de6$('#body .middle .gd ul').stop(true,true).animate({'left':k},function(){ //\u6267\u884c\u5b8c\u52a8\u753b\u540e$('#body .middle .gd ul li').eq(0).appendTo($('#body .middle .gd ul'));$('#body .middle .gd ul').css({ 'left':0 });});}else{//\u5411\u53f3$('#body .middle .gd ul li').eq(t).prependTo($('#body .middle .gd ul'));$('#body .middle .gd ul').css({ 'left':k});$('#body .middle .gd ul').stop(true,true).animate({'left':0});}}}) < >
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
<!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="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>
扩展阅读：www.sony.com.cn ... html+css+js软件手机版下载 ... html+css网页制作成品 ... html+css代码大全 ... html5+css3+javascript ... html5+css3期末考试题 ... html5 css3视频教程 ... web前端html5+css3 ... html5+css3期末作业 ...
