Home>

[jquery] i want to move when i click the left button of the slideshow

When you click the right, it moves in order, but when you click the left, it cannot be displayed in order.
If there is a part that needs improvement in the current description, I would like you to point out.
I want to solve the problem with the current description.
Thank you.

<! doctype html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<meta name = "format-detection" content = "telephone = no">
<title></title>
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/base.css">
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>

    
        
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <button type = "button" data-ctrl = "prev"></button>
            <button type = "button" data-ctrl = "next"></button>
        
    

<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript">
"use strict";
$(function () {
  function slider (target) {
    var box = $('. slider-area');// Stores the selector enclosing the image to slide
    var prevBtn = $('. slider-ctrl-btn.prev');// Variable that stores the selector of the prev button
    var nextBtn = $('. slider-ctrl-btn.next');// variable that stores the selector of the prev button
    var w = 0;// Slideshow width
    var h = 0;// slideshow height
    var imgW;// Width of the slide image
    var imgH;// height of image to slide
    var items = [];// array containing slide image selectors
    var srcList = [];// Array to store image reference
    var loadIndex = 0;// Index the loaded image
    // Duplicate slide element
    function clone (selector) {
      var cloneSelector = selector.clone (true);
      $(cloneSelector) .attr ({
        'href': selector.attr ('href'),
        'target': selector.attr ('target')
      });
      return cloneSelector;
    };
    // slide
    function slide (way) {
      removeEvent ();
      var i;
      var cloneSelector;
      // Processing executed when the next button is clicked
      if (way<0) {
        cloneSelector = clone (items [0]);
        $(cloneSelector) .css ('left', (w * items.length + 1) + 'px');
        box.find ('ul'). append (cloneSelector);
        items.push ($(cloneSelector));
        for (i = 0;i<items.length;i ++) {
          items [i] .animate ({'left': (w * i) -w},

 500);
        };// Processing executed when prev button is clicked
      } else {
        cloneSelector = clone (items [items.length-1]);
        $(cloneSelector) .css ('left', (w * -1) + 'px');
        box.find ('ul'). append (cloneSelector);
        items.unshift ($(cloneSelector));
        for (i = 0;i<items.length;i ++) {
          items [i] .animate ({'left': w * i},

 500);
        };
      };
      setTimeout (function () {
        slideComplete (way);
      },

 500);
    };
    // slide completed
    function slideComplete (way) {
      // next
      if (way<0) {
        items [0] .remove ();
        items.shift ();
      }
      // prev
      else {
        items [items.length-1] .remove ();
        items.pop ();
      };
      addEvent ();
    };
    // Event settings
    function addEvent () {
      prevBtn.on ({
        'click': function () {
          slide (1);
        }
      });
      nextBtn.on ({
        'click': function () {
          slide (-1);
        }
      });
    };
    // delete event
    function removeEvent () {
      prevBtn.off ('click');
      nextBtn.off ('click');
    };
    // Positioning
    function pos () {
      $.each (items, function (index) {
        $(this) .css ('left', (w * index) + 'px');
      });
    };
    // resize
    function resize () {
      w = target.parent (). width ();
      h = Math.floor (w * imgH/imgW);
      target.width (w) .height (h);
      box.find ('ul'). width (w) .height (h);
      pos ();
    };
    // setup
    function setup () {
      imgW = box.find ('img'). width ();
      imgH = box.find ('img'). height ();
      box.find ('li'). each (function (index) {
        items [index] = $(this);});
      $(window) .on ('resize', resize);
      resize ();
      addEvent ();
    };
    // Image loading complete
    function loaded () {
      if (loadIndex! = (srcList.length-1)) {
        loadIndex ++;
        imgLoad ();
      } else {
        setup ();
      };
    };
    // Load image
    function imgLoad () {
      var img = new Image ();
      $(img) .on ('load', loaded) .attr ('src', srcList [loadIndex]);
    };
    // Initial setting
    function init () {
      box.find ('img'). each (function (index) {
        srcList [index] = $(this) .attr ('src');
      });
      imgLoad ();
    };
    init ();
  };
  slider ($('. slider-area'));
});
</script>
</body>
</html>
. slider-wrap {
    width: 600px;
    padding: 10px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #DDD;
    box-shadow: 0 2px 5px rgba (50, 50, 50, 0.4);
}
.slider-area {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: #FFF;
    overflow: hidden;
}
.slider-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 300px;
}
.slider-list>li {float: left;}
.slider-ctrl-btn {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    cursor: pointer;
    border-radius: 15px;
    background-color: rgba (255, 255, 255, 0.5);
}
.slider-ctrl-btn.prev {left: 30px;}
.slider-ctrl-btn.next {right: 30px;}
jquery
  • Answer # 1

    I think that it falls under the question "Circle throwing questions such as please give me code/debug" that I haven't recommended on this site. Because it has been.

    Line 7 offunction slide (way)

    $(cloneSelector) .css ('left', (w * items.length + 1) + 'px');

    is

    $(cloneSelector) .css ('left', (w * (items.length + 1)) + 'px');
    Isn't it a mistake of

    ?

Related articles