页面图片轮播完整代码
完整頁面代碼如下，賦值到html頁面用瀏覽器打開就可以預覽圖片輪播效果：
?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
/*圖片輪播*/
.box{
? ?margin-top: 20px;
? ?margin-left: 40px;
? ?height: 180px;
? ? background-color: white;
? ?position: relative;
? ?float: left;
}
.list{
? ?width: 300px;
? ?height: 150px;
? ?overflow: hidden;
? ?margin: 5px;
}
.next{
? ?right: 0;
}
.list li{
? ?position: absolute;
? ?top: 0;
? ?left: 0;
? ?list-style: none;
? ?opacity: 0;
? ?transition: all 0.3s ease-out;
}
.list img{
? ?border: 1px solid #DDD;
? ?float: left;
}
.list .p1{
? ?transform:translate3d(-100px,0,0) scale(0.70);
}
.list .p2{
? ?transform:translate3d(0px,0,0) scale(0.70);
? ?transform-origin:0 50%;
? ?opacity: 0.8;
? ?z-index: 2;
}
.list .p3{
? ?transform:translate3d(100px,0,0) scale(1);
? ?z-index: 3;
? ?opacity: 1;
}
.list .p4{
? ?transform:translate3d(200px,0,0) scale(0.70);
? ?transform-origin:100% 50%;
? ?opacity: 0.8;
? ?z-index: 2;
}
.list .p5{
? ?transform:translate3d(300px,0,0) scale(0.70);
}
.list .p6{
? ?transform:translate3d(400px,0,0) scale(0.70);
}
.list .p7{
? ?transform:translate3d(500px,0,0) scale(0.70);
}
?
.buttons{
?
?/* ?width: 600px;*/
? ?height: 30px;
? ?bottom: 0;
? ?margin-left: 0px;
? ?text-align: center;
? ?padding-top: 10px;
}
.buttons a{
? ?display: inline-block;
? ?width: 35px;
? ?height: 5px;
? ?padding-top: 4px;
? ?cursor: pointer;
}
?
.buttons span{
? ?display: block;
? ?width: 35px;
? ?height: 1px;
? ?background: #DDDDDD;
}
.buttons .blue{
? ?background: #62a60a;
}
/*圖片輪播結(jié)束*/
</style>
<title>圖片輪播演示</title>
<script>
js代碼：http://www.yayihouse.com/yayishuwu/chapter/2467
? ?</script>
</head>
?
<body>
<div ?class="box">
? <div class="list" >
? ? ?<ul>
? ? ? ?<li class="p1"><a href=""><img src="/static/images/survey_02.png" alt="" ? width="300" height="150" /></a></li>
? ? ? ? ? ? ? ? ? ? ?<li class="p2"><a href=""><img src="/static/images/survey_02.png" alt="" ? width="300" height="150" ?/></a></li>
? ? ? ? ? ? ? ? ? ? ?<li class="p3"><a href=""><img src="/static/images/survey_02.png" alt="" ? width="300" height="150" ?/></a></li>
? ? ? ? ? ? ? ? ? ? ?<li class="p4"><a href=""><img src="/static/images/survey_02.png" alt="" ? width="300" height="150" ?/></a></li>
? ? ? ? ? ? ? ? ? ? ?<li class="p5"><a href=""><img src="/static/images/survey_02.png" alt="" ? width="300" height="150" ?/></a></li>
? ? ? ? ? ? ? ? ? ? ?<li class="p6"><a href=""><img src="/static/images/survey_02.png" alt="" ? width="300" height="150" ?/></a></li>
? ? ? ? ? ? ? ? ? ? ?<li class="p7"><a href=""><img src="/static/images/survey_02.png" alt="" ? width="300" height="150" ?/></a></li>
? ? ? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ?<div class="buttons">
? ? ? ? ? ? ? ? ? ?<a href="javascript:;"><span></span></a>
? ? ? ? ? ? ? ? ? ?<a href="javascript:;"><span></span></a>
? ? ? ? ? ? ? ? ? ?<a href="javascript:;"><span></span></a>
? ? ? ? ? ? ? ? ? ?<a href="javascript:;"><span></span></a>
? ? ? ? ? ? ? ? ? ?<a href="javascript:;"><span></span></a>
? ? ? ? ? ? ? ? ? ?<a href="javascript:;"><span></span></a>
? ? ? ? ? ? ? ? ? ?<a href="javascript:;"><span></span></a>
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的页面图片轮播完整代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华南主板bios怎么恢复出厂设置_Bio
- 下一篇： 记xctf_web upload1