堆棧內存溢出
  簡體   English   中英

如何使反向滾動與我的“ Frankensteinian”自舉輪播中向“正確”方向的滾動相同？

[英]How to make reverse scrolling identical as one going to “right” direction on my “Frankensteinian” bootstrap carousel?

 原文  2016-08-11 05:19:28  8   1    javascript/ jquery/ twitter-bootstrap

問題描述

我的困境是如何使轉盤下方的滑塊以與從右到左相似的方式但以相反的方式旋轉？ 滑塊通過轉盤箭頭激活。 當按下（向右箭頭）時，滑塊可完美執行。 但是當它經過幾個周期后被左箭頭激活時，它就變成了草捆……我知道我很接近，只需要向正確的方向推一下就可以了……

這是我的jsfiddle： https ://jsfiddle.net/veljkos82/t2a0t9tf/94/以下是該函數的代碼，該函數應“適當”控制左箭頭的工作，但它不……我正在使用XAMPP v3 .2.2 ..

我的html： 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
  <script src="indicatorsofcarousel.js"></script>
  <link rel="stylesheet" type="text/css" href="indicatorsofcarousel.css">


</head>
<body>

<div class="container text-center">

  <br>
  <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false"><!-- Ako se ukloni .slide klasa onda nema animacije i koliko god da se brzo klikce na strelice karusel i donji slajdovi se savrseno poravnjaju. -->


    <!-- Wrapper for slides -->
    <div id="pics" class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img\img1.jpg" alt="Chania"><br><span class="toggle">0</span>
      </div>

      <div class="item">
        <img src="img\img2.jpg" alt="Chania"><br><span class="toggle">1</span>
      </div>

      <div class="item">
        <img src="img\img3.jpg" alt="Flower"><br><span class="toggle">2</span>
      </div>

      <div class="item">
        <img src="img\img4.jpg" alt="Flower"><br><span class="toggle">3</span>
      </div>

      <div class="item">
        <img src="img\img5.jpg" alt="Flower"><br><span class="toggle">4</span>
      </div>

      <div class="item">
        <img src="img\img6.jpg" alt="Flower"><br><span class="toggle">5</span>
      </div>

      <div class="item">
        <img src="img\img7.jpg" alt="Chania"><br><span class="toggle">6</span>
      </div>

      <div class="item">
        <img src="img\img8.jpg" alt="Chania"><br><span class="toggle">7</span>
      </div>

      <div class="item">
        <img src="img\img9.jpg" alt="Flower"><br><span class="toggle">8</span>
      </div>

      <div class="item">
        <img src="img\img10.jpg" alt="Flower"><br><span class="toggle">9</span>
      </div>

      <div class="item">
        <img src="img\img11.jpg" alt="Flower"><br><span class="toggle">10</span>
      </div>

      <div class="item">
        <img src="img\img12.jpg" alt="Flower"><br><span class="toggle">11</span>
      </div>

       <div class="item">
        <img src="img\img13.jpg" alt="Flower"><br><span class="toggle">12</span>
      </div>

      <div class="item">
        <img src="img\img14.jpg" alt="Flower"><br><span class="toggle">13</span>
      </div>

      <div class="item">
        <img src="img\img15.jpg" alt="Flower"><br><span class="toggle">14</span>
      </div>

      <div class="item">
        <img src="img\img16.jpg" alt="Flower"><br><span class="toggle">15</span>
      </div>

      <div class="item">
        <img src="img\img17.jpg" alt="Chania"><br><span class="toggle">16</span>
      </div>

      <div class="item">
        <img src="img\img18.jpg" alt="Chania"><br><span class="toggle">17</span>
      </div>

      <div class="item">
        <img src="img\img19.jpg" alt="Flower"><br><span class="toggle">18</span>
      </div>

      <div class="item">
        <img src="img\img20.jpg" alt="Flower"><br><span class="toggle">19</span>
      </div>

    </div>

    <!-- Left and right controls -->
    <a id="prev" onclick="left()" 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  id="next" onclick="right()" 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>
  <div class="text-center">
    <div class="pr"></div>
    <div class="lnk">


    <ol id="lista" class="faceless con1">
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="0"><a href="#"><img class="sl" src="img\img1.jpg" alt="Chania"><br><span class="toggle">0</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="1"><a href="#"><img class="sl" src="img\img2.jpg" alt="Chania"><br><span class="toggle">1</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="2"><a href="#"><img class="sl" src="img\img3.jpg" alt="Flower"><br><span class="toggle">2</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="3"><a href="#"><img class="sl" src="img\img4.jpg" alt="Flower"><br><span class="toggle">3</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="4"><a href="#"><img class="sl" src="img\img5.jpg" alt="Flower"><br><span class="toggle">4</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="5"><a href="#"><img class="sl" src="img\img6.jpg" alt="Flower"><br><span class="toggle">5</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="6"><a href="#"><img class="sl" src="img\img7.jpg" alt="Chania"><br><span class="toggle">6</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="7"><a href="#"><img class="sl" src="img\img8.jpg" alt="Chania"><br><span class="toggle">7</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="8"><a href="#"><img class="sl" src="img\img9.jpg" alt="Flower"><br><span class="toggle">8</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="9"><a href="#"><img class="sl" src="img\img10.jpg" alt="Flower"><br><span class="toggle">9</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="10"><a href="#"><img class="sl" src="img\img11.jpg" alt="Flower"><br><span class="toggle">10</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="11"><a href="#"><img class="sl" src="img\img12.jpg" alt="Flower"><br><span class="toggle">11</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="12"><a href="#"><img class="sl" src="img\img13.jpg" alt="Flower"><br><span class="toggle">12</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="13"><a href="#"><img class="sl" src="img\img14.jpg" alt="Flower"><br><span class="toggle">13</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="14"><a href="#"><img class="sl" src="img\img15.jpg" alt="Flower"><br><span class="toggle">14</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="15"><a href="#"><img class="sl" src="img\img16.jpg" alt="Flower"><br><span class="toggle">15</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="16"><a href="#"><img class="sl" src="img\img17.jpg" alt="Flower"><br><span class="toggle">16</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="17"><a href="#"><img class="sl" src="img\img18.jpg" alt="Flower"><br><span class="toggle">17</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="18"><a href="#"><img class="sl" src="img\img19.jpg" alt="Flower"><br><span class="toggle">18</span></a></li>
    <li class="ord_list_elem" data-target="#myCarousel" data-slide-to="19"><a href="#"><img class="sl" src="img\img20.jpg" alt="Flower"><br><span class="toggle">19</span></a></li>
    </ol>


    </div>

</div>

</div><br>


</body>
</html>

我的CSS： 

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 720px;
    margin: auto;
}

.tro{
    position: relative;

    width: 0px;
    height: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid brown;

    opacity: 0;
}

.sl{    
    margin: auto;
    width: 100px;   
}

.sl:hover{
    box-shadow: 1px 1px 10px #eaaeae;
   -webkit-box-shadow: 1px 1px 10px #eaaeae;
   -moz-box-shadow: 1px 1px 10px #eaaeae;
    border: 1px solid brown;
}

.faceless{
    list-style-type: none;
}

.ord_list_elem{
display:inline-block;
}

.con1{
    padding-top: 10px;
    width: 720px;
    height: 140px;
    overflow-y: hidden;
    white-space:nowrap;
    margin: 0 auto;
}

/*.pr{

    position: absolute;
    top: 670px;
    left: 110px;
    height: 30px;
    width: 720px;
    background-color: white;
    opacity: 1;
}*/

.carousel-control.left, .carousel-control.right {
    background-image: none
}

我的js： 

var clicksRight=0;
        var clicksLeft=0;
        var trini=0;
        var gog=0;
        var pret=0;
        var x=0;
        var y=0;
        var br=0;
        var index=0;
        var currentIndex=0;
        var clicks=0;
        var num=0;
        var mr=0;
        var tmp=0;
        var OldValue = 0;
$( document ).ready(function() {

  $( ".sl" ).click(function() { 
    gog=0;
    var width=$( ".sl" ).outerWidth();
    var corr=(width/100)*4.4;
    width+=corr;
    index = $( ".sl" ).index( this ); 
    var count = $('.item').length; 
    var cnt = $('.sl').length;

    document.getElementById("mix1").innerHTML=index;

    if(index!=0){
        currentIndex=index;
        clicksLeft=count-(count-currentIndex);
    }

    if(index>pret){

        if(index==3){
            gog=40;
        }

        if(index>3){
            gog=(width*(index-3))+40;
        }

        $(".con1").animate({scrollLeft: gog});
        pret=index;
    }

    if(index<pret){

        if(index==3){
            gog=40;
        }

        if(index>3){
            gog=(width*(index-3))+40;
        }

        $(".con1").animate({scrollLeft: gog});
        pret=index;
    }


    x=$(".sl").eq(index).offset().top; 
    y=$(".sl").eq(index).offset().left; 

    br=$(".con1").scrollLeft();
    clicksLeft=count-index;

});


});



function right(){
    gog=0;
    br=$(".con1").scrollLeft();
    var width=$( ".sl" ).outerWidth();
    currentIndex = $('div.active').index() + 1;
    var count = $('.item').length; 
    var cnt = $('.sl').length;
    var corr=(width/100)*4.4;
    width+=corr;
    var p1=document.getElementById("lista").scrollWidth;
    var p2=$("#lista").outerWidth();
    var p3=p1-p2;
    clicksRight+=1;

    if(br==0 && currentIndex>2){
        gog=br+((width-15)/2);
        $(".con1").scrollLeft(gog); 
    }

    if(br>0){
        gog=br+width;
        $(".con1").scrollLeft(gog);
    }

    if(br==p3 && currentIndex==count){
        gog=0;
        $(".con1").scrollLeft(gog);
        clicksRight=0;
    }

    clicksLeft=count-currentIndex;
    document.getElementById("mix").innerHTML=clicksLeft;
    document.getElementById("mix1").innerHTML=currentIndex;


}


function left(){
    gog==0;
    br=$(".con1").scrollLeft();
    var width=$( ".sl" ).outerWidth();
    var count = $('.item').length; 
    var cnt = $('.sl').length;
    var corr=(width/100)*4;
    width+=corr;
    var p1=document.getElementById("lista").scrollWidth;
    var p2=$("#lista").outerWidth();
    var p3=p1-p2;
    clicksLeft+=1;

    if(br==0 && clicksLeft==1){
        gog=p3;
        $(".con1").scrollLeft(gog);
        //alert("1");
        currentIndex=count;
    }

    if(clicksLeft>4 && br==p3){
        gog=br-width;
        $(".con1").scrollLeft(gog);
        //alert("2");
    }

    if(clicksLeft>4){
        gog=br-width;
        $(".con1").scrollLeft(gog);
        //alert("3");
    }

    if(currentIndex==0 && clicksRight>0){ 
        gog=p3;
        $(".con1").scrollLeft(gog);
        //alert("4");
    }

    if(clicksLeft>4 && clicksRight>0){ 
        gog=br-width;
        $(".con1").scrollLeft(gog);
        //alert("5");
    }


    if(clicksRight>0){
        currentIndex-=1;    
        //alert("6");
    }

    if(clicksRight==0 && currentIndex>=0){
        currentIndex=count-clicksLeft;  
        //alert("7");
    }

    if(currentIndex==count && clicksLeft){
            gog=p3;
            $(".con1").scrollLeft(gog);
            //alert("8");
    }

    if(currentIndex==0){
        clicksLeft=0;
        //alert("9");
    }


    document.getElementById("mix").innerHTML=clicksLeft;
    document.getElementById("mix1").innerHTML=currentIndex;
}




function funk(){
    var brt = $("#lista").find('img.sl:first'); // Ili var brt = $("#lista").find('img.sl') => brt[0]
    var count = $('.item').length; 

    document.getElementById("demo1").innerHTML="br: "+br+"px, currentIndex: "+currentIndex+", clicksLeft: "+clicksLeft;
}

function myFunction() {
    var elmnt = document.getElementById("lista");
    var x = elmnt.scrollLeft;
    document.getElementById ("demo").innerHTML = x;
}

1 個解決方案

解決方案1
 0 已采納  2016-08-11 05:30:09

沒有ID為mix1的元素，這就是javascript出現錯誤並中斷的原因。

這里是工作的jsfiddle與評論mix1線。 

function left() {

      if (index != clicks) {
        index = clicks;
      }
      clicks += 1;
      //document.getElementById("mix1").innerHTML = clicks;
      var gog1 = 0;
      var brt = $("#lista").find('img.sl:first');
      //(brt.offset().left==152 || brt.offset().left==55)
      var bry = $("#lista").find('img.sl:last');

      if (clicks > 4) {
        gog1 = $(".con1").scrollLeft() - 105;
        $(".con1").animate({
          scrollLeft: gog1
        });
      }



      if (($(".con1").scrollLeft()) == 0) {

        gog1 = 1396;
        $(".con1").animate({
          scrollLeft: gog1
        });

      }

      //document.getElementById("mix1").innerHTML = clicks;

    }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 "如果連續朝一個方向前進，您如何反轉球的方向？" 如何反轉 javascript 圖片輪播的方向？ 如何更改引導程序輪播方向 如何使圓形轉盤滑塊僅向一個方向變化？ 如何使Bootstrap旋轉木馬滑塊使用左右鼠標滑動 如何使Bootstrap Carousel固定在導航欄下方？ 在Bootstrap輪播中強制指示方向 如何使該輪播正常工作？ 如何使Bootstrap Carousel整個頁面全寬？ 如何調整我的平滑滾動JavaScript以忽略Bootstrap Carousel？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM