jQuery相册浏览

最新推荐文章于 2023-02-08 21:29:20 发布

jianghaoyuan

最新推荐文章于 2023-02-08 21:29:20 发布

阅读量764

点赞数

文章标签： jquery image function class list border

本文链接：https://blog.csdn.net/jianghaoyuan/article/details/5651796

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片相册</title>
<style type="text/css">

#main_image{

  border:5px solid #CFF;
  width:300px;
  height:190px;
  float:left;
  position:relative;

}

#main_image img{
  width:300px;
  height:190px;
}

#image_list{

  float:left;
  width:80px;
  height:190px;
  border:5px solid #CFF;
  text-align:center;
}

.image{
  width:75px;
  height:50px;
  border:1px solid #FFF;

}

#previous{

  width:75px;
  height:10px;
  /*border:5px solid #F00;*/
  border-bottom:3px solid red;
  border-top:3px solid red;
  border-bottom-color:#FFF;
  border-top-color:#FFF;
}

#next{

  width:75px;
  height:10px;
  /*border:5px solid #F00;*/
  border-bottom:3px solid red;
  border-top:3px solid red;
  border-bottom-color:#FFF;
  border-top-color:#FFF;

}

#box {

  width:400px;
  height:200px;
  border:5px solid #CFF;
  background-color:#F8F8F8;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
var images = document.getElementsByName("images_j");
var length = images.length;

function init_main(){
  $("#main_image_j").attr("src",images[0].value);
}

function init_image_list(){


  var previous = $("<img src='images/gotop.gif' id='previous' οnclick='previous_onclick();'/>");

  $("#image_list").append(previous);

  var image1 = $("<img/>");
  var image2 = $("<img/>");
  var image3 = $("<img/>");
  image1.attr({"src":images[images.length - 1].value,"id":images.length - 1,"class":"image"});
  image2.attr({"src":images[0].value,"id":0,"class":"image"});
  image3.attr({"src":images[1].value,"id":1,"class":"image"});
  image1.bind("click",function(){
   image_onclick(this);
  });
  image2.bind("click",function(){
   image_onclick(this);
  });
  image3.bind("click",function(){
   image_onclick(this);
  });
  $("#image_list").append(image1);
  $("#image_list").append(image2);
  $("#image_list").append(image3);


  var next = $("<img src='images/gobottom.gif' id='next' οnclick='next_onclick();'/>")
  $("#image_list").append(next);

}

function next_onclick(){

  $("#previous").next().remove();
  var third = $("#next").prev().attr("id");
  var id = parseInt(third) + 1;
  var image3 = $("<img/>");
  image3.bind("click",function(){
   image_onclick(this);
  });
  if(id > (images.length - 1)){
   image3.attr({"src":images[0].value,"id":0,"class":"image"});

}else{
image3.attr({"src":images[id].value,"id":id,"class":"image"});

  }
  $("#main_image_j").attr("src",images[third].value);
  $("#next").before(image3);
}

function previous_onclick(){
  $("#next").prev().remove();
  var first = $("#previous").next().attr("id");
//  alert(first);
  var id = parseInt(first) - 1;
  var image1 = $("<img/>");
  image1.bind("click",function(){
   image_onclick(this);
  });
  if(first == 0){
   image1.attr({"src":images[images.length - 1].value,"id":(images.length - 1),"class":"image"});
  }else{
   image1.attr({"src":images[id].value,"id":id,"class":"image"});
  }

  $("#main_image_j").attr("src",images[first].value);
  $("#previous").after(image1);

}

$(document).ready(function(){
  //初始化放大的图片
  init_main();

  //初始化图片列表
  init_image_list();

});

function image_onclick(obj){
  var id = obj.id;
  var first = $("#previous").next().attr("id");
  var second = $("#previous").next().next().attr("id");
  var third = $("#next").prev().attr("id");
  if(id == first ){
   previous_onclick();
  }
  if(id == third){
   next_onclick();
  }
}

</script>
</head>

<body>