0
我有一段代碼，我稱之爲「滾動條」，它基本上將用戶從一個按鈕切換到另一個按鈕，並使用箭頭按鈕返回。它工作正常，當我不使用引導，但現在我試圖使用引導它不會工作。這裏是代碼：滾輪不能使用引導程序
/*START MINE SCROLLER CONTROL*/
#containerms {
position: absolute;
margin: 0px;
padding: 0px;
width: 49%;
height: 100%;
overflow: hidden;
}
.boxms {
position: absolute;
width: 50%;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1ms {
left: 50%;
}
.movems {
position:fixed;
z-index:2;
top:50%;
margin-top:-20px;
text-align:center;
padding:20px;
background:#fff;
color: #000;
}
.leftms {
cursor:pointer;
left:50%;
width: 1px;
height: 1px;
border-radius: 30px;
background: #BABABA;
color: #fff;
clear: both;
display: block;
text-align: center;
font-size: 20px;
line-height: 3px;
}
.rightms {
cursor:pointer;
right:1%;
width: 1px;
height: 1px;
border-radius: 30px;
background: #BABABA;
color: #fff;
clear: both;
display: block;
text-align: center;
font-size: 20px;
line-height: 3px;
}
ul{
list-style: none;
}
span.namems{
width: 150px;
text-align: center;
background: #ABA38F;
color: #fff;
padding: 5px;
}
/*END MINE SCROLLER CONTROL*/<div class="col-xs-6" id="green-line-l">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
\t \t \t \t \t <div class="row" style="height:100%;">
\t \t \t \t \t \t <div class="movems leftms circle" > < </div>
\t \t \t <div class="movems rightms circle" > > </div>
\t \t \t <div id="containerms">
\t \t \t \t <ul>
\t \t \t \t \t <li id="boxms1" class="boxms current"><span class="namems">Forest Floor</span>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t <input type="button" id="forestfloor" onclick="mine1Click()"></input>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms2" class="boxms"><span class="namems">Forest Cave</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms3" class="boxms"><span class="namems">Cave Atrium</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms4" class="boxms"><span class="namems">Deep tunnles</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms5" class="boxms"><span class="namems">The Dark Roads</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms6" class="boxms"><span class="namems">Abandonded Mine</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms7" class="boxms"><span class="namems">King's Tomb</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms8" class="boxms"><span class="namems">Underground Kingdom</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t <li id="boxms9" class="boxms"><span class="namems">Dragons Lair</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <input id="forestfloor"></input>
\t \t \t \t \t </li>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <script>
\t \t \t debugger
\t \t \t var i = 1;
\t \t \t $('.rightms').click(function() {
\t \t \t \t if (i < $("#containerms ul li").length) {
\t \t \t \t \t $("#boxms" + i).animate({
\t \t \t \t \t \t left: '-50%'
\t \t \t \t \t }, 400, function() {
\t \t \t \t \t \t var $this = $("#boxms" + i);
\t \t \t \t \t \t $this.css('leftms', '150%')
\t \t \t \t \t \t \t .appendTo($('.containerms'));
\t \t \t \t \t });
\t \t \t \t \t $("#boxms" + i).next().animate({
\t \t \t \t \t \t left: '50%'
\t \t \t \t \t }, 400);
\t \t \t \t \t i++;
\t \t \t \t }
\t \t \t });
\t \t \t $('.leftms').click(function() {
\t \t \t \t if (i > 1) {
\t \t \t \t \t $("#boxms" + i).animate({
\t \t \t \t \t \t left: '150%'
\t \t \t \t \t }, 400, function() {
\t \t \t \t \t \t var $this = $("#boxms" + i);
\t \t \t \t \t \t $this.css('rightms', '-150%')
\t \t \t \t \t \t \t .appendTo($('.containerms'));
\t \t \t \t \t });
\t \t \t \t \t $("#boxms" + i).prev().animate({
\t \t \t \t \t \t left: '50%'
\t \t \t \t \t }, 400);
\t \t \t \t \t i--;
\t \t \t \t }
\t \t \t });
\t \t \t </script>
\t \t </div>
\t \t
\t \t \t \t </div>
\t \t \t </div>我不知道什麼是錯的這個代碼，並正在尋找一些幫助。謝謝。
如果使用的是引導，你就能更好地運用這個 – Franco
轉盤你應該把CSS頭部和js在頁腳，也jQuery的必須先加載不會持續太久。您的自定義代碼也應該在載入窗口或準備好的文檔函數中調用。 – rgdesign
Bootstrap.js需要jquery。您在bootstrap.js之後加載jquery。在bootstrap.js之前，反轉這個順序並加載jquery會爲你解決這個問題。 –