jquery - 使用 css 对齐列表下的列表项以创建 jquery slider

Question

我有以下代码可以创建非常简单的 slider 。
HTML:

<ul id="slidebox">
        <a href="#" class="control_prev"> << </a>
        <a href="#" class="control_next"> >> </a>
        <li class="slideholder">
            <img class="imgstyle" src="http://bxslider.com/images/730_200/tree_root.jpg"/>
            <div class="slidetext">
                <h3>headline1</h3>
                <p>news1</p>
            </div>
        </li>
        <li class="slideholder">
            <img class="imgstyle" src="http://bxslider.com/images/730_200/hill_road.jpg"/>
            <div class="slidetext">
                <h3>headline2</h3>
                <p>news2</p>
            </div>
        </li>
        <li class="slideholder">
            <img class="imgstyle" src="http://bxslider.com/images/730_200/trees.jpg"/>
            <div class="slidetext">
                <h3>headline3</h3>
                <p>news3</p>
            </div>
        </li>
    </ul>  

CSS:

    * {margin: 0; padding: 0; border: 0 none; outline: 0; font-size: 100%; text-decoration: none; color: inherit; word-wrap: break-word; font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;}

    #slidebox {
    display: block;
    position: static;
    width: 50%;
    background: red;
    margin: 0 auto;
    list-style: none;
    }

    .slideholder {
    display: none;
    overflow: hidden;
    width: 50%;
    background: #000000; 
    position: absolute;
    float: left;
    opacity: 0;
    z-index: 10;
    }
    .slideholder:first-child { opacity: 1; z-index:11; display: block;}

.imgstyle { float: left; outline: none; height: 100%; width: 100%; z-index: 777; }

    .slidetext {
    overflow: hidden;
    display: block;
    position: relative;absolute; 
    bottom: 20%;
    left: 0px;
    width: 97%; 
    height: 25%; 
    background: rgba(30,40,55,.7); 
    color: #FFFFFF; 
    padding: 1% 1.5%;
    z-index: 999;
    }
    .slideAnim {
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
    }

    a.control_prev, a.control_next {
      position: relative;
      z-index: 9999;
      display: block;
      padding: 1% .5%;
      width: auto;
      height: auto;
      background: #DFDFDF;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      opacity: 0.8;
      cursor: pointer;
    }
    a.control_prev:hover, a.control_next:hover { opacity: 1; }
    a.control_prev { float: left; }
    a.control_next { float: right; }

jQuery:

jQuery(document).ready(function () {

var currentPosition = 0;
var numberOfSlides = $(".slideholder").length;
var speed = 6000;
$('.slideholder').addClass("slideAnim");

setInterval(changePosition, speed);

function changePosition() 
{ 
    if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } 
    else { currentPosition++; } 
    moveSlide(); 
}

function moveSlide() 
{
    $('.slideholder').eq(currentPosition).fadeTo(900,1); 
    $('.slideholder').eq(currentPosition-1).fadeTo(500,0);
}

});

这是我的代码示例，但我认为图像未在 jsfiddle 中加载
https://jsfiddle.net/4jueaz85/6/
这是更新的链接(请等待 imade 加载 - 互联网连接速度较慢):https://jsfiddle.net/4jueaz85/13/

我想:
1. 将 anchor 标签(充当下一个-上一个按钮)放在“列表”的中左和中右位置。喜欢，
<< [幻灯片] >>
2. 将文字置于图像之上。3. 在开始时显示第一张图片。
但是，设计应该是响应式的。

Answer 1

我在这里编辑了你的 fiddle :https://jsfiddle.net/cy7d6v4u/

我没有时间让 javascript 工作，但这里有一个 HTML 和 CSS 的格式:

CSS 和 HTML 编辑这里的大问题是需要能够获得盒子的高度。当您 float LI 元素时，UL 没有高度。所以，我没有 float LI 元素，而是使用了绝对定位。然后，为了让主要的 UL 可以有一个高度，我在 html 列表的末尾添加了一个相对定位的图像(只需复制其中的任何一个)并将其设置为不透明度:0 和 -1 的 z-index。这设置了 UL 的高度(然后我们可以设置相对位置)。所有这些让我们可以在您的上一个/下一个链接和 top: % 上使用绝对定位，因此它是响应式的。

哇哦。因此，这是列表中最后一个元素相对定位的新 HTML:

<ul id="slidebox">
    <a href="#" class="control_prev"> << </a>
    <a href="#" class="control_next"> >> </a>
    <li class="slideholder">
        <img class="imgstyle" src="http://bxslider.com/images/730_200/tree_root.jpg"/>
        <div class="slidetext">
            <h3>headline1</h3>
            <p>news1</p>
        </div>
    </li>
    <li class="slideholder">
        <img class="imgstyle" src="http://bxslider.com/images/730_200/hill_road.jpg"/>
        <div class="slidetext">
            <h3>headline2</h3>
            <p>news2</p>
        </div>
    </li>
    <li class="slideholder">
        <img class="imgstyle" src="http://bxslider.com/images/730_200/trees.jpg"/>
        <div class="slidetext">
            <h3>headline3</h3>
            <p>news3</p>
        </div>
    </li>
    <li class="set-slide-height">
        <img class="imgstyle" src="http://bxslider.com/images/730_200/trees.jpg"/>
    </li>
</ul>   

这是 CSS(有些仍然可以删除和改进，但这是有效的):

* {
    margin: 0; 
    padding: 0; 
    border: 0 none; 
    outline: 0; 
    font-size: 100%; 
    text-decoration: none; 
    color: inherit; 
    word-wrap: break-word; 
    font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
}
.imgstyle { 
    outline: none; 
    height: 100%; 
    width: 100%; 
    z-index: 777; 
}
#slidebox {
display: block;
position: relative;
width: 100%;
background: red;
margin: 0 auto;
list-style: none;
}
.slideholder {
display: none;
overflow: hidden;
width: 100%;
background: #000000; 
position: absolute;
opacity: 0;
z-index: 10;
}
.slideholder:first-child { 
    opacity: 1; 
    z-index:11; 
    display: block; 
}
.slidetext {
overflow: hidden;
display: block;
position: absolute; 
bottom: 0; 
left: 0;
right: 0;
width: 100%;
background: rgba(30,40,55,.7); 
color: #FFFFFF; 
padding: 1% 1.5%;
z-index: 999;
}
.slideAnim {
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}

a.control_prev, a.control_next {
  position: absolute;
  z-index: 9999;
  display: block;
  padding: 1% .5%;
  background: #DFDFDF;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
  top: 30%;
  left: 0;
}

a.control_next {
    left: auto;
    right: 0;
}
a.control_prev:hover, a.control_next:hover { opacity: 1; }

.set-slide-height { /* This gives #slidebox height */
    position: relative;
    z-index: -1;
}