Php 为什么在这张幻灯片中第一张图像偏右？_Php_Jquery_Html_Css

Php 为什么在这张幻灯片中第一张图像偏右？

php jquery html css

Php 为什么在这张幻灯片中第一张图像偏右？,php,jquery,html,css,Php,Jquery,Html,Css,我试图建立一个网站的幻灯片。我找到了一个基于JQuery的，并试图将它集成到我的站点中，在大多数情况下，我都做到了。但是，首次加载页面时，图像显示在右侧。当它循环到下一个图像时，它将显示在中间。以下是HTML源代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

我试图建立一个网站的幻灯片。我找到了一个基于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>


幻灯片
切换导航





文件夹
$（文档）.ready（函数（）{
$（'#myslides'）。循环({
拟合：1，暂停：1，超时：1000
});
});

实时站点的url为：[url不再活动]

图像绝对位于包装div中，没有为左/右指定值

这应该可以做到：

#myslides img{
    left: 0px;
}