Question

我是Jquery的新手，其中80％不是我的代码我只是用它来学习如何制作滑块但我真的很感激有人可以通过告诉我我能做什么来帮助我使页面加载时自动运行此滑块。另外，当幻灯片正常旋转而不是向后旋转直到第一张图像时，也可以这样做。谢谢：P

HTML：

<html>
<body>
<div class="slider">
<ul>
    <li>
        <img src="img1.jpg" />
    </li>
    <li>
        <img src="img2.jpg" />
    </li>
    <li>
        <img src="img3.jpg" />
    </li>
    <li>
        <img src="img4.jpg" />
    </li>
    <li>
        <img src="img5.jpg" />
    </li>
    <li>
        <img src="img6.jpg" />
    </li>
    <li>
        <img src="img7.jpg" />
    </li>
    <li>
        <img src="img8.jpg" />
    </li>
    <li>
        <img src="img9.jpg" />
    </li>
    <li>
        <img src="img10.jpg" />
    </li>
    <li>
        <img src="img11.jpg" />
    </li>
    <li>
        <img src="img12.jpg" />
    </li>
    <li>
        <img src="img13.jpg" />
    </li>
    <li>
        <img src="img14.jpg" />
    </li>
    <li>
        <img src="img15.jpeg" />
    </li>
    <li>
        <img src="img16.jpg" />
    </li>
    <li>
        <img src="img17.jpg" />
    </li>
</ul>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="slider.js"></script>
</body>
</html>

CSS：

.slider {
width: 60%;
overflow: hidden;
height: 607px;
position: relative;
border: 5px #000000 solid;
margin-left: 20%;
}

.slider ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 1700%;
height: 100%;
top: 0;
}

.slider li {
padding: 0;
margin: 0;
width: 33.333333%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
}

.slider li img {
border: none;
width: 100%;
min-height: 100%;
}
.slider button {
position: absolute;
display: block;
box-sizing: border-box;
border: none;
outline: none;
top: 0;
bottom: 0;
width: 13%;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
margin: 0;
padding: 0;
text-align:center;
opacity: 0;
z-index: 2;
height: 100%;
}

.slider button.prev {
left: 0;
font-size: 30px;
}

.slider button.next {
right: 0;
font-size: 30px;
}

.slider button:hover, .slider button:active {
opacity: 1.0;

}

JQuery的：

    $(function() {

var ul = $(".slider ul");
var slide_count = ul.children().length;
var slide_width_pc = 100.0 / slide_count;
var slide_index = 0;

ul.find("li").each(function(indx) {
var left_percent = (slide_width_pc * indx) + "%";
$(this).css({"left":left_percent});
$(this).css({width:(100 / slide_count) + "%"});
});

setInterval(function() {
    console.log("prev button clicked");
    slide(slide_index - 1);
  }

  function() {
    slide(slide_index + 1);
    if (slide_index == 16) {
      slide(slide_index == 0);
      ul.animate({
        "margin-left": margin_left_pc;
      }, 400);
    }
  },500 );

function slide(new_slide_index) {

if(new_slide_index < 0 || new_slide_index >= slide_count) return; 

var margin_left_pc = (new_slide_index * (-100)) + "%";

ul.animate({"margin-left": margin_left_pc}, 400, function() {

slide_index = new_slide_index

});
}
});

Answer 1

关于第一个问题：根据我的理解，即使没有点击任何按钮，您也希望自动滑动滑块。为此你应该创建一个区间：

  let array = [String]()
   FIRDatabase.database().reference().child("users")child(FIRAuth.auth()!.currentUser!.uid).child("medals").observeSingleOfEvent(.Value, withBlock: {(snap) in


        if let snapDict = snap.value as? [String:AnyObject]{


            for each in snapDict{

                print(each.0)
                self.array.append(each.0)
            }
        }
    })

3000等于3秒，可随意自定义。

Answer 2

变化：

$(".slider .prev").click(function() {
console.log("prev button clicked");
slide(slide_index - 1);
});

$(".slider .next").click(function() {
slide(slide_index + 1);
if (slide_index == 16){
slide(slide_index == 0);
ul.animate({"margin-left": margin_left_pc}, 400);
}
});

要：

setInterval(function() {
    console.log("prev button clicked");
    slide(slide_index - 1);
  }

  function() {
    slide(slide_index + 1);
    if (slide_index == 16) {
      slide(slide_index == 0);
      ul.animate({
        "margin-left": margin_left_pc
      }, 400);
    }
  },500 );

我所做的不是在单击幻灯片时运行函数，而是每半秒运行一次函数。要更改每张幻灯片更改前的时间，您需要更改两种类型括号之间的500的数字。希望这有帮助。

Answer 3

查看fiddle

使用setInterval开始滑动，clearInterval + setInterval点击后重置计时器

我该怎么做这个自动播放？

3 个答案: