Javascript内容滑块

时间：2015-10-07 05:40:32

标签： javascript html css

在我输入html和css之前，我遇到了2个问题，请保留我的内容，我几乎是html和css的完全业余爱好者，并且不知道javascript的含义。

问题：

  • 我的第一个问题是内容方面没有下滑到下一个内容，但是当点击按钮时只会将内容超过一半（当你粘贴html和css时，你会看到我的意思进入页面。）

  • 我的第二个问题是按钮与彼此是水平的，我还想在将来添加更多

所以，如果有人能够通过javascript问题详细说明如何做到这一点，那就太棒了！

这是工作演示jsfiddle请退房

Working code

先谢谢你!! !! 

 // just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}
#wrapper {
    width: 5000px; 
    position: relative;
    left: 0px; 
    transition: left .5s ease-in-out;
}

.content {
    float: left; 
    width: 1250px;
    height: 600px;
    white-space: normal;
    background-repeat: no-repeat;
}

#itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}

#contentContainer {
    width: 98%;
    height: 600px;
    border: 5px black solid;
    overflow: hidden;
    margin-left: 1%;
    margin-right: 1%;
}
#navLinks {
    text-align: center;
    width: 22.5%;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 100px;
            border-radius: 10%;
            border: white 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }
#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}
<body bgcolor='black'>


<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">

        </div>
        <div id="itemTwo" class="content">

        </div>
        <div id="itemThree" class="content">

        </div>
        <div id="itemFour" class="content">

        </div>
    </div>
</div>
    <div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px"></li>
        <li class="itemLinks" data-pos="-550px"></li>
        <li class="itemLinks" data-pos="-1100px"></li>
        <li class="itemLinks" data-pos="-1650px"></li>
    </ul>
</div>
    </body>

3 个答案:

答案 0 :(得分：2)

要更新的主要领域; 1）你的“#contentContainer”。这基本上就是滑块的窗口。需要更新高度和宽度以匹配滑块项。 2）列表项的“data-pos”值。这应该与它们的宽度*相同，它们的索引从0开始，为负。 3）列表容器太窄。使它与#contentContainer一样宽。

CSS Changes:
#contentContainer {
  width: 1250px;
  height: 600px;
}
#navLinks {
  width:1250px;
}
#navLinks ul li {
  width:80px;
}

HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>

https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/

答案 1 :(得分：0)

我认为问题底部发布的CSS是main.css文件的内容。正如暗示在评论中指出的那样，尝试改变div的大小。特别是#wrapper，它由ID使用tha hash标记（#）指定：

#wrapper {
    width: 5000px; 
    position: relative;
    left: 0px; 
    transition: left .5s ease-in-out;
}

在javascript中引用：

var wrapper = document.querySelector("#wrapper");

将其分配给变量wrapper。它是5000像素宽。我认为，典型的桌面网络屏幕大约1200到1700像素宽，以供参考。这大约是.content所需的大小，由class使用.引用，以及每个显示“幻灯片”的内容 - 请记住正确显示的响应式网站手机和其他移动设备需要使用@media 查询来改变尺寸。

所以我会在适用的地方添加可见的css边框（用于开发并稍后删除）并更改数值变量（data-pos，#wrapper和.container尺寸）以找到最佳解决方案如上所述，jsfiddle是一个很好的资源，无论您是否需要公开分享。

对于应该连续显示的navlinks，请在包含列表（<ul>）的div上尝试以下CSS：

    #navLinks {
            text-align: center;
            width: 90.5%;
            border:1px solid white;
    }

border:1px solid white;会帮助您查看div的位置。然后在padding中尝试使用较小的#navLinks ul li尺寸，以确保页面上有空间可以水平显示。

我认为最后一步是调整<li class="itemLinks" data-pos="0px"></li>，其中data-pos属性只保存javascript在changePosition函数中使用的信息，这是最后几行的javascript。

eloquentjavascript.net是一个很好的免费资源来学习所有这些。

答案 2 :(得分：0)

<!DOCTYPE html>
<html>

<head>
<title>Dinosaurs 4 Kids!</title>

<style>
#wrapper {
    width: 98%;
    position: relative;
    left: 0px; 
    transition: left .5s ease-in-out;
}

.content {
    float: left; 
    width: 100%;
    height: 600px;
    white-space: normal;
    background-repeat: no-repeat;
    background-position: center;
}

#itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}

#contentContainer {
    width: 98%;
    height: 600px;
    border: 5px black solid;
    overflow: hidden;
    margin-left: 1%;
    margin-right: 1%;
}
#navLinks {
    text-align: center;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 20px;
            border-radius: 10%;
            border: white 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }
#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}
</style>
</head>

<body bgcolor='black'>


<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">

        </div>
        <div id="itemTwo" class="content">

        </div>
        <div id="itemThree" class="content">

        </div>
        <div id="itemFour" class="content">

        </div>
    </div>
</div>
    <div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px"></li>
        <li class="itemLinks" data-pos="-550px"></li>
        <li class="itemLinks" data-pos="-1100px"></li>
        <li class="itemLinks" data-pos="-1650px"></li>
    </ul>
</div>



<script>
 // just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}
</script>
</body>
</html>
相关问题
最新问题