jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap Carousel不会从一张图片滑动到另一张图片大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
旋转木马不会从一张图片滑到另一张图片.

这是我的代码

<!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,initialscale=1.0" />
<title>Economic Prosperity - The No.1 minecraft Economy Server!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<style>

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 400px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767pX) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

</style>
</head>
<body>

    <div class=" navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a href="#" class="brand">Economic Prosperity</a>

                        <ul class="nav pull-left">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Forum</a></li>
                            <li><a href="#">Vote</a></li>
                            <li><a href="#">Donate</a></li>
                            <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Server Status:</b></a></li>
                            <li><a href="#" style="color:#00CC00"><b>Online</b></a></li>
                        </ul>

                        <div class="nav pull-right">
                        <a class="btn btn-priMary">Log In</a>
                        </div>
                </div>    
            </div>
        </div>
    <div class="container" style="width:100%;"> <!--Start of Carousel -->
        <section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">



            <div class="active item">
                <img src="http://fc07.deviantart.net/fs71/f/2010/299/f/6/minecraft_cave_by_harryisland-d31jtwd.jpg" alt="Slide1" />
            </div>
            <div class="item">
                <img src="http://fc05.deviantart.net/fs70/i/2013/066/6/d/minecraft_grass_BACkground_by_lastvoltage-d5x9vzb.png" alt="Slide2" />
            </div>
            <div class="item">
                <img src="http://img16.imageshack.us/img16/4206/tapeta16x9.png" alt="Slide3" />
            </div><div class="carousel-caption" >
            <h1 style="color:#999">EcoPro - The No.1 Server deDicated to Economy!</h1>
            <p class="lead">Sell your items,Trade with players,sell on the auction and even set up your own shop in a city!</p>

        </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
</section>    
    </div> <!--End of Carousel -->

    <div class="hero-unit" style="width:90%; margin-right:auto; margin-left:auto;"> <!-- Start Hero -->
    <h2>@R_675_10112@ is EcoPro all about?</h2>
    <p>We aim to provide the best server out there with the sole main aim of gaining wealth to purchase benefits. Our server is not just your standard server,we put effort,time and skill into the creation of it. The sole aim of this server is to entertain YOU as best it can. The server is 100% non profit,so all of the donations recieved go sTraight BACk into the server to add to the quality of your gaming experience!
    <p><a href="#" class="btn btn-info">Tell me more!</a></p>
    </div> <!-- End Hero Unit -->

    <div class="container" style="width:400px; float:left; margin-left:2%"> <!-- Server Features -->

    <div class="well">

        <h3>The Server's main Features:</h3>
        <p>
        <li>Economy (Duh!)</li>
        <li>Custom World</li>
        <li>Cities</li>
        <li>Wealth based ranks</li>
        <li>McMMo + Spells + Shops + More!</li>
        </p>

    </div>
    </div> <!-- End server features -->

    <div class="container">

    <img src="" width="140px" height="140px" class="img-circle" />

    </div>


<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
// Load this when the DOM is ready
$(function(){
  // You used .myCarousel here. 
  // That's the class SELEctor not the id SELEctor,// which is #myCarousel
  $('#myCarousel').carousel();
});
</script>

</body>
</html>

我只需要按钮工作,我已经看了很久,并不知道出了什么问题.我也看了其他答案,他们没有帮助.

解决方法

你已经包含了两个jQuery文件,你需要删除一个.

此外,你需要在包含项目的div中放置带有类旋转木马标题的div,尽管我不确定.

只要您不希望滑块自行移动,您也可以删除页面底部的javascript.

有了这个变化,滑块似乎正常工作,你可以看一下JS Bin代码,也看看full screen demo

大佬总结

以上是大佬教程为你收集整理的jquery – Bootstrap Carousel不会从一张图片滑动到另一张图片全部内容,希望文章能够帮你解决jquery – Bootstrap Carousel不会从一张图片滑动到另一张图片所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。