JavaScript轮播无法正常工作

Question

So im trying to make a carousel full screen for a presentation. 因此，即时通讯正试图使全屏旋转木马进行演示。 Im not a pro coder im in a phase of learning. 我不是处于学习阶段的专业程序员。 I have this code and im having as you can see and error and the carousel is all broken and i dont know why. 我有这段代码，即时消息如您所见和错误，轮播已全部损坏，我不知道为什么。 I could appreciate some guidance or help. 我将不胜感激一些指导或帮助。

 var $item = $('.carousel .item'); var $wHeight = $(window).height(); $item.height($wHeight); $item.addClass('full-screen'); var $numberofSlides = $('.item').length; var $currentSlide = Math.floor((Math.random() * $numberofSlides)); $('.carousel-indicators li').each(function(){ var $slideValue = $(this).attr('data-slide-to'); if($currentSlide == $slideValue) { $(this).addClass('active'); $item.eq($slideValue).addClass('active'); } else { $(this).removeClass('active'); $item.eq($slideValue).removeClass('active'); } }); $('.carousel img').each(function() { var $src = $(this).attr('src'); var $color = $(this).attr('data-color'); $(this).parent().css({ 'background-image' : 'url(' + $src + ')', 'background-color' : $color }); $(this).remove(); }); $(window).on('resize', function (){ $wHeight = $(window).height(); $item.height($wHeight); }); $('.carousel').carousel({ interval: 6000, pause: "false" });

 h3 { display: inline-block; padding: 10px; background: #B9121B; border-top-left-radius: 10px; border-top-right-radius: 10px; } .full-screen { background-size: cover; background-position: center; background-repeat: no-repeat; }

 <!DOCTYPE html> <html> <head> <script src="sliderjava.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="sliderstyle.css"> </head> <body> <div id="mycarousel" class="carousel slide" data-ride="carousel"> <!-- Indicadores --> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> <li data-target="#mycarousel" data-slide-to="3"></li> <li data-target="#mycarousel" data-slide-to="4"></li> </ol> <!-- Slides --> <div class="carousel-inner" role="listbox"> <div class="item"> <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image"> <div class="carousel-caption"> <h3>First Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image"> <div class="carousel-caption"> <h3>Second Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image"> <div class="carousel-caption"> <h3>Third Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image"> <div class="carousel-caption"> <h3>Fourth Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image"> <div class="carousel-caption"> <h3>Fifth Image</h3> </div> </div> </div> <!-- Controlos --> <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body> </html>

Answer 1

请添加jquery引用，并且该引用应该在页面中的carouse脚本之前。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>

Answer 2

You are using bootstraps's carousel but you have not attached anything necessary to make it work unfortunately. 您正在使用bootstraps的轮播，但是不幸的是，您没有附加任何必需的东西。 Please make the following things to make your carousel work. 请进行以下操作以使轮播工作。

Attach Bootstrap's css. 附加Bootstrap的CSS。
Attach jQuery library. 附加jQuery库。
Attach Bootstrap's javascript. 附加Bootstrap的javascript。

 var $item = $('.carousel .item'); var $wHeight = $(window).height(); $item.height($wHeight); $item.addClass('full-screen'); var $numberofSlides = $('.item').length; var $currentSlide = Math.floor((Math.random() * $numberofSlides)); $('.carousel-indicators li').each(function(){ var $slideValue = $(this).attr('data-slide-to'); if($currentSlide == $slideValue) { $(this).addClass('active'); $item.eq($slideValue).addClass('active'); } else { $(this).removeClass('active'); $item.eq($slideValue).removeClass('active'); } }); $('.carousel img').each(function() { var $src = $(this).attr('src'); var $color = $(this).attr('data-color'); $(this).parent().css({ 'background-image' : 'url(' + $src + ')', 'background-color' : $color }); $(this).remove(); }); $(window).on('resize', function (){ $wHeight = $(window).height(); $item.height($wHeight); }); $('.carousel').carousel({ interval: 6000, pause: "false" });

 h3 { display: inline-block; padding: 10px; background: #B9121B; border-top-left-radius: 10px; border-top-right-radius: 10px; } .full-screen { background-size: cover; background-position: center; background-repeat: no-repeat; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!DOCTYPE html> <html> <head> <script src="sliderjava.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="sliderstyle.css"> </head> <body> <div id="mycarousel" class="carousel slide" data-ride="carousel"> <!-- Indicadores --> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> <li data-target="#mycarousel" data-slide-to="3"></li> <li data-target="#mycarousel" data-slide-to="4"></li> </ol> <!-- Slides --> <div class="carousel-inner" role="listbox"> <div class="item"> <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image"> <div class="carousel-caption"> <h3>First Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image"> <div class="carousel-caption"> <h3>Second Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image"> <div class="carousel-caption"> <h3>Third Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image"> <div class="carousel-caption"> <h3>Fourth Image</h3> </div> </div> <div class="item"> <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image"> <div class="carousel-caption"> <h3>Fifth Image</h3> </div> </div> </div> <!-- Controlos --> <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body> </html>

JavaScript轮播无法正常工作

问题描述

2 个解决方案

解决方案1
1 2016-05-31 10:53:52

解决方案2
0 2016-05-31 11:03:58

JavaScript轮播无法正常工作

问题描述

2 个解决方案

解决方案1 1 2016-05-31 10:53:52

解决方案2 0 2016-05-31 11:03:58

解决方案1
1 2016-05-31 10:53:52

解决方案2
0 2016-05-31 11:03:58