上一个图像和下一个图像在 jquery 中不起作用

Question

我已经下载了这个代码，它正在工作，但是当我点击上一个和下一个图像时它不起作用，我不知道会做什么......$（“.pic img”）.attr（ "src", "images/这里我要下一张图片的 src 值");

<div class="img-box">
  <ul>
    <?php $query1="SELECT * FROM user_photos_offline" ; $sql=mysql_query($query1); $results=array(); while($row=mysql_fetch_assoc($sql)){ ?>
    <li>
      <img src="images/cropped-images/<?php echo $row['image']?>" />
      <div class="mask">
        <div class="mag">
          <div class="plus"></div>
        </div>
      </div>
    </li>
    <?php } ?>
  </ul>
</div>
<div class="full-screen-mask">
  <div class="view-port">
    <div class="pre">
      <span>-</span>
    </div>
    <div class="pic"><img /></div>
    <div class="next">
      <span>+</span>
    </div>

  </div>
  <div class="close">
    <span></span>
    <span></span>
  </div>
</div>


$(".img-box ul li").click(function() {
  var index = $(this).index();
  num = index + 1;
  var img = $(this).find('img').attr('src');
  var index = $(this).index();
  //next button function
  function next() {
    $(".pic img").attr("src", "images/"+num+".png");
  }
  $(".next").click(next);
});



//preview button function
function pre(){ 
    $(".pic img").attr("src","images/pic-"+num+".png");
    num--;
    if(num==0){
        num=8
    }
}


 $(".pre").click(pre);


//next button function
function next(){ 
$(".pic img").attr("src","images/pic-"+num+".png");
num++;
if(num==9){
num=1
    }
}
 $(".next").click(next);

Answer 1

更新

num = 1;
$(".img-box ul li").click(function() {
  num = $(this).index(); 
  next(); // if you want change pic on click li event
});

$(".next").click(function(){
    next();
});

$(".pre").click(function(){
    pre();
});

//preview button function
function pre(){ 
    //if your src contain all data url
    $(".pic img").attr("src",$('.img-box ul li').eq(num).find('img').attr('src')); // else if not contain all data url $(".pic img").attr("src","images/pic-"+$('.img-box ul li').eq(num).find('img').attr('src')+".png");

    num--;
    if(num==0){
        num=8
    }
}

//next button function
function next(){ 
    $(".pic img").attr("src",$('.img-box ul li').eq(num).find('img').attr('src'));
    num++;
    if(num==9){
        num=1
    }
}

更新 3

$(document).ready(function() {
    num = 0;
    $(".img-box ul li").click(function() {
        num = $(this).index(); 
    });

    $(".next").click(function(){
        next();
    });

    $(".pre").click(function(){
        pre();
    });

    //preview button function
    function pre(){ 
        //if your src contain all data url
        if(num==0){
            num=8
        }else{
            num--;
        }
        $(".pic img").attr("src",$('.img-box ul li').eq(num).find('img').attr('src')); // else if not contain all data url $(".pic img").attr("src","images/pic-"+$('.img-box ul li').eq(num).find('img').attr('src')+".png");
    }

    //next button function
    function next(){ 

        if(num==9){
            num=0
        }else{
            num++;
        }
        $(".pic img").attr("src",$('.img-box ul li').eq(num).find('img').attr('src'));
    }
});

请看。如果单击所有链接，则 num 是正确的。我认为是你的 php 函数或者你的图像 id 不正确。

$(document).ready(function() {
  num = 0;
    $(".img-box ul li").click(function() {
        num = $(this).index(); 
		alert(num)
    });

    $(".next").click(function(){
        next();
    });

    $(".pre").click(function(){
        pre();
    });

    //preview button function
    function pre(){ 
        //if your src contain all data url
        if(num==0){
            num=8
        }else{
            num--;
        }
		alert(num)
        //$(".pic img").attr("src",$('.img-box ul li').eq(num).find('img').attr('src')); // else if not contain all data url $(".pic img").attr("src","images/pic-"+$('.img-box ul li').eq(num).find('img').attr('src')+".png");
    }

    //next button function
    function next(){ 

        if(num==9){
            num=0
        }else{
            num++;
        }
		alert(num)
        //$(".pic img").attr("src",$('.img-box ul li').eq(num).find('img').attr('src'));
    }
});

body, html{
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-box">
		  <ul>
			<li>
			  <div class="mask">
				<div class="mag">
				  <div class="plus">index 0</div>
				</div>
			  </div>
			</li>
			<li>
			  <div class="mask">
				<div class="mag">
				  <div class="plus">index 1</div>
				</div>
			  </div>
			</li>
			<li>
			  <div class="mask">
				<div class="mag">
				  <div class="plus">index 2</div>
				</div>
			  </div>
			</li>
			<li>
			  <div class="mask">
				<div class="mag">
				  <div class="plus">index 3</div>
				</div>
			  </div>
			</li>
		  </ul>
		</div>
		<div class="full-screen-mask">
		  <div class="view-port">
			<div class="pre">
			  <span>-</span>
			</div>
			<div class="pic"><img /></div>
			<div class="next">
			  <span>+</span>
			</div>

		  </div>
		  <div class="close">
			<span></span>
			<span></span>
		  </div>
		</div>