Home >Web Front-end >JS Tutorial >jquery implements carousel chart (with code)

jquery implements carousel chart (with code)

php中世界最好的语言Original: 2018-04-23 16:03:3816258browse

This time I will bring you jquery to implement carousel chart (with code). What are the precautions for jquery to implement carousel chart? The following is a practical case, let’s take a look.

Carousel chart:

I have been exposed to jquery for a while, and today I just used the carousel chart to practice my skills. At the beginning of the blog post, I will introduce an example of simply using jquery to make a carousel chart. In the middle, I will insert some more thoughts about carousel charts. At the end, I will use Javascript method to write a carousel chart. Finally, I will talk about jquery and Javascript. Comparison. The effect of the carousel chart can be viewed by clicking on the following link: http://sandbox.runjs.cn/show/t07kscph

Example of jquery making carousel chart:

HTML part code:

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7轮播图6e916e0f7d1e588d4f442bf645aedb2f
    d20f98ff8366044d646698c99ebf3c0f
    2a63895d280e88d37599bc17f1284cbb2cacc6d41bbb37262a98f745aa00fbf0
    ede98e1fec87453cc7d9d69135bd12c42cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    b7f3fe4eca9168a43ad988c34c6c39ae
      ac763f7b1d7846de376678c5382e63630b0a14ce934bb093897ac4c304620c825db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e63630cf8b26dfaaf112a96a97acfd5eeb92a5db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e6363f474136c8aa2f8765ab508c32f7a00bb5db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e6363c5c55271af27eaaf0a6a93bae9deda625db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e63632b2c8a626b864cc658e29066709347085db79b134e9f6b82c0b36e0489ee08ed
      
      1afc39e7729b9ab8d870810870a6a3766d13db1d4d10908e61fa4cc8b0cfddba
      f9a299e2ee22cb9e276990cc56ebf0f0>94b3e26ee717c64999d7867364b1b4a3
      
      6f0a3d498b835a8a7766f925694a2c61
        ce7137ee0c8428248533c24b1c2857831bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857832bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857833bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857834bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857835bed06894275b65c1ab86501b08a632eb
      929d1f5ca49e04fdcb27f9465b944689
    94b3e26ee717c64999d7867364b1b4a3
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

css part code:

* {
  margin: 0;
  padding: 0;
}
#igs {
  margin: 10px auto;
  width: 700px;
  height: 320px;
  position: relative;
}
.ig {
  position: absolute;
}
#tabs {
  position: absolute;
  list-style: none;
  background-color: rgba(255,255,255,.5);
  left: 300px;
  bottom: 10px;
  border-radius: 10px;
  padding: 5px 0 5px 5px;
}
.tab{
  float: left;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  overflow: hidden;
  margin-right: 4px;
  border-radius: 100%;
  background-color: rgb(200,100,150);
}
.btn{
  position: absolute;
  color: #fff;
  top: 110px;
  width: 40px;
  height: 100px;
  background-color: rgba(255,255,255,.3);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  margin: 0 5px;
}
.btn2{
  position: absolute;
  right: 0px;
}
.btn:hover{
  background-color: rgba(0,0,0,.7);
}

js part code:

//定义全局变量和定时器
var i = 0 ;
var timer;
$(document).ready(function(){
  //用jquery方法设置第一张图片显示，其余隐藏
  $('.ig').eq(0).show().siblings('.ig').hide();
  
  //调用showTime()函数（轮播函数）
  showTime();
  
  //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
  $('.tab').hover(function(){
    //获取当前i的值，并显示，同时还要清除定时器
    i = $(this).index();
    Show();
    clearInterval(timer);
  },function(){
    //
    showTime();
  });
  
  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = 5;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
  
  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    if(i == 4){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
  
});
//创建一个showTime函数
function showTime(){
  //定时器
  timer = setInterval(function(){
    //调用一个Show()函数
    Show();
    i++;
    //当图片是最后一张的后面时，设置图片为第一张
    if(i==5){
      i=0;
    }
  },2000);
}
//创建一个Show函数
function Show(){
  //在这里可以用其他jquery的动画
  $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
  
  //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
  $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
  
  /*
   * css中添加的代码：
   * .bg{ background-color: #f00; }
   * */
}

Completed rendering:

More thoughts on jquery for making carousel pictures

Thought 1: Use the jquery method in the seventh line of code to set the first picture to be displayed and the rest to be hidden. Is there any other way to achieve this?

Idea: Implement it through jquery filters

Code example:

$("#igs a:not(
:first-child
)").hide()；

Extension: If you look at it this way, in the a tag We can omit all the classes in. At the same time, we need to have a deeper understanding of jquery selectors.

Thinking 2: In line 64 of the code, we created a Show function, where we can only see simple effects. Can we make our animation effects more dazzling?

Idea: Use custom animation in jquery to set multiple animation effects

Code example:

//Code tip: You can use fadeIn(), fadeOut (), fadeTo(), animate(), etc. Please refer to relevant information for specific implementation methods

Thinking 3: If we add one or more pictures on the original basis, we have to modify our Code, can we apply this code to more carousel images?

Idea: We set a counter count in front and get the number of pictures through the DOM method

Code example:

var count;
$(document).ready(function(){
  count= $(".main a").length; /*给动态变化的i备用*/;
  //。。。代码省略
  
  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = count;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
  
  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    //console.log(count-1);
    if(i == count-1){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
  
});

Use native Javascript method to write a simple wheel Play the picture

Part of the html code:

208ab46def49e0b0f034dde40adc5640
  8b09d52f17ac58123d587835cd6bba7c
    d00c5a168392bbe86fc82644a0dfeb4b
    c4f811d7133dc3f9aad2b6a023cde9fe
    6669adbbc06cd0e13bd80fe4bcb51359
    767a036a2d0e2d1341846798854b8fd9
    65e966f8c657c5538030b996960237a3
    3e27407305113d17fe51ac526b9915f5
    a8a1e37956d2326693c4069f8caa745d
  94b3e26ee717c64999d7867364b1b4a3
  637a82100fe3bba79ece072699c86f44
    6cc1015a091555e4ff5c96345771e28454bdf357c58b8a65c66d7c19c8e4d114
    0bd7e3a85d61474f38b3d4a29abd0c5d54bdf357c58b8a65c66d7c19c8e4d114
    ddd9424bfd1692f89acc1273db8c095554bdf357c58b8a65c66d7c19c8e4d114
    d0dccb201ce429ce4144742344311b5854bdf357c58b8a65c66d7c19c8e4d114
    67bb7791c47618fb0051e17972cb475654bdf357c58b8a65c66d7c19c8e4d114
  94b3e26ee717c64999d7867364b1b4a3
  e3331b1e88351f01a8719731f388af1f<5db79b134e9f6b82c0b36e0489ee08ed
  7a61fa414c00df12a5d981271be95e7a>5db79b134e9f6b82c0b36e0489ee08ed
94b3e26ee717c64999d7867364b1b4a3

Js part of the code:

8019067d09615e43c7904885b5246f0a
    /* 知识点：    */
    /*    this用法 */
    /*    DOM事件 */
    /*    定时器 */
    window.onload = function () {
      var container = document.getElementById('container');
      var list = document.getElementById('list');
      var buttons = document.getElementById('buttons').getElementsByTagName('span');
      var prev = document.getElementById('prev');
      var next = document.getElementById('next');
      var index = 1;
      var timer;
      function animate(offset) {
        //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
        //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
        var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + 'px';
        //无限滚动判断
        if (newLeft > -600) {
          list.style.left = -3000 + 'px';
        }
        if (newLeft c19d3f42bb7ffcc43d6894673fb45770 5) {
          index = 1
        }
        animate(-600);
        buttonsShow();
      };
      for (var i = 0; i < buttons.length; i++) {
        (function (i) {
          buttons[i].onclick = function () {
            /* 这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法 */
            /* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
            var clickIndex = parseInt(this.getAttribute('index'));
            var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
            animate(offset);
            index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
            buttonsShow();
          }
        })(i)
      }
      container.onmouseover = stop;
      container.onmouseout = play;
      play();
    }
  2cacc6d41bbb37262a98f745aa00fbf0

Comparison of jquery and Javascript methods

After comparison , we can easily see that the jquery method requires much less code than our Javascript method. In fact, using Javascript directly avoids many problems, such as compatibility issues (this example is not tested, just used for comparison); also, if there are two values of class, separated by spaces, then How should we operate with DOM (idea: use regular expression and array-related methods), so that our code amount will be more; if we want to change the animation effect, we need to modify a lot. , and from the previous introduction, we know that if you want to modify the animation effect, just modify the called animation function directly...

The following words:

This blog post records more of my thinking, among which The specific implementation effects of many methods have not yet been written. Now I am learning jquery while reviewing the Javascript I have learned before. I feel more and more that Javascript is powerful (actually I am weak). There are many things worth studying in depth, and I feel more and more interesting about this thing.

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

jquery implements carousel chart (with code)

Related articles