javascript - 纯 JavaScript 轮播 - 限制 style.left 值更改为动态最大值

Question

我正在使用纯 Javascript 从头开始​​创建一个轮播，并且需要纯 Javascript 解决方案，严格没有 JQuery。

去除html&body等后轮播的html布局如下；

轮播.php

<p class="ca_width"></p>
<p class="cw_width"></p>
<p class="cc_width"></p>
<p class="li_width"></p>
<p class="lftamount"></p>

<div class="box">


<div class="carousel">
    <div class="padding">

        <table class="pagination-container">
            <tr>
                <td class="left"><a class="pagination padding-small" onmouseover="carousel_left(this)">&#60;</a></td>
                <td class="right"><a class="pagination padding-small" onmouseover="carousel_right(this)">&#62;</a></td>
            <tr>
        </table>

        <div class="carousel-wrap clearfix">

            <ul class="carousel-container">

                <li><img src="http://21stcenturylovetriangle.files.wordpress.com/2012/07/sexy-woman.jpg?w=470"/></li><!--
                --><li><img src="http://gnews.com/wp-content/uploads/2010/04/wii-fit-fall-turns-british-woman-into-sex-addict-1.jpg"/></li><!--
                --><li><img src="http://healthyceleb.com/wp-content/uploads/2012/05/rosie_jones_sexy.jpg"/></li><!--
                --><li><img src="http://thechive.files.wordpress.com/2011/06/sexy-fit-women-7.jpg"/></li><!--
                --><li><img src="http://www.crazyleafdesign.com/blog/wp-content/uploads/2012/09/31.jpg?ce0830"/></li><!--
                --><li><img src="http://www.crazyleafdesign.com/blog/wp-content/uploads/2012/09/8.jpg?ce0830"/></li>

            </ul>

        </div>

    </div>

</div>


</div>

上述html代码的css如下；

轮播.css

*
{
    padding:0;
    margin:0;
}

.box
{
    width:400px;
    margin-left:auto;
    margin-right:auto;       
}

/*-----------------------------------*/

.carousel
{
    height:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    border: solid thin;
    background: #F1F1F1;
}

.carousel-wrap
{
    margin-left:auto;
    margin-right:auto;
    display:block;
    height:200px;
    border:solid thin;
    background:white;
}

.carousel-container
{
    list-style:none;
    height:200px;
    background:cyan;
    position:absolute;
}

.carousel-container li
{
    height:200px;
    //width:200px;
    background: red;
    display:inline-block;
    vertical-align:top;
}

.carousel-container li img
{
    height:200px;
    width:100%;
}

/*-----------------------------------*/

.pagination-container
{
    width:100%;
}

.pagination-container tr
{
    width:100%;
}   

.pagination-container td
{
    width:50%;
    padding-top:8px;
    padding-left:8px;
    padding-right:8px;
}

.pagination
{
    color:white;
    text-align:center;
    border-radius: 50%;
    line-height:25px;
    width:25px;
    height:25px;
    background:black;
}

.left
{
    text-align:left;
}

.right
{
    text-align:right;
}

/*-----------------------------------*/

.padding
{
    padding:10px;
}

.padding-small
{
    padding:4px;
}

轮播的Javascript如下；

核心.php

var ca_width; // Carousel width
var cw_width; // Carousel wrap width
var cc_width; // Carousel container width
var li_width; // Carousel container li width
var licount;  // Number of li in Carousel container

var i, obj, w;

window.onload = function () 
{
    var ca_obj = document.getElementsByClassName('carousel')[0];
    var cw_obj = document.getElementsByClassName('carousel-wrap')[0];
    var cc_obj = document.getElementsByClassName('carousel-container')[0];

    ca_width = ca_obj.offsetWidth; // Carousel width
    cw_width = cw_obj.offsetWidth; // Carousel wrap width
    cc_width = cc_obj.offsetWidth; // Carousel container width

    liobj = document.querySelectorAll('.carousel-container li');

    for(i = 0; i < liobj.length;i++)
    {
        obj = liobj[i];
        obj.style.width = cw_width/2+"px";
    }

    li_width = liobj.item(0).offsetWidth;

    var style = getComputedStyle(cc_obj);
    var left = style.getPropertyValue("left");

    lftamount = left;

    document.getElementsByClassName('ca_width')[0].innerHTML = "Carousel Width: "+ca_width+"px";
    document.getElementsByClassName('cw_width')[0].innerHTML = "Carousel Wrap Width: "+cw_width+"px";
    document.getElementsByClassName('cc_width')[0].innerHTML = "Carousel Container Width: "+cc_width+"px";
    document.getElementsByClassName('li_width')[0].innerHTML = "Carousel Container li Width: "+li_width+"px";
    document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount;

}

function carousel_left(item) 
{
    var cc_obj = document.getElementsByClassName('carousel-container')[0];
    var style = getComputedStyle(cc_obj);
    var left = parseInt(style.getPropertyValue("left"));
    var newleft = left - li_width;

    for(i = left; i > newleft; i--)
    {
        cc_obj.style.left = i+"px";

        lftamount = left;
        document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount;

    }


}

function carousel_right(item)
{

    var cc_obj = document.getElementsByClassName('carousel-container')[0];
    var style = getComputedStyle(cc_obj);
    var left = parseInt(style.getPropertyValue("left"));
    var newleft = parseInt(left) + li_width;

    for(i = left; i < newleft; i++)
    {

        cc_obj.style.left = i+"px";

        lftamount = left;
        document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount;
    }
}

轮播是一个原型(prototype)，它处于开发生命周期的开发阶段。

此时，轮播按照我预期的方式工作，我遇到的问题是在 carousel_right() 和 carousel_left() 函数内部。

carousel_left()

for(i = left; i > newleft; i--)
{
    cc_obj.style.left = i+"px";

    lftamount = left;
    document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount;

}

carousel_right()

for(i = left; i < newleft; i++)
{

    cc_obj.style.left = i+"px";       

    lftamount = left;
    document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount;
}

我希望限制 max style.left 以阻止轮播容器 ul 向两侧移动太远。因此，一旦第一个图像出现在 View 中或最后一个图像出现在 View 中，style.left 将停止添加。

换句话说，我需要根据其 style.left 值 + 或 - 来限制 carousel-container ul 的水平移动，该值基于 carousel-container ul 中 li 的动态数量。

任何帮助将不胜感激，至于 JsFiddle，有一个可用版本 http://jsfiddle.net/xxwatcherxx/m7amga08/5/但我无法使用 jsFiddle 触发 carousel_left() 和 carousel_right() 函数。轮播在我的开发服务器上运行良好，我不使用 jsFiddle，抱歉...

还有一些 CSS 问题我需要解决，因此 carousel-container ul 隐藏在 carousel-wrap div 后面...如果您知道如何解决这些问题，请随时发表评论，我会自己修复它们，但是如果其他人正在考虑使用此代码，他们可能需要帮助...

Answer 1

小改动后轮播的Javascript如下；

核心.php

var ca_width; // Carousel width
var cw_width; // Carousel wrap width
var cc_width; // Carousel container width
var li_width; // Carousel container li width

var currentStep=0;
var countSlides;

var i, obj, w;

window.onload = function () 
{
    var ca_obj = document.getElementsByClassName('carousel')[0];
    var cw_obj = document.getElementsByClassName('carousel-wrap')[0];
    var cc_obj = document.getElementsByClassName('carousel-container')[0];

    ca_width = ca_obj.offsetWidth; // Carousel width
    cw_width = cw_obj.offsetWidth; // Carousel wrap width
    cc_width = cc_obj.offsetWidth; // Carousel container width

    liobj = document.querySelectorAll('.carousel-container li');

    for(i = 0; i < liobj.length;i++)
    {
        obj = liobj[i];
        obj.style.width = cw_width/2+"px";
    }

    li_width = liobj.item(0).offsetWidth;
    countSlides=liobj.length;

    var style = getComputedStyle(cc_obj);
    var left = parseInt(style.getPropertyValue("left"));

    lftamount = left;

    document.getElementsByClassName('ca_width')[0].innerHTML = "Carousel Width: "+ca_width+"px";
    document.getElementsByClassName('cw_width')[0].innerHTML = "Carousel Wrap Width: "+cw_width+"px";
    document.getElementsByClassName('cc_width')[0].innerHTML = "Carousel Container Width: "+cc_width+"px";
    document.getElementsByClassName('li_width')[0].innerHTML = "Carousel Container li Width: "+li_width+"px";
    document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount+"px";

};

function carousel_left(item) 
{
    if(currentStep<=2-countSlides) return;
    currentStep--;

    var cc_obj = document.getElementsByClassName('carousel-container')[0];
    var style = getComputedStyle(cc_obj);
    var left = parseInt(style.getPropertyValue("left"));
    var newleft = left - li_width;

    cc_obj.style.left = newleft+"px";


    lftamount = left;
    document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount+"px";
    cc_width = cc_obj.offsetWidth;
    document.getElementsByClassName('cc_width')[0].innerHTML = "Carousel Container Width: "+cc_width+"px";

}

function carousel_right(item)
{
    if(currentStep>=0) return;
    currentStep++;

    var cc_obj = document.getElementsByClassName('carousel-container')[0];
    var style = getComputedStyle(cc_obj);
    var left = parseInt(style.getPropertyValue("left"));
    var newleft = left + li_width;

    cc_obj.style.left = newleft+"px";

    lftamount = left;
    document.getElementsByClassName('lftamount')[0].innerHTML = "Carousel Container Left: "+lftamount+"px";
    cc_width = cc_obj.offsetWidth;
    document.getElementsByClassName('cc_width')[0].innerHTML = "Carousel Container Width: "+cc_width+"px";   

}

我删除了 carousel_left() 和 carousel_right() 中的 for 循环，因为它会导致对齐问题，因此 carousel_left() 和 carousel_right() 函数最终如下；

carousel_left()

function carousel_left(item) 
{
    if(currentStep<=2-countSlides) return;
    currentStep--;

    var cc_obj = document.getElementsByClassName('carousel-container')[0];
    var style = getComputedStyle(cc_obj);
    var left = parseInt(style.getPropertyValue("left"));
    var newleft = left - li_width;

    cc_obj.style.left = newleft+"px";

}

carousel_right()

function carousel_right(item)
{
    if(currentStep>=0) return;
    currentStep++;

    var cc_obj = document.getElementsByClassName('carousel-container')[0];
    var style = getComputedStyle(cc_obj);
    var left = parseInt(style.getPropertyValue("left"));
    var newleft = left + li_width;

    cc_obj.style.left = newleft+"px";

}

使用这个 Javascript，一旦旋转木马容器 ul 左右移动，一切都会排列起来...它几乎是一个完整且极其简单的旋转木马...在上面的示例中，我只是简单地删除了更新输出的部分carousel.php 上的标记用于调试，使其易于阅读，仅需要所需的主要部分。

如果您想从头开始构建自己的旋转木马，这段代码应该可以让某人开始一个没有 JQuery 的简单的旋转木马......

这是一个 jsFiddle http://jsfiddle.net/xxwatcherxx/m7amga08/11/虽然就像我之前提到的 carousel_left() 和 carousel_right() 函数不会在 jsFiddle 中触发，但它可以在远离 jsFiddle 的开发服务器上运行。