我正在为购物门户创建一个设计，我在那里创建设计为HTML页面。到目前为止，每件事情都很好。但现在我要求在我的页面上添加一个轮播。当我加入它时，旋转木马工作正常，但页面中的所有其他图像都显示出来。 当我试图找到错误时，我发现jquery文件（jquery-1.10.2.min.js）与之冲突。当我删除这个jquery文件时，页面工作正常，除了没有显示的轮播，如果我包含这个jquery文件轮播工作正常，所有其他图像都消失了。
在这种情况下的任何帮助将不胜感激。
我的代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
Home page
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="description" content="Default Description"/>
<meta name="keywords" content="Magento, Varien, E-commerce"/>
<meta name="robots" content="INDEX,FOLLOW"/>
<script type="text/javascript">
//<![CDATA[
try{
if (!window.CloudFlare) {
var CloudFlare=[{
verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{
cloudflare:"/cdn-cgi/nexp/dok2v=1613a3a185/"}
,atok:"36a1387ad6e467e69406d7f097f16792",petok:"39bc36baccf2ce30ae4417d7b96f86df2716dc2f-1417606940-86400",zone:"template-help.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7"}
,"ga_key":{"ua":"UA-7078796-5","ga_bs":"2"}
}}
];
!function(a,b){
a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok2v=919620257c/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link rel="icon" href="skin/images/opilis.bmp" type="image/x-icon"/>
<link rel="shortcut icon" href="skin/frontend/default/theme315k/favicon.ico" type="image/x-icon"/>
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes%7CLobster' rel='stylesheet' type='text/css'>-->
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link href="fontsapis/cssfont4.css" rel='stylesheet' type='text/css'>
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = 'js/blank.html';
var BLANK_IMG = 'js/spacer.gif';
//]]>
</script>
<![endif]-->
<!--[if lt IE 9]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<style>
body {
min-width: 960px !important;
}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="js/calendar/calendar-win2k-1.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/photoswipe.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/extra_style.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/camera.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/widgets.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/cmsmart/ajaxsearch/ajaxsearch.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/cmsmart/ajaxsearch/jquery.multiselect.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/cmsmart/ajaxsearch/assets/prettify.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/ecommerceteam/cloud-zoom.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/catalogsale.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/hitch/ajaxlogin/ajaxlogin.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
<script type="text/javascript" src="js/jquery/jquery-1.11.1.min.js"> </script>
<script type="text/javascript" src="js/jquery/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="js/jquery/jquery_noconflict.js"> </script>
<script type="text/javascript" src="js/prototype/prototype.js"> </script>
<script type="text/javascript" src="js/lib/ccard.js"> </script>
<script type="text/javascript" src="js/prototype/validation.js"> </script>
<script type="text/javascript" src="js/scriptaculous/builder.js"> </script>
<script type="text/javascript" src="js/scriptaculous/effects.js"> </script>
<script type="text/javascript" src="js/scriptaculous/dragdrop.js"> </script>
<script type="text/javascript" src="js/scriptaculous/controls.js"> </script>
<script type="text/javascript" src="js/scriptaculous/slider.js"> </script>
<script type="text/javascript" src="js/varien/js.js"> </script>
<script type="text/javascript" src="js/varien/form.js"> </script>
<script type="text/javascript" src="js/mage/translate.js"> </script>
<script type="text/javascript" src="js/mage/cookies.js"> </script>
<script type="text/javascript" src="js/cmsmart/jquery/ajaxcart/cmsmart-ajaxcart.js"> </script>
<script type="text/javascript" src="js/varien/product.js"> </script>
<script type="text/javascript" src="js/varien/configurable.js"> </script>
<script type="text/javascript" src="js/calendar/calendar.js"> </script>
<script type="text/javascript" src="js/calendar/calendar-setup.js"> </script>
<script type="text/javascript" src="js/cmsmart/ajaxsearch/ajaxsearch.js"> </script>
<script type="text/javascript" src="js/cmsmart/ajaxsearch/jquery-ul.js"> </script>
<script type="text/javascript" src="js/cmsmart/ajaxsearch/prettify.js"> </script>
<script type="text/javascript" src="js/cmsmart/ajaxsearch/jquery.multiselect.js"> </script>
<script type="text/javascript" src="js/ecommerceteam/cloud-zoom.1.0.2.js"> </script>
<script type="text/javascript" src="js/js/bootstrap.js"> </script>
<script type="text/javascript" src="js/js/jquery.easing.1.3.js"> </script>
<script type="text/javascript" src="js/js/jquery.mobile.customized.min.js"> </script>
<script type="text/javascript" src="js/js/jquery.carouFredSel-6.2.1.js"> </script>
<script type="text/javascript" src="js/js/jquery.touchSwipe.js"> </script>
<script type="text/javascript" src="js/js/jquery.bxslider.min.js"> </script>
<script type="text/javascript" src="js/js/jquery.unveil.js"> </script>
<script type="text/javascript" src="js/js/cherry-fixed-parallax.js"> </script>
<script type="text/javascript" src="js/js/tm-stick-up.js"> </script>
<script type="text/javascript" src="js/js/superfish.js"> </script>
<script type="text/javascript" src="js/js/scripts.js"> </script>
<script type="text/javascript" src="js/js/jquery-ui.js"> </script>
<script type="text/javascript" src="js/js/bundle.js"> </script>
<script type="text/javascript" src="js/js/carousel.js"> </script>
<script type="text/javascript" src="js/js/hitch/ajaxlogin/jquery-ui-1-10-4.js"> </script>
<script type="text/javascript" src="js/js/hitch/ajaxlogin/ajaxlogin.js"> </script>
<!--carousel-->
<script src="carousel/js/jquery-1.10.2.min.js"></script>
<!-- /.CDN -->
<script type="text/javascript" src="carousel/js/jquery.anoslide.js"></script>
<style type="text/css">
.carousel { position:relative; min-height: 20px; height:auto !important; height: 20px; background:url(images/loader.gif) center center no-repeat; }
.carousel .next,
.carousel .prev { display:none; width:56px; height:56px; position:absolute; bottom:20px; left:50%; margin-top:-28px; z-index:9999; cursor:pointer; }
.carousel .prev { margin-left:-60px; background:url(carousel/images/prev.png) 0 0 no-repeat; }
.carousel .next { margin-right:-60px; background:url(carousel/images/next.png) 0 0 no-repeat; }
.carousel li { display:none; }
.carousel li img { width:100%; height:auto; }
.paging { position:absolute; z-index:9998; }
.paging > a { display:block; cursor:pointer; width:40px; height:40px; float:left; background:url(carousel/images/dots.png) 0px -40px no-repeat; }
.paging > a:hover,
.paging > a.current { background:url(carousel/images/dots.png) 0px 0px no-repeat; }
.badge { display:block; width:104px; height:104px; background:url(carousel/images/badge.png) 0 0 no-repeat; z-index:9000; position:absolute; top:-3px; left:-3px; }
img {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
/* Figure */
</style>
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('figure');
</script>
<![endif]-->
<!--carousel-->
<script type="text/javascript">
//<![CDATA[
Mage.Cookies.path = '';
Mage.Cookies.domain = '';
//]]>
</script>
<link rel="stylesheet" href="cmsmart/ajaxcart/css/default.css" type="text/css"/>
<style type="text/css">
#ajaxcartmsg{
background:#FFFFFF!important;
border:5px solid #DDDDDD!important;
}
div#ajaxcart{
margin-left:0px;
width:320px;
background:#FFFFFF;
border:0px solid #DDDDDD!important;
box-shadow:0 0 3px #DDDDDD}
</style>
<script type="text/javascript">
//<![CDATA[
var baseUrlAjax = '##';
var cartlinkclass = 'ul.links a.top-link-cart';
var ajaxConfirmMsgDelItem = 'Are you sure you would like to remove this item from the shopping cart?';
var ajaxConfirmMsgEmpty = 'Empty cart?';
//]]
</script>
<script type="text/javascript">
//<![CDATA[
var Translator = new Translate([]);
//]]>
</script>
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7078796-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();
(function(b){
(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)}
)(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){
_gaq.push(["_trackSocial","facebook","like",a])}
),FB.Event.subscribe("edge.remove",function(a){
_gaq.push(["_trackSocial","facebook","unlike",a])}
),FB.Event.subscribe("message.send",function(a){
_gaq.push(["_trackSocial","facebook","send",a])}
));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){
if(a){
var b;
if(a.target&&a.target.nodeName=="IFRAME")a:{
if(a=a.target.src){
a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);
b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){
b=unescape(c.split("=")[1]);
break a}
}b=void 0}
_gaq.push(["_trackSocial","twitter","tweet",b])}
})}
)}
)(window);
/* ]]> */
</script>
</head>
<body class="ps-static cms-index-index cms-home">
<div class="wrapper ps-static en-lang-class">
<script type="text/javascript">
var baseUrl = '#';
var minchar = 3;
var t_request = 500
</script>
<div class="index-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="index_block">
<div class="header_slider">
<script type="text/javascript" src="js/js/camera.js">
</script>
<script type="text/javascript">
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '51.264%',
minHeight: '50px',
loader : false,
pagination: false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
}
);
}
);
</script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="skin/images/slider/MainSlide7.png">
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--carousel start-->
<script type="text/javascript">
$('.carousel ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev[data-prev-mixed]',
next: 'a.next[data-next-mixed]',
lazy: true
})
</script>
<div class="wrapper">
<div class="carousel" data-mixed>
<a class="prev" data-prev></a>
<ul>
<li>
<div class="wrap"><figure><img data-src="carousel/images/slides/thumbnails/1.jpg" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="carousel/images/slides/thumbnails/2.jpg" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="carousel/images/slides/thumbnails/3.jpg"/></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="carousel/images/slides/thumbnails/4.jpg" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="carousel/images/slides/thumbnails/5.jpg"/></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="carousel/images/slides/thumbnails/6.jpg" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="carousel/images/slides/thumbnails/7.jpg" /></figure></div>
</li>
</ul>
<a class="next" data-next></a>
</div>
</div>
<script type="text/javascript">
$('.carousel[data-mixed] ul').anoSlide(
{
items: 5,
speed: 500,
prev: 'a.prev[data-prev]',
next: 'a.next[data-next]',
lazy: true,
delay: 100
})
</script>
<script type="text/javascript">
$('.carousel.captions ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev[data-prev-caption]',
next: 'a.next[data-next-caption]',
lazy: true,
onStart: function(ui)
{
ui.slide.element.find('.caption').remove();
},
onEnd: function(ui)
{
var content = ui.slide.element.data('caption');
var caption = $('<div/>').addClass('caption').css(
{
position: 'absolute',
background: 'rgb(0,0,0)',
color: 'rgb(255,255,255)',
textShadow: 'rgb(0,0,0) -1px -1px',
opacity: 0.5,
top: -100,
left: 50,
padding: 20,
webkitBorderRadius: 5,
mozBorderRadius: 5,
borderRadius: 5
}).html(content);
caption.appendTo(ui.slide.element).animate(
{
top:50
});
}
})
</script>
<!--carousel end-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您在提供的代码示例中加载了两次jQuery。 1.10版本也在所有其他jQuery库之后加载。
可能是您的轮播与jQuery v1.11不兼容，这就是为什么它不适合您。
首先，取出v1.10 jQuery链接。其次，要么获得轮播的更新，所以它适用于v1.11或找到另一个轮播库使用。那里确实有很多工作正常。