幻灯片菜单最后2个子弹无效

时间：2016-04-06 21:07:15

标签： html css css3

我有一个简单的幻灯片菜单，只使用CSS，用于我的学校项目。

我在博客上找到了一个教程，我想在网站上添加2张额外的幻灯片，子弹出现，在它们之间滑动工作，但在选择时没有显示任何内容。

以下是我所做的：

@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
 * {
  margin: 0;
  padding: 0;
}
body {
  background-color: #666;
}
h1 {
  color: #333;
  text-shadow: 1px 1px #999;
  font-size: 40px;
  font-family: Archivo Narrow;
  margin: 40px;
  text-align: center;
}
.slider {
  display: block;
  height: 600px;
  min-width: 260px;
  max-width: 1200px;
  margin: auto;
  margin-top: 10px;
  position: relative;
}
.sliderinner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.sliderinner>ul {
  list-style: none;
  height: 100%;
  width: 500%;
  overflow: hidden;
  position: relative;
  left: 0px;
  -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sliderinner>ul>li {
  width: 20%;
  height: 600px;
  float: left;
  position: relative;
}
.sliderinner>ul>li>img {
  margin: auto;
  height: 100%;
}
.slider input[type=radio] {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 100;
  visibility: hidden;
}
.slider label {
  position: absolute;
  left: 50%;
  bottom: -45px;
  z-index: 100;
  width: 12px;
  height: 12px;
  background-color: #ccc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
  -webkit-transition: background-color .2s;
  -moz-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
}
.slider input[type=radio]#control1:checked~label[for=control1] {
  background-color: #333;
}
.slider input[type=radio]#control2:checked~label[for=control2] {
  background-color: #333;
}
.slider input[type=radio]#control3:checked~label[for=control3] {
  background-color: #333;
}
.slider input[type=radio]#control4:checked~label[for=control4] {
  background-color: #333;
}
.slider input[type=radio]#control5:checked~label[for=control5] {
  background-color: #333;
}
.slider input[type=radio]#control6:checked~label[for=control6] {
  background-color: #333;
}
.slider input[type=radio]#control7:checked~label[for=control7] {
  background-color: #333;
}
.slider label[for=control1] {
  margin-left: -54px
}
.slider label[for=control2] {
  margin-left: -36px
}
.slider label[for=control3] {
  margin-left: -18px
}
.slider label[for=control5] {
  margin-left: 18px
}
.slider label[for=control6] {
  margin-left: 36px
}
.slider label[for=control7] {
  margin-left: 54px
}
.slider input[type=radio]#control1:checked~.sliderinner>ul {
  left: 0
}
.slider input[type=radio]#control2:checked~.sliderinner>ul {
  left: -100%
}
.slider input[type=radio]#control3:checked~.sliderinner>ul {
  left: -200%
}
.slider input[type=radio]#control4:checked~.sliderinner>ul {
  left: -300%
}
.slider input[type=radio]#control5:checked~.sliderinner>ul {
  left: -400%
}
.slider input[type=radio]#control6:checked~.sliderinner>ul {
  left: -500%
}
.slider input[type=radio]#control7:checked~.sliderinner>ul {
  left: -600%
}
.description {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: Archivo Narrow;
  z-index: 1000;
}
.description-text {
  background-color: rgba(0, 0, 0, .8);
  padding: 10px;
  top: 0;
  size: 40px;
  z-index: 4;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  color: #fff;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link href="sliderstyle.css" type="text/css" rel="stylesheet">
</head>

<body>
  <h1>"Why Should I Learn English?" - 10 Compelling Reasons for EFL Learners</h1>
  <div class="slider">

    <input type="radio" id="control1" name="controls" checked="checked" />
    <label for="control1"></label>
    <input type="radio" id="control2" name="controls" />
    <label for="control2"></label>
    <input type="radio" id="control3" name="controls" />
    <label for="control3"></label>
    <input type="radio" id="control4" name="controls" />
    <label for="control4"></label>
    <input type="radio" id="control5" name="controls" />
    <label for="control5"></label>
    <input type="radio" id="control6" name="controls" />
    <label for="control6"></label>
    <input type="radio" id="control7" name="controls" />
    <label for="control7"></label>


    <div class="sliderinner">
      <ul>
        <li>
          <img src="image1.jpg" width="1200px" height="600px">
          <div class="description">

            <div class="description-text">
              <h2>English is one of the most widely spoken languages</h2>
              <p>Although it comes....
              </p>
            </div>
          </div>
        </li>
        <li>
          <img src="image2.jpg" height="600px" width="1200">
          <div class="description">

            <div class="description-text">
              <h2>English will open up more opportunities for you</h2>
              <p>Being able ....</p>
            </div>
          </div>
        </li>
        <li>
          <img src="image3.jpg" width="1200px" height="600px">
          <div class="description">

            <div class="description-text">
              <h2>English gives you access to some of the world's best universities</h2>
              <p>English is widely ....</p>
            </div>
          </div>
        </li>
        <li>
          <img src="image4.jpg" width="1200px" height="600px">
          <div class="description">

            <div class="description-text">
              <h2>English is the language of some of the world's greatest literature</h2>
              <p>If you learn English...</p>
            </div>
          </div>
        </li>
        <li>
          <img src="image5.jpg" width="1200px" height="600px">
          <div class="description">

            <div class="description-text">
              <h2>English gives you wider access to knowledge</h2>
              <p>Did you know that...</p>
            </div>
          </div>
        </li>
        <li>
          <img src="images/6.jpg" />
          <div class="description">

            <div class="description-text">
              <h2>English is a fantastic intellectual challenge</h2>
              <p>English is undoubtedly...</p>
            </div>
          </div>
        </li>
        <li>
          <img src="images/7.jpg" />
          <div class="description">

            <div class="description-text">
              <h2>English allows you to get more from popular culture</h2>
              <p>The world's highest....</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!--slider-->
</body>

</html>

</body>

</html>

2 个答案:

答案 0 :(得分：3)

在你有5个控件之前，所以你的li只有20%（100/5 = 20％），但现在因为你有7个控件你需要做这个计算：100/7 = 14.28 ％，所以在li中更改此值（或在下面的评论中由@Pangloss指出，您可以改为使用width:calc(100% / 7)）

另外，在ul更改每个100%的已检查位置，以便将ul设置为width:700%以获得7个控件

只是旁注：避免使用width / height HTML标记，而是在CSS中使用它们。

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
 * {
  margin: 0;
  padding: 0;
}
body {
  background-color: #666;
}
h1 {
  color: #333;
  text-shadow: 1px 1px #999;
  font-size: 40px;
  font-family: Archivo Narrow;
  margin: 40px;
  text-align: center;
}
.slider {
  display: block;
  height: 600px;
  min-width: 260px;
  max-width: 1200px;
  margin: auto;
  margin-top: 10px;
  position: relative;
}
.sliderinner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.sliderinner>ul {
  list-style: none;
  height: 100%;
  width: 700%;
  overflow: hidden;
  position: relative;
  left: 0px;
  -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sliderinner>ul>li {
  width: calc(100% / 7);
  height: 600px;
  float: left;
  position: relative;
}
.sliderinner>ul>li>img {
  margin: auto;
  height: 100%;
  max-width: 100%
}
.slider input[type=radio] {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 100;
  visibility: hidden;
}
.slider label {
  position: absolute;
  left: 50%;
  bottom: -45px;
  z-index: 100;
  width: 12px;
  height: 12px;
  background-color: #ccc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
  -webkit-transition: background-color .2s;
  -moz-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
}
.slider input[type=radio]#control1:checked~label[for=control1] {
  background-color: #333;
}
.slider input[type=radio]#control2:checked~label[for=control2] {
  background-color: #333;
}
.slider input[type=radio]#control3:checked~label[for=control3] {
  background-color: #333;
}
.slider input[type=radio]#control4:checked~label[for=control4] {
  background-color: #333;
}
.slider input[type=radio]#control5:checked~label[for=control5] {
  background-color: #333;
}
.slider input[type=radio]#control6:checked~label[for=control6] {
  background-color: #333;
}
.slider input[type=radio]#control7:checked~label[for=control7] {
  background-color: #333;
}
.slider label[for=control1] {
  margin-left: -54px
}
.slider label[for=control2] {
  margin-left: -36px
}
.slider label[for=control3] {
  margin-left: -18px
}
.slider label[for=control5] {
  margin-left: 18px
}
.slider label[for=control6] {
  margin-left: 36px
}
.slider label[for=control7] {
  margin-left: 54px
}
.slider input[type=radio]#control1:checked~.sliderinner>ul {
  left: 0
}
.slider input[type=radio]#control2:checked~.sliderinner>ul {
  left: -100%
}
.slider input[type=radio]#control3:checked~.sliderinner>ul {
  left: -200%
}
.slider input[type=radio]#control4:checked~.sliderinner>ul {
  left: -300%
}
.slider input[type=radio]#control5:checked~.sliderinner>ul {
  left: -400%
}
.slider input[type=radio]#control6:checked~.sliderinner>ul {
  left: -500%
}
.slider input[type=radio]#control7:checked~.sliderinner>ul {
  left: -600%
}
.description {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: Archivo Narrow;
  z-index: 1000;
}
.description-text {
  background-color: rgba(0, 0, 0, .8);
  padding: 10px;
  top: 0;
  size: 40px;
  z-index: 4;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  color: #fff;
}
＆＃13; 
<h1>"Why Should I Learn English?" - 10 Compelling Reasons for EFL Learners</h1>
<div class="slider">
  <input type="radio" id="control1" name="controls" checked="checked" />
  <label for="control1"></label>
  <input type="radio" id="control2" name="controls" />
  <label for="control2"></label>
  <input type="radio" id="control3" name="controls" />
  <label for="control3"></label>
  <input type="radio" id="control4" name="controls" />
  <label for="control4"></label>
  <input type="radio" id="control5" name="controls" />
  <label for="control5"></label>
  <input type="radio" id="control6" name="controls" />
  <label for="control6"></label>
  <input type="radio" id="control7" name="controls" />
  <label for="control7"></label>
  <div class="sliderinner">
    <ul>
      <li>
        <img src="//lorempixel.com/1200/600" />
        <div class="description">
          <div class="description-text">
            <h2>English is one of the most widely spoken languages</h2>
            <p>Although it comes....
            </p>
          </div>
        </div>
      </li>
      <li>
        <img src="//lorempixel.com/1200/600" />
        <div class="description">
          <div class="description-text">
            <h2>English will open up more opportunities for you</h2>
            <p>Being able ....</p>
          </div>
        </div>
      </li>
      <li>
        <img src="//lorempixel.com/1200/600" />
        <div class="description">
          <div class="description-text">
            <h2>English gives you access to some of the world's best universities</h2>
            <p>English is widely ....</p>
          </div>
        </div>
      </li>
      <li>
        <img src="//lorempixel.com/1200/600" />
        <div class="description">
          <div class="description-text">
            <h2>English is the language of some of the world's greatest literature</h2>
            <p>If you learn English...</p>
          </div>
        </div>
      </li>
      <li>
        <img src="//lorempixel.com/1200/600" />
        <div class="description">
          <div class="description-text">
            <h2>English gives you wider access to knowledge</h2>
            <p>Did you know that...</p>
          </div>
        </div>
      </li>
      <li>
        <img src="//lorempixel.com/1200/600" />
        <div class="description">
          <div class="description-text">
            <h2>English is a fantastic intellectual challenge</h2>
            <p>English is undoubtedly...</p>
          </div>
        </div>
      </li>
      <li>
        <img src="//lorempixel.com/1200/600" />
        <div class="description">
          <div class="description-text">
            <h2>English allows you to get more from popular culture</h2>
            <p>The world's highest....</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<!--slider-->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您在HTML中添加的两个新<img>标记我相信它会将其丢弃。你输入的新内容类似于<img src="images/6.jpg"，其中你所拥有的是<img src="image4.jpg" width="1200px" height="600px">。 Item

尝试以相同的格式制作新的图片代码，并摆脱＆＃34; /＆＃34;在6.jpg和7.jpg之后的图像。

相关问题
最新问题