javascript - 显示带有图像 slider 的链接元素符号？

标签 javascript jquery html css

这是我的图像 slider 代码，一切正常，除了元素符号导航之外。 我不知道如何使元素符号可单击来跟踪该 slider 的图像...如果 slider 向右移动，我会尝试正常工作，但如果我单击左侧按钮图像混合位置，并且元素符号不会跟踪正确的图像。 有人可以帮助我吗？

$(document).ready(function() {
  var triggers = $('ul.triggers li');
  var lastElem = triggers.length-1;
  var target;
  triggers.first().addClass('active');

  function sliderResponse(target) {
    triggers.removeClass('active').eq(target).addClass('active');
  }

  triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
      target = $(this).index();
      sliderResponse(target);
    }
  });

  $('.left').click(function () {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    moveLeft();
  });

  $('.right').click(function () {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    moveRight();
  });

  $('#ud_slider ul li:last-child').prependTo('#ud_slider ul');


  defineSize();


});

$(window).on("resize",defineSize);

function defineSize(){
  var windowWidth = $(window).width();

  $('.ud_slide, #slider_container').css({width:windowWidth});
  var slideCount = $('#ud_slider ul li').length;
  var slideWidth = $('#ud_slider ul li').width();
  var sliderUlWidth = slideCount * slideWidth;

  $('#ud_slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

}

function moveLeft() {
  var slideWidth = $('#ud_slider ul li').width();
  $('#ud_slider ul').animate({
    left: +slideWidth
  }, 500, function () {
    $('#ud_slider ul li:last-child').prependTo('#ud_slider ul');
    $('#ud_slider ul').css('left', '');
  });
}

function moveRight() {
  var slideWidth = $('#ud_slider ul li').width();
  $('#ud_slider ul').animate({
    left: -slideWidth
  }, 500, function () {
    $('#ud_slider ul li:first-child').appendTo('#ud_slider ul');
    $('#ud_slider ul').css('left', '');
  });
}
body, html, p {margin:0; padding:0;}


#slider_container{position:relative;margin:0 auto;}
#ud_slider{height:640px;overflow:hidden;}

.ud_slide{
  background-size:cover;
  height:640px;
  background-position:center;
  background-repeat:no-repeat;
}

#ud_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

#ud_slider ul li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}

.ud_slider_1{background-image: url('https://gameonsnacks.com/wp-content/uploads/2013/02/Adam-Diaz.jpg');}
.ud_slider_2{background-image: url('http://carolinealberoni.files.wordpress.com/2014/04/online-games.jpg');}
.ud_slider_3{background-image: url('https://watergamespc.weebly.com/uploads/3/0/1/9/30199027/5208331.jpg');}
.ud_slider_4{background-image: url('http://knowledgeoverflow.com/wp-content/uploads/2013/01/planetside_2_game-wide.jpg');}


.button{position:absolute;top:50%;margin-top:-128px;cursor:pointer;}
.left{left:0;}
.right{right:0;}

.triggers{position:absolute;bottom:-20px;width:240px;padding:0;margin:0;left:50%;margin-left:-120px;}
ul.triggers li.active {background-color:red;}
ul.triggers li {
  float:left;
  list-style:none; 
  margin:0 5px;
  cursor:pointer;
  background-color:#000;
  width:50px;
  height:5px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Vjezbanje</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="slider_container">
      <div id="ud_slider">

        <ul>
          <li>
            <div class="ud_slider_1 ud_slide">

            </div>
          </li>
          <li>
            <div class="ud_slider_2 ud_slide">

            </div>				
          </li>
          <li>
            <div class="ud_slider_3 ud_slide">
            </div>
          </li>
          <li class="final">
            <div class="ud_slider_4 ud_slide">
            </div>
          </li>
        </ul>

        <div class="button left"><img src="img\back.png" /></div>
        <div class="button right"><img src="img\front.png" /></div>

      </div>

      <ul class="triggers">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/funkcija2.js"></script>
  </body>
</html>

最佳答案

我做了这些改变:

  1. 添加一个名为 lastBulletActive 的全局变量来存储最后一个事件元素符号，初始化为零，并更改每次左键单击或右键单击或元素符号单击
  2. 将持续时间作为参数传递给函数 moveLeft 和 moveRight

  3. 为子弹点击事件添加事件$("body").on("click", "ul.triggers li", function()

    $("body").on("click", "ul.triggers li", function() {
    var curBulletActive = $(this).index();
    if(curBulletActive<lastBulletActive){
        var toMove = lastBulletActive - curBulletActive;
        console.log(toMove + " left");
        for (i = 0; i < toMove; i++) {
            moveLeft(100);
        }
    }
    else if(curBulletActive>lastBulletActive){
        var toMove = curBulletActive - lastBulletActive;
        console.log(toMove + " right");
        for (i = 0; i < toMove; i++) {
            moveRight(100);
        }      
    }
    sliderResponse(curBulletActive);
    lastBulletActive = $('ul.triggers li.active').index();
});

结果在代码片段中

var lastBulletActive = 0;
$(document).ready(function() {
  var triggers = $('ul.triggers li');
  var lastElem = triggers.length-1;
  var target;
  triggers.first().addClass('active');

  function sliderResponse(target) {
    triggers.removeClass('active').eq(target).addClass('active');
  }

  triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
      target = $(this).index();
      sliderResponse(target);
    }
  });

  $('.left').click(function () {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    moveLeft(500);
    lastBulletActive = $('ul.triggers li.active').index();
  });

  $('.right').click(function () {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    moveRight(500);
    lastBulletActive = $('ul.triggers li.active').index();
  });

  $('#ud_slider ul li:last-child').prependTo('#ud_slider ul');


  $("body").on("click", "ul.triggers li", function() {
    var curBulletActive = $(this).index();
    if(curBulletActive<lastBulletActive){
      var toMove = lastBulletActive - curBulletActive;
      console.log(toMove + " left");
      for (i = 0; i < toMove; i++) {
        moveLeft(100);
      }
    }
    else if(curBulletActive>lastBulletActive){
      var toMove = curBulletActive - lastBulletActive;
      console.log(toMove + " right");
      for (i = 0; i < toMove; i++) {
        moveRight(100);
      }      
    }
    sliderResponse(curBulletActive);
    lastBulletActive = $('ul.triggers li.active').index();
  });

  defineSize();


});


$(window).on("resize",defineSize);

function defineSize(){
  var windowWidth = $(window).width();

  $('.ud_slide, #slider_container').css({width:windowWidth});
  var slideCount = $('#ud_slider ul li').length;
  var slideWidth = $('#ud_slider ul li').width();
  var sliderUlWidth = slideCount * slideWidth;

  $('#ud_slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

}

function moveLeft(duration) {
  var slideWidth = $('#ud_slider ul li').width();
  $('#ud_slider ul').animate({
    left: +slideWidth
  }, duration, function () {
    $('#ud_slider ul li:last-child').prependTo('#ud_slider ul');
    $('#ud_slider ul').css('left', '');
  });
}

function moveRight(duration) {
  var slideWidth = $('#ud_slider ul li').width();
  $('#ud_slider ul').animate({
    left: -slideWidth
  }, duration, function () {
    $('#ud_slider ul li:first-child').appendTo('#ud_slider ul');
    $('#ud_slider ul').css('left', '');
  });
}
body, html, p {margin:0; padding:0;}


#slider_container{position:relative;margin:0 auto;}
#ud_slider{height:640px;overflow:hidden;}

.ud_slide{
  background-size:cover;
  height:640px;
  background-position:center;
  background-repeat:no-repeat;
}

#ud_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

#ud_slider ul li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}

.ud_slider_1{background-image: url('https://gameonsnacks.com/wp-content/uploads/2013/02/Adam-Diaz.jpg');}
.ud_slider_2{background-image: url('http://carolinealberoni.files.wordpress.com/2014/04/online-games.jpg');}
.ud_slider_3{background-image: url('https://watergamespc.weebly.com/uploads/3/0/1/9/30199027/5208331.jpg');}
.ud_slider_4{background-image: url('http://knowledgeoverflow.com/wp-content/uploads/2013/01/planetside_2_game-wide.jpg');}


.button{position:absolute;top:50%;margin-top:-128px;cursor:pointer;}
.left{left:0;}
.right{right:0;}

.triggers{position:absolute;bottom:-20px;width:240px;padding:0;margin:0;left:50%;margin-left:-120px;}
ul.triggers li.active {background-color:red;}
ul.triggers li {
  float:left;
  list-style:none; 
  margin:0 5px;
  cursor:pointer;
  background-color:#000;
  width:50px;
  height:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_container">
  <div id="ud_slider">

    <ul>
      <li>
        <div class="ud_slider_1 ud_slide">

        </div>
      </li>
      <li>
        <div class="ud_slider_2 ud_slide">

        </div>				
      </li>
      <li>
        <div class="ud_slider_3 ud_slide">
        </div>
      </li>
      <li class="final">
        <div class="ud_slider_4 ud_slide">
        </div>
      </li>
    </ul>

    <div class="button left"><img src="img\back.png" /></div>
    <div class="button right"><img src="img\front.png" /></div>

  </div>

  <ul class="triggers">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

关于javascript - 显示带有图像 slider 的链接元素符号？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33473207/

上一篇：javascript - 数组未在 Parse Cloud 代码中复制

下一篇：javascript - 调整窗口高度大小时调整图像大小

相关文章：

javascript 自执行语法

jquery - 无法通过 jQuery 更新 Canvas

jquery - 使用更新在remoteFunction之后调整其他选择的值

html - 覆盖 BootStrap CSS - 难以理解特异性

javascript - 使用 JavaScript 获取选定的选项文本

javascript - 将 View 添加到 Angular 种子项目

javascript - 为什么 "this"在函数的返回对象窗口内

javascript - 预览图像 HTML 和 JavaScript

html - 缩放窗体背景按钮图像

javascript - JS数组合并求和

©2024 IT工具网  联系我们