jQuery眼镜??60度产品展示效果代??/title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/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> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8??60、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之??</p> <p>来源??a href="https://nowjava.com" target="_blank">懒人素材</a></p> </div> <style>.nowjava-demo-box{position:fixed;background-color:rgba(255,255,255,0.25);top:110px;right:5px;z-index:99998;visibility:hidden;opacity:0;pointer-events:none;transition:all .3s;width:200px;height:260px;font-family:"pingfang SC","helvetica neue",arial,"hiragino sans gb","microsoft yahei ui","microsoft yahei",simsun,sans-serif;font-size:15px}.nowjava-demo-box:target{visibility:visible;opacity:1;pointer-events:auto}.nowjava-demo-box>div{width:200px;height:260px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:rgba(0,0,0,0.4);font-size:15px;color:#fff;overflow:auto}.nowjava-demo-box .ctt{margin:0 2px 0 2px}.nowjava-demo-box h1{font-size:16px;margin:20px 2px 5px 2px}.nowjava-demo-box-close{color:#eee;line-height:22px;font-size:80%;position:absolute;right:0;text-align:center;top:0;width:50px;text-decoration:none}.nowjava-demo-box-close:hover{color:#ccc}.nowjava-demo-box-container{width:128px;height:34px;background-color:rgba(0,0,0,0.6);line-height:34px;text-align:center;color:#fff;font-size:13px;position:fixed;top:70px;right:5px;z-index:99999;cursor:pointer;border:1px solid #ccc;font-family:"pingfang SC","helvetica neue",arial,"hiragino sans gb","microsoft yahei ui","microsoft yahei",simsun,sans-serif}.nowjava-demo-box-container a{color:#fff}.nowjava-demo-box-container a:hover{color:#ddd}.nowjava-demo-box-container div:not(:last-of-type){margin-bottom:15px}.nowjava-demo-box-container .nowjava-d-btn{padding:0.2em;border-radius:3px;text-decoration:none}.nowjava-demo-box-container .nowjava-btn-icon{float:left;padding-left:10px;height:32px;line-height:32px;}.nowjava-demo-box-container .nowjava-btn-icon svg{margin:0;padding:0;width:16px;height:32px;line-height:32px;}</style><div class="nowjava-demo-box-container"><div class="interior"><div class="nowjava-btn-icon"><svg t="1586501309977" viewBox="0 0 1265 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14328" width="16" height="16"><path d="M1025.724758 311.892298A401.369796 401.369796 0 0 0 298.08016 182.41817a310.737906 310.737906 0 0 0 25.894826 621.475813 51.789651 51.789651 0 0 0 0-103.579302 207.158604 207.158604 0 0 1 0-414.317209h16.31374l5.178965-1.553689 4.40212-1.812638 4.661069-2.589483 3.884224-2.330534a27.707463 27.707463 0 0 0 4.143172-3.625276l3.366327-3.107379a20.456912 20.456912 0 0 0 3.107379-3.884223 22.787446 22.787446 0 0 0 3.107379-4.402121l1.294742-1.812638a298.049442 298.049442 0 0 1 557.515593 110.570905v1.55369a6.214758 6.214758 0 0 0 0 2.071586c0 2.589483 0 5.178965 1.812638 7.768448v1.553689a51.789651 51.789651 0 0 0 3.625276 7.768448 51.789651 51.789651 0 0 0 44.021203 25.894825h8.027396a133.876248 133.876248 0 0 1 21.751654-2.589482 142.42154 142.42154 0 0 1 0 284.843081H971.345624a51.789651 51.789651 0 0 0 0 103.579302h38.842239a245.741894 245.741894 0 0 0 15.536895-492.001685z" fill="#ffffff" p-id="14329"></path><path d="M781.795501 803.893983l-87.783458 87.783459V519.050902a38.842238 38.842238 0 0 0-77.684477 0v372.367591L528.803056 803.893983a38.842238 38.842238 0 0 0-54.89703 55.155978l153.815263 153.815264a35.734859 35.734859 0 0 0 12.170568 8.027396 41.949617 41.949617 0 0 0 13.983206 2.589482 38.065394 38.065394 0 0 0 14.501103-2.84843 38.842238 38.842238 0 0 0 13.206361-9.063189l153.556315-153.556316A38.842238 38.842238 0 1 0 781.795501 803.893983z" fill="#ffffff" p-id="14330"></path></svg></div><a class="nowjava-d-btn" target="_blank" href="https://nowjava.com/download/29866">下载代码</a><a class="nowjava-d-btn" href="#nowjava-open-box">说明</a></div></div><div id="nowjava-open-box" class="nowjava-demo-box"><div><a href="#nowjava-close-box" title="关闭" class="nowjava-demo-box-close">X关闭</a><h1>jQuery眼镜店360度产品展示效果代码</h1><div class="ctt">这是一款眼镜店360度产品全景展示图片浏览插件，支持鼠标滑动控制图片切换，支持按钮控制图片切换，对于产品图片的要求较高。</div></div></div><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?85351496e33f9c28bf5d2532431429fe";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></body> </html>