Example tutorial of seamless scrolling of js carousel chart-JS Tutorial-php.cn

Example tutorial of seamless scrolling of js carousel chart

零下一度

Release： 2017-06-19 09:04:08

Original

2239 people have browsed it

This article mainly introduces the seamless scrolling effect of js carousel chart in detail, which has a certain reference value. Interested friends can refer to it

How to start and end the carousel chart when making it If they cannot be connected, the effect will be a bit ugly. Here is a method I commonly use:

Let me explain in words first:

If you want to display 5 pictures, they are 1, 2, and 3. ,4,5 So the introduction of the code is like this: 1,2,3,4,5,1

I won’t go into detail here about the sequential rotation. The main point is 5>1 and 1>5 carousel

i represents the index of the current picture

pre represents the button of the previous picture

next represents the button of the next picture

ul represents the picture list

(1) 5>1>2... When the "next" button goes from 5 to 1, it rotates normally in order, and when the current picture is the second "1" , the next picture should be "2", then when "next", the left value of ul is 0, i==1;

(2) 1>5>4.... When When the "pre" button rotates from the current picture "1" (the first 1) to picture 5, i==4, the left value of ul becomes -5 times the width of img, that is, the first 1 is quietly Becomes the last 1;

is a bit confusing to express in language, here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{padding: 0;margin: 0;}
 .container{
  width: 273px;height: 163px;overflow: hidden;
  position: relative;margin: 0 auto;
 }
 .list{
  position: absolute;width: 1638px;top: 0;left: 0px;
 }
 .list li{
  float: left;list-style: none;
 }
 .btn{
  position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;
  text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;
 }
 .btn:hover{
  background-color: rgba(0,0,0,0.3);color: #fff;
 }
 .pre{
  left: 0;
 }
 .next{
  right: 0;
 }
 .nav{
  position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;
 }
 .nav span{
  width: 10px;height: 10px;border-radius: 10px;background-color: #fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;
 }
 span.on{
  background-color: orange;
 }
 </style>
</head>
<body>
 <p class="container">
 <ul class="list" style="left: 0px">
  <li><img src="./images/1.png" alt=""></li>
  <li><img src="./images/2.png" alt=""></li>
  <li><img src="./images/3.png" alt=""></li>
  <li><img src="./images/4.png" alt=""></li>
  <li><img src="./images/5.png" alt=""></li>
  <li><img src="./images/1.png" alt=""></li>
 </ul>
 <p class="nav">
  <span class="on"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 </p>
 <em class="next btn">></em>
 <em class="pre btn"><</em>
 </p>
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript">
 $(function(){
  var i=0;
  $(&#39;.next&#39;).click(function(){
  i++;
  console.log(i);
 
  moveImg(i);
   
  });
  $(&#39;.pre&#39;).click(function(){
  i--;
  moveImg(i);
   
  });
  $(&#39;.nav span&#39;).click(function(){
  var _index=$(this).index();
  i=_index;
  moveImg(i);
 
   
  });
  // i的作用：决定下一张图片是谁————也就是说ul的left是多少。
  // $(&#39;.list&#39;).css({left)的值是从图a过度是此时的ul的left。
  function moveImg(){
  if (i==6) {
   i=1;
   $(&#39;.list&#39;).css({&#39;left&#39;:&#39;0&#39;});
  }
   // 是第一张
  if(i==-1){
   i=4;
   $(&#39;ul&#39;).css({left:(5*-273)});
  }
  $(&#39;.list&#39;).stop().animate({&#39;left&#39;:-273*i+&#39;px&#39;},1000);
  if (i==5) {
  $(&#39;.nav span&#39;).eq(0).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
 
  }
  $(&#39;.nav span&#39;).eq(i).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
 
  }
 })
 </script>
</body>
</html>

Copy after login

The above is the detailed content of Example tutorial of seamless scrolling of js carousel chart. For more information, please follow other related articles on the PHP Chinese website!