我正在尝试为网站构建幻灯片。我找到了一个基于JQuery的，并试图将其集成到我的网站中，在大多数情况下，我已经做到了。但是，首次加载页面时，图像将显示在右侧。 当它循环到下一个图像时，它显示在中心。
这是 HTML 源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" />
<link href="static/css/bootstrap-theme.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="shortcut icon" href="./static/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="./static/images/favicon.ico" type="image/x-icon"> <meta http- equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slideshow</title><!-- -->
<link rel="stylesheet" href="static/css/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav-home" href="./index.html" class="navbar-brand">Home</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li id="nav-resume"><a id="link" href="resume.html">Resume</a></li>
<li id="nav-projects"><a id="link" href="portfolio.php">Portfolio</a></li>
<li id="nav-contact"><a id="link" href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
</header>
<div id="wrap">
<div class="container">
<!--container is ended in footer tag.-->
<div align="center">
<h1>Portfolio</h1>
<div id="myslides"><img src="static/images/carousel/test1.jpg"/><img src="static/images/carousel/test2.jpg"/><img src="static/images/carousel/test3.jpg"/></div> </div>
</div>
</div>
<!-- Includes -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="static/js/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 1, timeout: 1000
});
});
</script>
</body>
</html>
活动站点的网址为：[网址不再有效]
图像绝对位于包装div 中，没有给出左/右的值......
这应该可以解决问题：
#myslides img{
left: 0px;
}