

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head><title> 4 5 </title> 6 7 <style type="text/css"> 8 .sliderbox{height:150px;overflow:hidden;margin:6px 0 0 0; border:#e9e9ea solid 1px; padding-top:14px;float:left;} 9 .sliderbox a{text-align:center;text-decoration:none;} 10 .sliderbox .arrow{width:38px;height:104px;background:url(../images/arrow-btn.jpg) no-repeat;cursor:pointer;float:left;} 11 .sliderbox .left{float:left;background-position:0 0;} 12 .sliderbox .left.dasabled{background-position:0 -127px;} 13 .sliderbox .right{float:right;background-position:-44px 0;} 14 .sliderbox .right.dasabled{background-position:-44px -127px;} 15 16 .sliderbox .slider{float:left;height:504px;width:620px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;} 17 .sliderbox .slider ul{position:absolute;left:0;width:auto;height: 160px; overflow:hidden; list-style:none;float:left;padding:0;} 18 .sliderbox .slider li{float:left;width:158px;height:134px;text-align:center; margin:0 0 0 0; padding:0;list-style:none;} 19 .zoombox p{ font-size:14px; color:#666; line-height:25px; height:auto} 20 </style> 21 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 22 <script type="text/javascript"> 23 24 function SetSlider(thumbnail, btn_right, btn_left) { 25 26 var $slider = $('#' + thumbnail + ' ul'); 27 var $slider_child_l = $('#' + thumbnail + ' ul li').length; 28 var $slider_width = $('#' + thumbnail + ' ul li').width(); 29 $slider.width($slider_child_l * $slider_width); 30 31 var slider_count = 0; 32 var show_Item_count = 4; 33 if ($slider_child_l <= show_Item_count) { 34 return; 35 } 36 $("#" + thumbnail + " li a").click(function() { 37 $("#" + thumbnail + " li.current").removeClass("current"); 38 $(this).parents("li").addClass("current"); 39 return true; 40 }); 41 42 if ($slider_child_l < show_Item_count) { 43 $('#' + btn_right).css({ cursor: 'auto' }); 44 $('#' + btn_right).removeClass("dasabled"); 45 } 46 47 $('#' + btn_right).click(function() { 48 if ($slider_child_l < show_Item_count || slider_count >= $slider_child_l - show_Item_count) { 49 return false; 50 } 51 52 slider_count++; 53 $slider.animate({ left: '-=' + $slider_width + 'px' }, 'fast'); 54 slider_pic(); 55 }); 56 57 $('#' + btn_left).click(function() { 58 if (slider_count <= 0) { 59 return false; 60 } 61 slider_count--; 62 $slider.animate({ left: '+=' + $slider_width + 'px' }, 'fast'); 63 slider_pic(); 64 }); 65 66 function slider_pic() { 67 if (slider_count >= $slider_child_l - show_Item_count) { 68 $('#' + btn_right).css({ cursor: 'auto' }); 69 $('#' + btn_right).addClass("dasabled"); 70 } 71 else if (slider_count > 0 && slider_count <= $slider_child_l - show_Item_count) { 72 $('#' + btn_left).css({ cursor: 'pointer' }); 73 $('#' + btn_left).removeClass("dasabled"); 74 $('#' + btn_right).css({ cursor: 'pointer' }); 75 $('#' + btn_right).removeClass("dasabled"); 76 } 77 else if (slider_count <= 0) { 78 $('#' + btn_left).css({ cursor: 'auto' }); 79 $('#' + btn_left).addClass("dasabled"); 80 } 81 } 82 } 83 </script> 84 85 <script type="text/javascript"> 86 $(document).ready(function() { 87 SetSlider('HJContainer', 'hj_right', 'hj_left'); 88 }); 89 90 </script> 91 92 </head> 93 94 <body> 95 96 <div class="sliderbox"> 97 <div id="hj_left" class="arrow left dasabled"> 98 </div> 99 <div class="slider" id="HJContainer"> 100 <ul id="hjFile"> 101 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg" 102 target="_blank" title="一等奖"> 103 <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138" 104 height="104" alt="一等奖" /> 105 <br /> 106 一等奖</a></li> 107 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg" 108 target="_blank" title="一等奖"> 109 <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138" 110 height="104" alt="一等奖" /> 111 <br /> 112 一等奖</a></li> 113 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg" 114 target="_blank" title="二等奖"> 115 <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138" 116 height="104" alt="二等奖" /> 117 <br /> 118 二等奖</a></li> 119 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg" 120 target="_blank" title="三等奖"> 121 <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138" 122 height="104" alt="三等奖" /> 123 <br /> 124 三等奖</a></li> 125 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg" 126 target="_blank" title="市一等奖"> 127 <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138" 128 height="104" alt="市一等奖" /> 129 <br /> 130 市一等奖</a></li> 131 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg" 132 target="_blank" title="三档"> 133 <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138" 134 height="104" alt="三档" /> 135 <br /> 136 三档</a></li> 137 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg" 138 target="_blank" title="你是何人"> 139 <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138" 140 height="104" alt="你是何人" /> 141 <br /> 142 你是何人</a></li> 143 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg" 144 target="_blank" title="你是何人"> 145 <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138" 146 height="104" alt="你是何人" /> 147 <br /> 148 你是何人</a></li> 149 <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg" 150 target="_blank" title="天天"> 151 <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138" 152 height="104" alt="天天" /> 153 <br /> 154 天天</a></li> 155 </ul> 156 </div> 157 <div id="hj_right" class="arrow right"> 158 </div> 159 </div> 160 161 </body> 162 </html>
<!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><title>
</title>
<style type="text/css">
.sliderbox{height:150px;overflow:hidden;margin:6px 0 0 0; border:#e9e9ea solid 1px; padding-top:14px;float:left;}
.sliderbox a{text-align:center;text-decoration:none;}
.sliderbox .arrow{width:38px;height:104px;background:url(../images/arrow-btn.jpg) no-repeat;cursor:pointer;float:left;}
.sliderbox .left{float:left;background-position:0 0;}
.sliderbox .left.dasabled{background-position:0 -127px;}
.sliderbox .right{float:right;background-position:-44px 0;}
.sliderbox .right.dasabled{background-position:-44px -127px;}
.sliderbox .slider{float:left;height:504px;width:620px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}
.sliderbox .slider ul{position:absolute;left:0;width:auto;height: 160px; overflow:hidden; list-style:none;float:left;padding:0;}
.sliderbox .slider li{float:left;width:158px;height:134px;text-align:center; margin:0 0 0 0; padding:0;list-style:none;}
.zoombox p{ font-size:14px; color:#666; line-height:25px; height:auto}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function SetSlider(thumbnail, btn_right, btn_left) {
var $slider = $('#' + thumbnail + ' ul');
var $slider_child_l = $('#' + thumbnail + ' ul li').length;
var $slider_width = $('#' + thumbnail + ' ul li').width();
$slider.width($slider_child_l * $slider_width);
var slider_count = 0;
var show_Item_count = 4;
if ($slider_child_l <= show_Item_count) {
return;
}
$("#" + thumbnail + " li a").click(function() {
$("#" + thumbnail + " li.current").removeClass("current");
$(this).parents("li").addClass("current");
return true;
});
if ($slider_child_l < show_Item_count) {
$('#' + btn_right).css({ cursor: 'auto' });
$('#' + btn_right).removeClass("dasabled");
}
$('#' + btn_right).click(function() {
if ($slider_child_l < show_Item_count || slider_count >= $slider_child_l - show_Item_count) {
return false;
}
slider_count++;
$slider.animate({ left: '-=' + $slider_width + 'px' }, 'fast');
slider_pic();
});
$('#' + btn_left).click(function() {
if (slider_count <= 0) {
return false;
}
slider_count--;
$slider.animate({ left: '+=' + $slider_width + 'px' }, 'fast');
slider_pic();
});
function slider_pic() {
if (slider_count >= $slider_child_l - show_Item_count) {
$('#' + btn_right).css({ cursor: 'auto' });
$('#' + btn_right).addClass("dasabled");
}
else if (slider_count > 0 && slider_count <= $slider_child_l - show_Item_count) {
$('#' + btn_left).css({ cursor: 'pointer' });
$('#' + btn_left).removeClass("dasabled");
$('#' + btn_right).css({ cursor: 'pointer' });
$('#' + btn_right).removeClass("dasabled");
}
else if (slider_count <= 0) {
$('#' + btn_left).css({ cursor: 'auto' });
$('#' + btn_left).addClass("dasabled");
}
}
}
</script>
<script type="text/javascript">
$(document).ready(function() {
SetSlider('HJContainer', 'hj_right', 'hj_left');
});
</script>
</head>
<body>
<div class="sliderbox">
<div id="hj_left" class="arrow left dasabled">
</div>
<div class="slider" id="HJContainer">
<ul id="hjFile">
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
target="_blank" title="一等奖">
<img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
height="104" alt="一等奖" />
<br />
一等奖</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
target="_blank" title="一等奖">
<img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
height="104" alt="一等奖" />
<br />
一等奖</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
target="_blank" title="二等奖">
<img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
height="104" alt="二等奖" />
<br />
二等奖</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
target="_blank" title="三等奖">
<img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
height="104" alt="三等奖" />
<br />
三等奖</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
target="_blank" title="市一等奖">
<img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
height="104" alt="市一等奖" />
<br />
市一等奖</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
target="_blank" title="三档">
<img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
height="104" alt="三档" />
<br />
三档</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
target="_blank" title="你是何人">
<img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
height="104" alt="你是何人" />
<br />
你是何人</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
target="_blank" title="你是何人">
<img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
height="104" alt="你是何人" />
<br />
你是何人</a></li>
<li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
target="_blank" title="天天">
<img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
height="104" alt="天天" />
<br />
天天</a></li>
</ul>
</div>
<div id="hj_right" class="arrow right">
</div>
</div>
</body>
</html>