Question

我有以下代码创建非常简单的滑块。
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.在“列表”中的中间左侧和中间右侧位置放置锚标签（作为下一个上一个按钮）。像，
＆LT;＆LT; [slide]＆gt;＆gt;
2.将文本放在图像上。 3.在开始时显示第一张图像。
但是，设计应该是响应性的。

Answer 1

我在这里编辑了你的小提琴：https://jsfiddle.net/cy7d6v4u/

我没有时间让javascript正常工作，但这是HTML和CSS的格式：

CSS＆amp; HTML编辑 这里的重大问题是需要能够获得盒子的高度。浮动LI元素时，UL没有高度。所以，我没有浮动LI元素，而是使用绝对定位。然后，所以主UL可以有一个高度，我在html列表的末尾添加了一个相对定位的图像（只复制它们中的任何一个）并将其设置为不透明度：0和z-index为-1。这设置了UL的高度（我们可以设置相对位置）。所有这些让我们在你的上一个/下一个链接和一个顶部使用绝对定位：％所以它是响应。

呼。所以，这是新的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;
}

使用css对齐列表下的列表项以创建jquery滑块

1 个答案: