Javascript 滑块移动不良_Javascript_Jquery_Html_Css

Javascript 滑块移动不良

javascript jquery html css

Javascript 滑块移动不良,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个我正在使用的滑块，每当我点击下一个或上一个按钮时，它都会以一种覆盖我网站某些元素的方式移动。我相信“面具”中的问题，我试着改变一下，但没有任何区别，知道是不是它导致了问题还是其他什么？有什么解决办法吗代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conte

我有一个我正在使用的滑块，每当我点击下一个或上一个按钮时，它都会以一种覆盖我网站某些元素的方式移动。我相信“面具”中的问题，我试着改变一下，但没有任何区别，知道是不是它导致了问题还是其他什么？有什么解决办法吗

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Gallery</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="">
<style>
       body {
    margin: 0;
}
#wrapper {
    width: 100%;
    height: 350px;
    /*position: absolute;*/
    top: 0;
    left: 0;
    background-color: white;
    overflow: hidden;
}
#nav p {
    position: absolute;
    top: 100px;
    cursor:pointer;
    color:grey;

}
#prev {
    left: 40px;
}
#next {
    right: 40px;
}
#mask {
    width: 50000px;
    height: 100%;
    background-color: white;
}
.item {
    width: 1200px;
    height: 100%;
    float: left;
    background-color: white;
}
.content img {
    height: 100px;
    width: 17%;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
}
.content {
    width: 50%;
    height: 220px;
    top: 20%;
    margin: auto;
    background-color: white;
    position: relative;
}
.content a {
    position: relative;
    top: -17px;
    left: 170px;
}
.selected {
    background: #fff;
    font-weight: 700;
}
.clear {
    clear:both;
}



        </style>
    </head>

    <body>
<div id="wrapper">
    <div id="nav">
        <h1><p id="prev">&lt;</p></h1>
        <h1><p id="next">&gt;</p></h1>
    </div>
    <div id="mask">
        <div id="item1" class="item"> <a name="item1"></a>

            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" alt="slot1" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
        <div id="item2" class="item">
            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" alt="slot2" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
        <div id="item3" class="item">
            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" alt="slot2" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
    </div>
</div>






<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
    var newItem = 0;
    var itemCount = $('.item').length;

    function shift(direction) {
        var $mask = $('#mask'),
            $items = $('.item'),
            currentItem = $mask.data('currentItem');

        if (currentItem === undefined) {
            currentItem = 0;
        }

        $mask.data('currentItem', newItem).animate({
            marginLeft: -newItem * $items.eq(0).width()
        });
    }

    $('#prev').click(function () {
        if (newItem === 0) {
            newItem = itemCount - 1;
        } else {
            newItem--;
        }
        return shift();
    });
    $('#next').click(function () {
        if (newItem === itemCount - 1) {
            newItem = 0;
        } else {
            newItem++;
        }
        return shift();
    });

    function resizePanel() {
        width = $(window).width();
        height = $(window).height();

        $('#wrapper, .item').css({
            width: width,
            height: height
        });
    }

    $(window).resize(function () {
        resizePanel();
    });
    resizePanel();
});
        </script>
    </body>
</html>


画廊
身体{
保证金：0；
}
#包装纸{
宽度：100%；
高度：350px；
/*位置：绝对位置*/
排名：0；
左：0；
背景色：白色；
溢出：隐藏；
}
#导航p{
位置：绝对位置；
顶部：100px；
光标：指针；
颜色：灰色；
}
#上{
左：40px；
}
#下一个{
右：40px；
}
#面具{
宽度：50000像素；
身高：100%；
背景色：白色；
}
.项目{
宽度：1200px；
身高：100%；
浮动：左；
背景色：白色；
}
.内容img{
高度：100px；
宽度：17%；
浮动：左；
右边距：10px；
边缘底部：10px；
}
.内容{
宽度：50%；
高度：220px；
最高：20%；
保证金：自动；
背景色：白色；
位置：相对位置；
}
.内容a{
位置：相对位置；
顶部：-17px；
左：170px；
}
.选定{
背景：#fff；
字号：700；
}
.清楚{
明确：两者皆有；
}


我已经修改了你的html：
<body>
<div id="wrapper">
    <div id="slider-container">
        <div id="nav">
            <p id="prev">&lt;</p>
            <p id="next">&gt;</p>
        </div>
        <div class="slider-view-area">
            <div id="mask">
                <div id="item1" class="item"> <a name="item1"></a>

                    <div class="content">
                        <img id="image1" src="http://placehold.it/350x150" alt="slot1" />
                        <img id="image2" src="http://placehold.it/350x150" />
                        <img id="image3" src="http://placehold.it/350x150" />
                        <img id="image4" src="http://placehold.it/350x150" />
                        <img id="image5" src="http://placehold.it/350x150" />
                        <img id="image6" src="http://placehold.it/350x150" />
                        <img id="image7" src="http://placehold.it/350x150" />
                        <img id="image8" src="http://placehold.it/350x150" />
                        <img id="image9" src="http://placehold.it/350x150" />
                        <img id="image10" src="http://placehold.it/350x150" />
                    </div>
                </div>
                <div id="item2" class="item">
                    <div class="content">
                        <img id="image1" src="http://placehold.it/350x150" alt="slot2" />
                        <img id="image2" src="http://placehold.it/350x150" />
                        <img id="image3" src="http://placehold.it/350x150" />
                        <img id="image4" src="http://placehold.it/350x150" />
                        <img id="image5" src="http://placehold.it/350x150" />
                        <img id="image6" src="http://placehold.it/350x150" />
                        <img id="image7" src="http://placehold.it/350x150" />
                        <img id="image8" src="http://placehold.it/350x150" />
                        <img id="image9" src="http://placehold.it/350x150" />
                        <img id="image10" src="http://placehold.it/350x150" />
                    </div>
                </div>
                <div id="item3" class="item">
                    <div class="content">
                        <img id="image1" src="http://placehold.it/350x150" alt="slot2" />
                        <img id="image2" src="http://placehold.it/350x150" />
                        <img id="image3" src="http://placehold.it/350x150" />
                        <img id="image4" src="http://placehold.it/350x150" />
                        <img id="image5" src="http://placehold.it/350x150" />
                        <img id="image6" src="http://placehold.it/350x150" />
                        <img id="image7" src="http://placehold.it/350x150" />
                        <img id="image8" src="http://placehold.it/350x150" />
                        <img id="image9" src="http://placehold.it/350x150" />
                        <img id="image10" src="http://placehold.it/350x150" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

我删除了导航元素周围的h1标记，因为您不应该使用标题标记进行显示更改，例如使图标看起来更大。为此，您应该使用css。在这种情况下，h1标记在语义上是不正确的，因为导航元素不是主标题
我刚刚去做了个快速修复。但是如果你想让滑动条成为页面中的一个独立组件，这就是你应该采取的方向
这里是JSFIDLE:您的JSFIDLE不包含任何其他元素，因此无法说明问题所在。请你在你的小提琴上再添加一个元素来说明你的问题好吗？@ArathiSreekumar看到了在消失之前，分隔符向左/右移动的方式。因此，他们正在传递页面中的其他元素。我想你之前问了一个关于一些导航单元的问题。所以这里的答案是相似的。我将尝试添加一些代码来演示。您需要将滑块逻辑与页面的其余部分分开。@ArathiSreekumar我感谢您的帮助谢谢您的帮助。但是有一个问题，如果我在JSFIDLE中重新调整结果选项卡的大小，当前选项卡旁边的其他分隔符会出现。为什么？调整大小时，您将窗口宽度设置为包装器和项目。我不知道这样做的目的，因为宽度无论如何是100%。但这可能与行为有关。我应该删除此功能吗？这里有一个修改，考虑到它周围的填充和空间：我认为可能需要它，或者需要大量css更改以使您的内容适合。因为在每个查看区域内，似乎有很多项目，这些项目可能会在微小的查看区域中被裁剪。最后一个问题是，您是如何操作使div在按钮之前消失的？
body {
    margin: 0;
}
#wrapper {
    background-color: blue;
    padding: 20px 0;
}

#slider-container {
    padding: 20px 50px;
    height: 350px;
    background-color: white;
    overflow: hidden;
    position: relative;
}

.slider-view-area {
    overflow: hidden;
}

#nav p {
    position: absolute;
    top: 100px;
    cursor:pointer;
    color:grey;

}
#prev {
    left: 20px;
    font-size: 30px;
}
#next {
    right: 20px;
    font-size: 30px;
}
#mask {
    width: 50000px;
    height: 100%;
    background-color: white;
}
.item {
    width: 1200px;
    height: 100%;
    float: left;
    background-color: white;
}
.content img {
    height: 100px;
    width: 17%;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
}
.content {
    width: 50%;
    height: 220px;
    top: 20%;
    margin: auto;
    background-color: white;
    position: relative;
}
.content a {
    position: relative;
    top: -17px;
    left: 170px;
}
.selected {
    background: #fff;
    font-weight: 700;
}
.clear {
    clear:both;
}