Question

我通过普通的javascript实现轮播（不使用插件）。我想设置上一个和下一个按钮来控制幻灯片图像。

＆＃13;

var firstval = 0;

function Carousel() {
    firstval += 2;
    parent = document.getElementById('container-carousel');
    parent.style.left = "-" + firstval + "px";
    if (!(firstval % 150)) {
        setTimeout(Carousel, 3000);
        firstval = 0;
        var firstChild = parent.firstElementChild;
        parent.appendChild(firstChild);
        parent.style.left= 0;
        return;
    }
    runCarousel = setTimeout(Carousel, 10);
}
Carousel();

＆＃13;

        #wrapper-carousel {
            position: relative;
            width: 450px;
            height: 150px;
            margin: 0 auto;
            overflow: hidden;
        }
        #container-carousel {
            position: absolute;
            width: 450px;
            height: 150px;
        }
        .child {
            width: 150px;
            height: 150px;
            padding-top: 35px;
            float: left;
            text-align: center;
            font-size: 60px;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="wrapper-carousel">
    <div id="container-carousel">
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
    </div>
      <a class="left" href="#wrapper-carousel"  style="font-size:100px;z-index:3000;">&lsaquo;</a>
                                        <a class="right" href="#wrapper-carousel"  style="font-size:100px;z-index:3000">&rsaquo;</a>
 
</div>

＆＃13;

我想添加简单的按钮来控制这个轮播。我没有使用任何插件和任何框架轮播。

JsFiddle：https://jsfiddle.net/varunPes/wzkLjh8s/21/

Answer 1

理解你想要完成css修复

<div id="wrapper-carousel">
    <div id="container-carousel">
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
    </div>
      <a class="left" href="#wrapper-carousel"  style="font-size: 100px;z-index: 3050;float: left;position: relative;background: #F3F5F6;top:15px">&lsaquo;</a>
     <a class="right" href="#wrapper-carousel"  style="font-size: 100px;z-index: 3050;float: right;position: relative;background: #F3F5F6;top:15px">&rsaquo;</a>

</div>

Answer 2

没有插件的旋转木马。

＆＃13;

var firstval = 0;
var runSlider;

function Carousel() {
clearTimeout(runSlider);
    firstval += 2;
    parent = document.getElementById('container-carousel');
    parent.style.left = "-" + firstval + "px";
    if (!(firstval % 130)) {
        setTimeout(Carousel, 3000);
        firstval = 0;
        var firstChild = parent.firstElementChild;
        parent.appendChild(firstChild);
        parent.style.left= 0;
        return;
    }
    runCarousel = setTimeout(Carousel, 10);
}
Carousel();


function leftClick(){
firstval += 2;
    parent = document.getElementById('container-carousel');
    parent.style.left = "-" + firstval + "px";
    
    if (!(firstval % 130)) {
        
        firstval = 0;
        var firstChild = parent.firstElementChild;
        parent.appendChild(firstChild);
        parent.style.left= 0;
        return;
    }
    runSlider = setTimeout(leftClick, 10);
}

function rightClick(){
firstval += 2;
    parent = document.getElementById('container-carousel');
    parent.style.left =  firstval + "px";
    
    if (!(firstval % 130)) {
        
        firstval = 0;
        var firstChild = parent.firstElementChild;
        parent.appendChild(firstChild);
        parent.style.left= 0;
        return;
    }
    runSlider = setTimeout(rightClick, 10);
}

＆＃13;

 #wrapper-carousel {
            position: relative;
            width: 450px;
            height: 150px;
            margin: 0 auto;
            overflow: hidden;
            display:flex;
        }
        #main-carousel {
            position: relative;
            width: 450px;
            height: 150px;
            overflow:hidden;
        }
         #container-carousel {
            position: absolute;
            width: 450px;
            height: 150px;
        }
        .child {
            width: 130px;
            height: 150px;
            padding-top: 35px;
            float: left;
            text-align: center;
            font-size: 60px;
        }

＆＃13;

<div id="wrapper-carousel">
<a class="left" href="#wrapper-carousel"  style="font-size:100px;z-index:3000;" onclick="leftClick()">&lsaquo;</a>
<div id="main-carousel">
    <div id="container-carousel">
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
        </div></div>
  <a class="right" href="#wrapper-carousel"  style="font-size:100px;z-index:3000" onclick="rightClick()">&rsaquo;</a>
 
</div>

＆＃13;

使用简单的javascript旋转木马。

实现普通的javascript轮播。（没有插件）

2 个答案: