jQuery制作3D旋转木马图片切换带有标题简介
下载资源()次
阅读次数()次
发布时间：
用法简介：
jQuery制作3D旋转木马图片切换带有标题简介。代码调用：&script&src=&js/jquery-1.4.1.min.js&&type=&text/javascript&&charset=&utf-8&&&/script&
&&&&&&&&&script&src=&js/jquery.featureCarousel.js&&type=&text/javascript&&charset=&utf-8&&&/script&
&&&&&&&&&script&type=&text/javascript&&
&&&&&&&&&&&&$(document).ready(function()&{
&&&&&&&&&&&&&&&&$(&#featureCarousel&).featureCarousel({
&&&&&&&&&&&&&&&&&&&&//&include&options&like&this:
&&&&&&&&&&&&&&&&&&&&//&(use&quotes&only&for&string&values,&and&no&trailing&comma&after&last&option)
&&&&&&&&&&&&&&&&&&&&//&option:&value,
&&&&&&&&&&&&&&&&&&&&//&option:&value
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&});
&&/script&
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。淘宝新旺铺实现全屏轮播的方法全屏轮播代码全屏轮播不居中解决方法
淘宝新旺铺实现全屏轮播的方法，史上首个免费旺铺全屏轮播
全屏轮播代码（本文来自淘宝美工论坛，更多精彩请访问：）
今天真的非常高兴，得“路德”朋友的帮助，终于实现了全屏轮播！全屏轮播的问题，真的困扰了我很久很久，曾经尝试了N多种方法均都以失败告终，我曾一度认为自己永远也写不出全屏轮播了！臭美一点说，我是属于技术型的，遇到问题我就喜欢钻牛角尖，非要想办法把他解决了，如果解决不了，自己心里永远也放不下。
刚看了别人写的全屏轮播代码，真的是自叹不如！第一个想出这个方法的人真的非常聪明，他采用了六种组件中的三种，层层嵌套，最外面一层采用Tabs标签页，第二层采用Carousel旋转木马（这一层是实现全屏轮播的关键），最里面一层采用Popup弹出层，实现鼠标放在图片上时弹出左右轮播两个按钮。
我终于明白了自己为什么写不出全屏轮播！因为自己用错了方法，想问题总是不够灵活，一句话就是自己太笨了。以前我一直以为淘宝的全屏轮播，基本都是用的Carousel旋转木马实现的，以为只要一个旋转木马就可以实现了（事实上模板设计师在开发模板的全屏轮播时，的确是只要用到Carousel旋转木马），但我忽略了一个问题，模板设计师开发模板的方法与我们是不一样的，有些东西他们可以用，我们用不了。
哎，废话说的太多了，还是干正事吧，下面分享一款今天写的全屏轮播代码，此全屏轮播一样采用bounceOut动感弹跳效果，左右切换时非常有动感。全屏尺寸采用的是1680px，而不是1440px，1440的全屏是非常不专业的，你的客户不会只用19寸及19寸以下的显示器进入你的店铺，当客户采用22寸显示器进入你的店铺时，全屏轮播的左右两边将会出现露白。当然，如果出现露白你也能接受的话，那我没话说了，你直接用1440尺寸吧。也有朋友会说了，你1680的尺寸也只是最大适合22寸显示器，如果客户使用的是23寸及23寸以上的显示器时，那你还不是一样会出现露白？是的，但1680总比1440好，我们不可能做到把所有尺寸的显示器都考虑周全，这里只能采用折中的方法吧，只要做到最大适合22寸显示器即可。
此全屏轮播模块兼容主流浏览器，并且IE6下也是可以正常全屏轮播的。下方的五个图标按钮，主流浏览器都是可以正常显示的，只有在IE6下显示错位，目前还没找到解决方法。
全屏轮播效果真实展示：/
全屏轮播代码使用说明：
1、把以下代码全部复制到代码编辑器中（鼠标放在代码上，点击右上角的第二个图标即可全部复制）
2、下载下面两张图片（轮播按钮），然后上传到自己的图片空间（当然你也可以自己设计了）
&3、找到代码中的class="prev"这一行，把&img
src="#" /&里面的#替换为左轮播按钮
4、找到代码中的class="next"这一行，把&img src="#"
/&里面的#替换为右轮播按钮
5、找到class="ux"这一段代码，把里面的五个&img src="#"
width="1680px" height="540px"
border="0px"&中的#分别替换为自己的图片，&a
target="_blank"& href=""
style="padding:0margin:0"&中的请替换为对应图片的链接地址。
淘宝全屏轮播代码：（大图尺寸为：1680px*540px，代码中无注释）
class="J_TWidget" data-widget-config="{'effect': 'fade',
'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs"
style="height:540overflow:"&
&&div class="taobaoux"
style="height:540"&
&div data-widget-config="{'contentCls':
'slide-shopcontent','navCls':
'slide-shoptriggers','effect': 'scrollx','easing':
'bounceOut','prevBtnCls':'prev','nextBtnCls':'next','autoplay':
true,'viewSize':[1680],'circular': true}"
data-widget-type="Carousel" class="J_TWidget"
style="z-index:10;top:0left:-350padding:0margin:0width:1680"&
&&&&&&&&&&&
&div class="J_TWidget"
data-widget-config="{'trigger':'.ux','align':{'node':'.ux','offset':[0,0],'points':['cc','cc']}}"
data-widget-type="Popup"
style="display:"&
&&&&&&&&&&&&&&&
&div class="prev"
style="width:90height:90float:"&
&&&&&&&&&&&&&&&&&&&
&img src="#"
&&&&&&&&&&&&&&&
&div class="next"
style="width:90height:90margin-left:950"&
&&&&&&&&&&&&&&&&&&&
&img src="#"
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
style="height:540width:1680overflow:padding:0margin:0"
class="ux"&
&&&&&&&&&&&&&&&
&ul class="slide-shopcontent"
style="height:540width:1680padding:0margin:0"&
&&&&&&&&&&&&&&&&&
style="width:1680height:540padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&
&a target="_blank"&
style="padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&&&&&
&img src="#" width="1680px" height="540px"
border="0px"&&/a&&/li&
&&&&&&&&&&&&&&&&&
style="width:1680height:540padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&
&a target="_blank"&
style="padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&&&&&
&img src="#" width="1680px" height="540px"
border="0px"&&/a&&/li&
&&&&&&&&&&&&&&&&&
style="width:1680height:540padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&
&a target="_blank"&
style="padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&&&&&
&img src="#" width="1680px" height="540px"
border="0px"&&/a&&/li&
&&&&&&&&&&&&&&&&&
style="width:1680height:540padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&
&a target="_blank"&
style="padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&&&&&
&img src="#" width="1680px" height="540px"
border="0px"&&/a&&/li&
&&&&&&&&&&&&&&&&&
style="width:1680height:540padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&
&a target="_blank"&
style="padding:0margin:0"&
&&&&&&&&&&&&&&&&&&&&&&&
&img src="#" width="1680px" height="540px"
border="0px"&&/a&&/li&
&&&&&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
class="slide-shoptriggers"&
style="padding:0margin:0"&
&&&&&&&&&&&&&&&
&li style="float:padding:2px 20margin:2px 0
0 700cursor:background:#border:1px solid
#999;color:#999;"&1&/li&
&&&&&&&&&&&&&&&
&li style="float:padding:2px 20margin:2px 0
0 10cursor:background:#border:1px solid
#999;color:#999;"&2&/li&
&&&&&&&&&&&&&&&
&li style="float:padding:2px 20margin:2px 0
0 10cursor:background:#border:1px solid
#999;color:#999;"&3&/li&
&&&&&&&&&&&&&&&
&li style="float:padding:2px 20margin:2px 0
0 10cursor:background:#border:1px solid
#999;color:#999;"&4&/li&
&&&&&&&&&&&&&&&
&li style="float:padding:2px 20margin:2px 0
0 10cursor:background:#border:1px solid
#999;color:#999;"&5&/li&
&&&&&&&&&&&
全屏轮播不居中解决方法
如果轮播出现不居中,则需要调整"top:0left:-350px"中'left:350'的数值，因为这是决定旋转木马的左右位置的，具体要看轮播图是偏左还是偏右，以及偏移值，你可以截屏看看到底偏移了多少，然后在350的基础上加减就可以了。
下面这排代码是标示图片轮播的顺序的，如果不需要可以删掉。
我亲自测试过可以使用，如果有疑问可以留言，也可以去淘宝美工论坛，那里有更多精彩内容！！！
有朋友反映此代码有可能出现轮播图不居中，调整代码又太麻烦，如果你需要全屏轮播，可以进入我的小店和我旺旺交流，我可以把其他兼容版本的代码发给你，这些版本的不存在居中问题，只是风格稍有不同。
小店地址：
转载请注明原作出处，原作者淘宝美工论坛
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}