Question

我已经下载了这段代码，它正在运行但是当我点击上一张和下一张图片的那段时间它无法正常工作时，我不知道会做什么... $（＆＃34; .pic img＆＃34 ;）。attr（＆＃34; src＆＃34;，＆＃34; images /这里我想要下一个图像src值＆＃34;）;

<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>

以前的图像和下一个图像在jquery中不起作用

1 个答案: