Home > Article > Web Front-end > Example tutorial of seamless scrolling of js carousel chart

Example tutorial of seamless scrolling of js carousel chart

零下一度Original: 2017-06-19 09:04:082189browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example code sharing on how to switch the search engine's navigation web search box using JavaScriptNext article：Example code sharing on how to switch the search engine's navigation web search box using JavaScript

See more

Example tutorial of seamless scrolling of js carousel chart

Related articles