jquery 图片传送带

最新推荐文章于 2021-09-06 14:37:46 发布

原创最新推荐文章于 2021-09-06 14:37:46 发布 · 496 阅读

CC 4.0 BY-SA版权

jquery 图片传送带 - JQD - The future is in my

<!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">
img{border:none}
img.enlarged{
position:absolute;
z-index:5;
cursor:pointer;
}
.enlarged-control{
position:absolute;
z-index:6;
cursor:pointer;
}
#featured-books{
position:relative;
background:#ddd;
width:440px;
height:186px;
overflow:scroll;
margin:1em auto;
padding:0;
text-align:center;
z-index:2;
}
#featured-books .covers{
position:relative;
width:4040px;
z-index:1
}
#featured-books a{
float:left;
margin:10px;
height:146px;
}
#featured-books .price{
display:none;
}
#featured-books .control{
position:absolute;
z-index:3;
left:0;
top:0;
width:120px;
height:146px;
}
.enlarged-price{
   background:#373c40;
   color:#fff;
   padding:5px;
   font-size:18px;
   font-weight:bold;
   text-align:right;
   position:absolute;
   z-index:6;
}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){
function createControl(src){
return $("<img />")
   .attr("src",src)
   .addClass("control")
   .css("opacity",0.6)
   .css("display","none")
}
//左图片
var $leftRollover = createControl("imgs/ico/left.png");
//右图片
var $rightRollover = createControl("imgs/ico/right.png");
//放大图片
var $enlargeRollover = createControl("imgs/ico/enlarge.ico");
//大图
var $enlargedCover = $("<img />").addClass("enlarged").hide().appendTo("body");
//close
var $closeButton = createControl("imgs/ico/close.gif")
      .addClass("enlarged-control")
      .appendTo("body");
var $priceBadge = $("<div />")
.addClass("enlarged-price")
.css("opacity",0.6)
var spacing = 140;
$('#featured-books').css({
'width':spacing*3,
'height':"166px",
"overflow":"hidden"
}).find(".covers a").css({
"float":"none",
"position":"absolute",
"left":1000
})
var setUpCovers = function(){
     var $covers = $("#featured-books .covers a");
     //$covers.unbind("click");
     $covers.unbind("click mouseenter mouseleave");
     $covers.eq(0)//left左侧图像单击向右滚动
     .css('left',0)
     .click(function(event){
       /*
        $covers.eq(2).css("left",1000);
        $covers.eq($covers.length-1).prependTo("#featured-books .covers");
        setUpCovers();
        event.preventDefault();
       */
       $covers.eq(0).animate({'left':spacing},'fast');
       $covers.eq(1).animate({'left':spacing*2},'fast');
       $covers.eq(2).animate({'left':spacing*3},'fast');
       $covers.eq($covers.length-1)
        .css("left",-spacing)
        .animate({'left':0},'fast',function(){
         $(this).prependTo("#featured-books .covers")
         setUpCovers();
        })
       event.preventDefault();
     })
     .hover(function(){
       $leftRollover.appendTo(this).show();
     },function(){
       $leftRollover.hide();
     })
     $covers.eq(2)//right右侧图像单击向左滚动
     .css("left",spacing*2)
     .click(function(event){
     /* $covers.eq(0).css("left",1000);
       $covers.eq(0).appendTo("#featured-books .covers");
       setUpCovers();
       event.preventDefault();*/
          $covers.eq(0)
        .animate({'left':-spacing},'fast',function(){
                $(this).appendTo("#featured-books .covers");
                setUpCovers();
        })
       $covers.eq(1).animate({'left':0},'fast');
       $covers.eq(2).animate({'left':spacing},'fast');
       $covers.eq(3)
        .css("left",spacing*3)
        .animate({'left':spacing*2},'fast');
       event.preventDefault();
     })
     .hover(function(){
       $rightRollover.appendTo(this).show();
     },function(){
       $rightRollover.hide();
     })
     //中间图片center
     $covers.eq(1)
     .css("left",spacing)
     .click(function(event){
       $enlargedCover.attr("src",$(this).attr('href'))
        .css({
         'left':($('body').width()-360)/2,
         'top':100,
         'width':360,
         'height':444
        })
        .show()
        .one("click",function(){
         $closeButton.unbind('click').hide()
         $enlargedCover.fadeOut();
        });
        var price = $(this).find(".price").text();
        $priceBadge.css({
         'left':($('body').width()-360)/2,
         "top":100
        }).text(price).show();
     /* $closeButton
        .css({
         'left':($('body').width()-360)/2,
         'top':100,
        })
        .show()
        .click(function(){
         $enlargedCover.click();
        }); */
       event.preventDefault();
     })
     .hover(function(){
       $enlargeRollover.appendTo(this).show();
     },function(){
       $enlargeRollover.hide();
     })
}
setUpCovers();
})
</script>
</head>
<body>
<div id="featured-books">
<div class="covers">
<?php
$dir = "imgs/";
if ($handle = opendir($dir)) {
   $i = 0;
   while (false !== ($file = readdir($handle))) {
   $path = $dir.$file;

      if(is_file($path)){
      $price = str_pad($i++, 2, 0, STR_PAD_LEFT);
echo <<<ETO
            <a href="{$path}">
       <img src="{$path}" width="120" height="148"/>
       <span class="price">$35.{$price}</span>
      </a>
ETO;
      }
   }
}

?>
</div>
</div>
</body>
</html>