我需要再向滑块添加一张幻灯片。我尝试用小提琴制作它但不能。您可以将其保存在编辑器中并运行它，看看它是如何工作的。
我已经在页面上有两张幻灯片，但无法添加另一张幻灯片。当我为另一张幻灯片添加代码时，滑块停止工作。您可以复制粘贴幻灯片代码并查看它是否存在问题。我相信它与页面上的jQuery代码有关，需要进行一些调整。
请帮忙。
谢谢！
<!doctype html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<title>Zones: Connecting Businesses and Technology</title>
<link rel="stylesheet" type="text/css" href="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/images/css/global_v4.css"/>
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/libs/jquery-v1.7.2.js"></script>
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/libs/modernizr.min_76f186e89c0fb7aea21b6651c289f239.js"></script>
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/jquery.placeholder_55351e456a0735663fd3574e21838fb.js"></script>
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/zones_24172738c15b438acb5bcd07c089eee0.js"></script>
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/global_daf680176b016ace5457c1c16126c23d.js"></script>
<!-- zones.js redesign replacement -->
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/showoff_0a6c88755a7faf1f7d0c7fbbbc51bdba.js"></script>
<script type="text/javascript" src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/homeslider.js"></script>
<!--Banner slider-->
</head>
<body>
<div class="headerWidth">
<style>
.section-solutions { background-color: #fff; }
.section-healthcare { padding-top: 40px; }
.section-links { padding: 15px 0px; }
.section-partners { padding: 70px 0; }
.section-products .products-hero div { line-height: 30px; }
.section-brand-statement { height: 55px; }
.section-brand-statement h1 {
line-height: 55px;
font-size: 26px;
}
.section-products {
background: url('http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/images/css/home_tile_split_bg_20140723.png') repeat-x;
padding-top: 43px;
margin-bottom: 0;
padding-bottom: 0;
height: 335px;
overflow: hidden;
padding-bottom: 25px;
background-color: #e9e9e9;
}
.slider-bg {
background: url('http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/images/css/home_tile_split_bg_20140723.png') repeat-x;
height: 378px;
overflow: hidden;
}
.cf:before, .cf:after {
content: " "; /* 1 */
/*display: table; /* 2 */
}
.cf:after { clear: both; }
/* For IE 6/7 only: Include this rule to trigger hasLayout and contain floats. */
.cf { *zoom: 1; }
</style>
<div id="main-content">
<!--BEGIN HOMEPAGE-->
<!--END SECTION-->
<!-- BEGIN SECTION-->
<div class="slider-bg">
<div class="home-section section-healthcare">
<div class="inner-arrow"> <a href="" class="homeSlideLeft" style="display:none;"><img src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/images/css/arrow-slider-left_20140529.png" alt="Slide Left"></a> <a href="" class="homeSlideRight"><img src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/images/css/arrow-slider-right_20140529.png" alt="Slide Right" style="float:right;"></a> </div>
<div style="width:10000px;">
<div class="inner-slide" style="margin-left: -900px;">
<div class="right"> <a href="http://www.zones.com/site/statics/static_page.html?name=zones/retail-solutions"><img src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/images/css/products-retail_20140724.png" /></a> </div>
<h3><a href="http://www.zones.com/site/statics/static_page.html?name=zones/retail-solutions">Zones retail solutions</a></h3>
<p class="p"><strong>Make connections that drive transactions.</strong><br />
<br />
Zones fills the retail space, from the digital signage and mobile point-of-sale to inventory management.</p>
<p><a class="link-transition" href="http://www.zones.com/site/statics/static_page.html?name=zones/retail-solutions">View retail solutions <span class="orange">»</span></a></p>
<div class="clear"></div>
</div>
<div class="inner-slide">
<div class="right"> <a href="http://www.zones.com/site/statics/static_page.html?name=healthcare/micro/zones-healthcare"><img src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/images/css/products-healthcare_20140724.png" style="margin-top: 10px;" /></a> </div>
<h3><a href="http://www.zones.com/site/statics/static_page.html?name=healthcare/micro/zones-healthcare">Zones healthcare solutions</a></h3>
<p class="p"><strong>Keep moving healthcare forward.</strong><br />
<br />
Zones experts ease the convergence of new technology and healthcare.</p>
<p><a class="link-transition" href="http://www.zones.com/site/statics/static_page.html?name=healthcare/micro/zones-healthcare">View healthcare solutions <span class="orange">»</span></a></p>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- BEGIN SECTION-->
<!--END SECTION-->
<div class="clr"></div>
</div>
<script type="text/javascript" src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".homeSlideLeft, .homeSlideRight").click(function(e){
e.preventDefault();
var max = $(".inner-slide").length;
var first = $(".inner-slide").first();
var width = 900;
var margin = parseInt(first.css("margin-left").replace("px",""));
var index = Math.round((margin * -1) / width) + 1;
var direction = $(this).attr("class").indexOf("Left") != -1 ? "left" : "right";
//console.log("max >> " + max);
//console.log("index >> " + index);
//console.log("direction >> " + direction);
//console.log("margin >> " + margin);
if (direction == "left"){
var newMargin = (margin - width) + "px";
first.animate({"margin-left": newMargin}, {
duration: 1000,
easing: 'easeInOutCubic'
});
} else {
var newMargin = (margin + width) + "px";
first.animate({"margin-left": newMargin}, {
duration: 1000,
easing: 'easeInOutCubic'
});
}
if (index == max){
$(".homeSlideRight").hide();
$(".homeSlideLeft").show();
} else {
$(".homeSlideRight").show();
$(".homeSlideLeft").hide();
}
return false;
});
});
</script>
<div class="clr"></div>
</body>
</html>
答案 0 :(得分：-2)
为所有幻灯片添加align:left ..