jquery实现的3D旋转木马特效代码分享

前端技术 2023/09/05 JavaScript

本文实例讲述了jquery实现的3D旋转木马特效。分享给大家供大家参考。具体如下：
这是一款基于jquery实现的3D旋转木马特效代码，适合用于产品展示，便于用户循环浏览产品细节，是一款非常实用的特效代码。
运行效果图：----------------------查看效果 下载源码-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现的3D旋转木马特效代码如下

<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
<link rel=\"shortcut icon\" href=\"favicon.ico\" type=\"image/x-icon\" />
<title>jq 3D旋转木马</title>
<link href=\"css/main.css\" rel=\"stylesheet\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"js/jquery-1.8.0.js\"></script>
<script type=\"text/JavaScript\" src=\"js/cloud-carousel.1.0.5.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function(){
$(\"#da-vinci-carousel\").CloudCarousel( { 
reflHeight: 56,
reflGap:2,
titleBox: $(\'#da-vinci-title\'),
altBox: $(\'#da-vinci-alt\'),
buttonLeft: $(\'#but1\'),
buttonRight: $(\'#but2\'),
yRadius:40,
xPos: 285,
yPos: 120,
speed:0.15,
mouseWheel:true
});
$(\"#carousel2\").CloudCarousel({ 
xPos:280,
yPos:80,
buttonLeft: $(\'#but3\'),
buttonRight: $(\'#but4\'), 
FPS:30,
autoRotate: \'left\',
autoRotateDelay: 1200,
speed:0.2,
mouseWheel:true,
bringToFront:true
}); 
});
</script>
</head>
<body>
<center>
<br><br><br>
<div id=\"da-vinci-carousel\" style=\"width:570px; height:384px;background: url(images/bg.jpg);overflow:scroll;\">
<a href=\"images/382px-Leonardo_self.jpg\" rel=\'lightbox\' title=\"Leonardo Da Vinci\"><img class=\"cloudcarousel\" src=\"images/test9.png\" width=\"128\" height=\"164\" alt=\"Self-portrait in red chalk, circa 1512-1515.\" title=\"Leonardo Da Vinci\" /></a> 
<a href=\"images/396px-Mona_Lisa.jpg\" rel=\'lightbox\' title=\"Mona Lisa\"><img class=\"cloudcarousel\" src=\"images/test1.png\" width=\"128\" height=\"164\" alt=\"Oil on cotton wood, circa 1503–1505.\" title=\"Mona Lisa\" /></a>
<a href=\'images/439px-The_Lady_with_an_Ermine.jpg\' rel=\'lightbox\' title=\"Lady with an Ermine\"><img class=\"cloudcarousel\" src=\"images/test2.png\" width=\"128\" height=\"164\" alt=\"Oil on wood panel, 1485.\" title=\"Lady with an Ermine\" /></a>
<a href=\"images/Madonna_of_the_Yarnwinder.jpg\" rel=\"lightbox\" title=\"Madonna of the Yarnwinder\"><img class=\"cloudcarousel\" src=\"images/test3.png\" width=\"128\" height=\"164\" alt=\"Oil on canvas, circa 1501.\" title=\"Madonna of the Yarnwinder\" /></a>
<a href=\"images/470px-Madonna_Litta.jpg\" rel=\"lightbox\" title=\"Madonna and the Child\"><img class=\"cloudcarousel\" src=\"images/test4.png\" width=\"128\" height=\"164\" alt=\"Oil on canvas (transferred from panel), circa 1490.\" title=\"Madonna and the Child\" /></a>
<a href=\"images/390px-Bacchus_painting.jpg\" rel=\"lightbox\" title=\"Bacchus\"><img class=\"cloudcarousel\" src=\"images/test5.png\" width=\"128\" height=\"164\" alt=\"Oil on walnut panel transferred to canvas, circa 1510–1515.\" title=\"Bacchus\" /></a>
<a href = \"images/452px-Madonna_of_the_carnation_EUR.jpg\" rel=\"lightbox\" title=\"Madonna of the Carnation\" ><img class=\"cloudcarousel\" src=\"images/test6.png\" width=\"128\" height=\"164\" alt=\"Oil on panel, circa 1478–1480.\" title=\"Madonna of the Carnation\" /></a>
<a href=\"images/454px-Leonardo_-_St._Anne_cartoon-alternative-downsampled.jpg\" rel=\"lightbox\" title=\"The Virgin and Child with St. Anne and St. John the Baptist\"><img class=\"cloudcarousel\" src=\"images/test7.png\" width=\"128\" height=\"164\" alt=\"
Charcoal, black and white chalk on tinted paper, circa 1499–1500.\" title=\"The Virgin and Child with St. Anne and St. John the Baptist\" /></a>
<a href=\"images/FileLeonardo-da-Vinci-020.jpg\" rel=\"lightbox\" title=\"The Virgin and Child with St. Anne\"><img class=\"cloudcarousel\" src=\"images/test8.png\" width=\"128\" height=\"164\" alt=\"Oil on panel, circa 1510.\" title=\"The Virgin and Child with St. Anne\" /></a>
<div id=\"da-vinci-title\" ></div>
<div id=\"da-vinci-alt\" ></div>
<div id=\"but1\" class=\"carouselLeft\" style=\"position:absolute;top:20px;right:64px;\"></div>
<div id=\"but2\" class=\"carouselRight\" style=\"position:absolute;top:20px;right:20px;\"></div> 
</div>
</center>
<div style=\"text-align:center;clear:both\">
</div>
</body>
</html>

以上就是为大家分享的jquery实现的3D旋转木马特效代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/14224

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案