Предыдущее изображение и следующее изображение не работает в jQuery

Question

Я загрузил этот код, он работает, но когда я нажимаю на предыдущий и следующий изображения, в этот раз он не работает, я не знаю, что будет делать ... $ (".pic img"). attr ("src", "images/Here i want next image src value");

<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

UPDATE

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

UPDATE 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')); 
    } 
}); 

см. если вы нажмете на всю ссылку, число будет правильным. Я думаю, что ваша php-функция или неверный идентификатор изображения.

$(document).ready(function() { 
 
    num = 0; 
 
    $(".img-box ul li").click(function() { 
 
     num = $(this).index(); 
 
\t \t 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--; 
 
     } 
 
\t \t 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++; 
 
     } 
 
\t \t alert(num) 
 
     //$(".pic img").attr("src",$('.img-box ul li').eq(num).find('img').attr('src')); 
 
    } 
 
});

body, html{ 
 
\t cursor:pointer; 
 
}

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

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