douya2433
2013-11-14 01:27
浏览 55

为什么此幻灯片中的第一张图像偏向右侧? [关闭]

I am attempting to build a slideshow for a website. I found a JQuery based one and attempted to integrate it into my site, and for the most part, I have. However when the page is first loaded, the image is displayed to the right. When it cycles to the next image, it is displayed in the center.
Here is the HTML source:

<!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>

the url to the live site is: [url no longer active]

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongshilve4392 2013-11-14 01:38
    已采纳

    The images are absolutely postioned within the wrapping div, there was no value given for left/right...

    This should do the trick:

    #myslides img{
        left: 0px;
    }
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题