Question

我在固定的背景图片上创建了一个内容滑块。当我尝试将其转换为全屏响应滑块时，它无法正常工作。实际上，我真的很困惑如何使其全屏和响应。当我做全宽时，第2部分的内容属于第1部分。

下面给出了代码段。

＆＃13;

function step(n) {
    //$(".content-switcher").hide();
    if (n == 1) {
        $(".content-switcher").animate({
            "left": "-600px"
        }, "slow");
    } else if (n == 2) {
        $(".content-switcher").animate({
            "left": "-1200px"
        }, "slow");
    } else if (n == 3) {
        $(".content-switcher").animate({
            "left": "0px"
        }, "slow");
    }
}

＆＃13;

.container {
    width: 600px;
    margin: 0 auto;
    outline: 1px solid red;
    overflow: hidden;
    background-image: url("https://static.vecteezy.com/system/resources/previews/000/093/696/original/vector-yellow-abstract-background.jpg");
}

.slider {
    width: 1800px;
}

.content-switcher {
    width: 600px;
    float: left;
    position: relative;
    top: 0;
    left: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple Content Slider</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <a href="#" onclick="step(1); return false;" style="color: #fff">Step 1</a>
        <a href="#" onclick="step(2); return false;" style="color: #fff">Step 2</a>
        <a href="#" onclick="step(3); return false;" style="color: #fff">Step 3</a>
        <div class="slider">
            <div class="content-switcher" id="content1">
                <p>
                    1Lorem ipsum dolor sit amet, consectetur adipisicing elit
                    . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.
                </p>
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
                <p>
                    1Lorem ipsum dolor sit amet, consectetur adipisicing elit
                    . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.
                </p>
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
                <p>
                    1Lorem ipsum dolor sit amet, consectetur adipisicing elit
                    . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.
                </p>
            </div>
            <div class="content-switcher" id="content2">
                <img src="http://images2.fanpop.com/image/user_images/Starmight350-808191_384_377.jpg">
                <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
            </div>
            <div class="content-switcher" id="content3">
                <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
            </div>
        </div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

＆＃13;

Answer 1

尝试这只是在JS和CSS中做了一些调整。

＆＃13;

function step(n){
  $(".content-switcher").css('display', 'none');
  $(".content-switcher").css('left', '100%');
  $('#content'+n).css('display', 'block');
  if(n==1){
    $(".content-switcher").animate({
      "left":"0px"
    },"slow");
  } else if(n==2){
    $(".content-switcher").animate({
      "left":"0px"
    },"slow");
  } else if(n==3){
    $(".content-switcher").animate({
      "left":"0px"
    },"slow");
  }
}

＆＃13;

.container{
  width: 100%;
  margin: 0 auto;
  outline:1px solid red;
  overflow: hidden;
  background-image: url("https://static.vecteezy.com/system/resources/previews/000/093/696/original/vector-yellow-abstract-background.jpg");
}
.slider{ width: 100%;}
.content-switcher{
  width: 100%;
  float: left;
  position: relative;
  top:0;
  left: 100%;
  display: none;
}
.content-switcher:first-child {
  left: 0;
  display:block;
}

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Simple Content Slider</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <a href="#" onclick="step(1); return false;" style="color: #fff">Step 1</a>
    <a href="#" onclick="step(2); return false;" style="color: #fff">Step 2</a>
    <a href="#" onclick="step(3); return false;" style="color: #fff">Step 3</a>
    <div class="slider">
      <div class="content-switcher" id="content1">
        <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit
      . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
        <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit
      . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
        <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit
      . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
      </div>
      <div class="content-switcher" id="content2">
        <img src="http://images2.fanpop.com/image/user_images/Starmight350-808191_384_377.jpg">
        <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
      </div>
      <div class="content-switcher" id="content3">
        <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
      </div>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

＆＃13;

Answer 2

您需要将滑块容器应用于100％宽度并从正文中删除边距

body{ 
 margin: 0; 
}
.container{
  width: 100%;
  outline: none;
}

全屏滑块不工作

2 个答案: