Home>

[jquery] i want to move the slide show to the right

I would like you to point out any parts of the current description that need improvement.
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

    Incorrect selector specification
    $(. Specified class 1.specified class 2)

    Look at prevBtn in console.log and see if you have specified the prev button etc. with the mouse in the console part

    var prevBtn = $('. slider-ctrl-btn.prev');// variable that stores the selector of the prev button
    var nextBtn = $('. slider-ctrl-btn.next');// A variable that stores a selector for the prev button

  • Answer # 2

    I think the lead to addEvent () is not connected properly.
    Follow the reverse from addEvent () and see where the call stops.

Related articles

Trends