How to use jQuery to achieve seamless carousel and left and right clicks-JS Tutorial-php.cn

How to use jQuery to achieve seamless carousel and left and right clicks

php中世界最好的语言

Release： 2018-05-30 10:44:41

Original

1529 people have browsed it

This time I will show you how to use jQuery to achieve seamless carousel and left and right clicks, and how to use jQuery to achieve seamless carousel and left and right clicks. What are the precautions? The following is a practical case, let’s take a look. take a look.

There are many, many seamless carousel left and right loops that we want in the web page. This is my first carousel effect, and it is also the most basic. I would like to share it with you. For beginners, I hope you can To learn from it, I want you to abuse me and give me your valuable opinions.

This is the effect I want

Let’s get to the point. First is the layout. The principle of layout is to create the ul tag in p and insert the li tag in ul. , insert pictures in, if you want several pictures to rotate, insert several li. The main point in the layout is to set the size of p, add

overflow: hidden; to hide the excess part, the length of ul is the total length of all pictures, and li is floating.

html code

<p id="djlb">
        <p id="bigul">
          <ul>
            <li>
              <img src="../images/djlb1.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb3.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
        </p>
      </p>
      <p id="aniu">
        <p id="bleft"></p>
        <p id="bright"></p>
      </p>  
    </p>

Copy after login

css code

#djlb {
  width: 1200px;
  height: 600px;
  overflow: hidden;
}
#bigul {
  width: 1800px;
  height: 560px;
}
#bigul > ul {
  position: relative;
  width: 300px;
  height: 560px;
  float: left;
}
#bigul > ul > li:nth-child(even) {
  position: absolute;
  display: none;
}
#bigul > ul > li {
  width: 300px;
  height: 560px;
  float: left;  
}
#aniu {
  position: relative;
}
#aniu > p {
  position: absolute;
}
#aniu > p:first-child{
  left:-55px;
  top: -290px;
  display: inline-block;
  border-left: 6px solid #c2c2c2;
  border-top: 6px solid #c2c2c2;
  width: 37px;
  height: 37px;
  transform: rotate(-45deg);
}
#aniu > p:last-child{
  left: 1210px;
  top: -290px;
  display: inline-block;
  border-right: 6px solid #c2c2c2;
  border-bottom: 6px solid #c2c2c2;
  width: 37px;
  height: 37px;
  transform: rotate(-45deg);
}
#aniu > p:first-child:hover{
  border-left: 6px solid #ffcc00;
  border-top: 6px solid #ffcc00;
}
#aniu > p:last-child:hover {
  border-right: 6px solid #ffcc00;
  border-bottom: 6px solid #ffcc00;
}

Copy after login

Mainly explain my js idea;

$(function () {
 var i = 0, tick, list, ul = $("#bigul");
 $("#bright").click(function () {
 $("#bigul").animate({ "margin-left": -300 }, 30000, function () {//当你执行完了后发生的事件
   list =ul.find("ul");  //正常的话ul就是li，因为我这个需要鼠标浮动显示隐藏，结构一样  
   ul.append(list.first()); //ul追加到最后一个
   ul.css("margin-left",0); //在每一次点击过后，margin-left初始化为零，为什么嘛要初始化呢？ 思考一下？
  });//这样就向右无限循环了，就像队列一样
 if (tick) {
  clearTimeout(tick);
 } //清除上一次定时器
 tick = setTimeout(function () {
   $("#bright").click();
 }, 30000); 定时器自动的部分
 });
 $("#bleft").click(function(){
   list = ul.find("ul"); 
   list.last().insertBefore(list.first()); // 当第一次点击时，把最后的搬到前面来，
   ul.css("margin-left",-300);
   ul.animate({ "margin-left": 0 }, 3000); //同样这个问题？？ 
 if (tick) {
   clearTimeout(tick);
 }
 tick = setTimeout(function () {
   $("#bleft").click();
 }, 3000);
 });
 $("#bright").click(); //自动向右事件
});

Copy after login

Now let me tell you why, if it is not initialized, you When you click on the right side, it will copy the first to the third picture, because when you move the first one to the next one, the left side of the ul parent box is 0, and the next time you move it, it will automatically complete its position, that is There are two positions, so it’s the third picture directly. I figured it out only by drawing the picture hehe!

The whole idea:

Use animate to move li,

When you click to the right, use the append() method Add the first card to the last card, and clear it every time you move it.

When you click to the left, use insertBefore() to insert the last picture into the first picture, and also clear it

tick is the timer settimeout we defined

The last sentence It is an automatic right event.

Mouse movement, display and hiding are all done using mouseout() and show(), hide().

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!