以下是 jQuery眼镜店360度产品全景预览特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery眼镜店360度产品全景预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="bootstrap.min.css" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="angle.css" />
<script src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="jquery.angle.js"></script>
<style>
body {
background-color: #444;
}
.container {
margin:50px auto;
}
h1 {
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery Angle View Plugin Examples</h1>
<div class="angle-view" id="angle-view1">
<ul>
<li><img src="images/01.jpg" alt="01" /></li>
<li><img src="images/02.jpg" alt="02" /></li>
<li><img src="images/03.jpg" alt="03" /></li>
<li><img src="images/04.jpg" alt="04" /></li>
<li><img src="images/05.jpg" alt="05" /></li>
<li><img src="images/06.jpg" alt="06" /></li>
<li><img src="images/07.jpg" alt="07" /></li>
<li><img src="images/08.jpg" alt="08" /></li>
<li><img src="images/09.jpg" alt="09" /></li>
<li><img src="images/10.jpg" alt="10" /></li>
<li><img src="images/11.jpg" alt="11" /></li>
<li><img src="images/12.jpg" alt="12" /></li>
<li><img src="images/13.jpg" alt="13" /></li>
<li><img src="images/14.jpg" alt="14" /></li>
<li><img src="images/15.jpg" alt="15" /></li>
<li><img src="images/16.jpg" alt="16" /></li>
</ul>
</div>
<p style="text-align:center; margin-bottom:50px;">
<button class="btn btn-primary prev-image">Prev</button>
<button class="btn btn-primary next-image">Next</button>
</p>
<div class="angle-view" id="angle-view2">
<ul>
<li><img src="images/01.jpg" alt="01" /></li>
<li><img src="images/02.jpg" alt="02" /></li>
<li><img src="images/03.jpg" alt="03" /></li>
<li><img src="images/04.jpg" alt="04" /></li>
<li><img src="images/05.jpg" alt="05" /></li>
<li><img src="images/06.jpg" alt="06" /></li>
<li><img src="images/07.jpg" alt="07" /></li>
<li><img src="images/08.jpg" alt="08" /></li>
<li><img src="images/09.jpg" alt="09" /></li>
<li><img src="images/10.jpg" alt="10" /></li>
<li><img src="images/11.jpg" alt="11" /></li>
<li><img src="images/12.jpg" alt="12" /></li>
<li><img src="images/13.jpg" alt="13" /></li>
<li><img src="images/14.jpg" alt="14" /></li>
<li><img src="images/15.jpg" alt="15" /></li>
<li><img src="images/16.jpg" alt="16" /></li>
</ul>
</div>
<div class="angle-view" id="angle-view3">
<ul>
<li><img src="images/01.jpg" alt="01" /></li>
<li><img src="images/02.jpg" alt="02" /></li>
<li><img src="images/03.jpg" alt="03" /></li>
<li><img src="images/04.jpg" alt="04" /></li>
<li><img src="images/05.jpg" alt="05" /></li>
<li><img src="images/06.jpg" alt="06" /></li>
<li><img src="images/07.jpg" alt="07" /></li>
<li><img src="images/08.jpg" alt="08" /></li>
<li><img src="images/09.jpg" alt="09" /></li>
<li><img src="images/10.jpg" alt="10" /></li>
<li><img src="images/11.jpg" alt="11" /></li>
<li><img src="images/12.jpg" alt="12" /></li>
<li><img src="images/13.jpg" alt="13" /></li>
<li><img src="images/14.jpg" alt="14" /></li>
<li><img src="images/15.jpg" alt="15" /></li>
<li><img src="images/16.jpg" alt="16" /></li>
</ul>
</div>
<div class="angle-view" id="angle-view4">
<ul>
<li><img src="images/01.jpg" alt="01" /></li>
<li><img src="images/02.jpg" alt="02" /></li>
<li><img src="images/03.jpg" alt="03" /></li>
<li><img src="images/04.jpg" alt="04" /></li>
<li><img src="images/05.jpg" alt="05" /></li>
<li><img src="images/06.jpg" alt="06" /></li>
<li><img src="images/07.jpg" alt="07" /></li>
<li><img src="images/08.jpg" alt="08" /></li>
<li><img src="images/09.jpg" alt="09" /></li>
<li><img src="images/10.jpg" alt="10" /></li>
<li><img src="images/11.jpg" alt="11" /></li>
<li><img src="images/12.jpg" alt="12" /></li>
<li><img src="images/13.jpg" alt="13" /></li>
<li><img src="images/14.jpg" alt="14" /></li>
<li><img src="images/15.jpg" alt="15" /></li>
<li><img src="images/16.jpg" alt="16" /></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#angle-view1').angle({
speed: 1,
previous: '.prev-image',
next: '.next-image',
});
$('#angle-view2').angle({
speed: 20
});
$('#angle-view3').angle({
speed: 3,
drag: true
});
$('#angle-view4').angle({
speed: 4
});
});
</script>
</div>
</body>
</html>
CSS代码(angle.css):
.angle-view{overflow:hidden;width:600px;margin:10px auto;border:5px solid #fafafa;border-radius:5px;background-color:#fff;}
.angle-view ul,#angle-view li{margin:0;padding:0;}
.angle-view li{list-style:none;}
.angle-view ul{width:600px;height:330px;}
.angle-view img{width:90%;display:block;margin:18px auto;}
分享到QQ
分享到微博
微信扫一扫
