<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>服装滑动展示效果jquery代码</title>
<meta name="description" content="Custom jQuery product slider built off the Moving Boxes slider with FancyBox built in." />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="fancybox/fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom2").fancybox({
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500,
'overlayOpacity' : 0.6,
'overlayColor' : '#000'
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
</head>
<body>
<div id="demo-outer">
<div id="wrapper" ></div>
<!-- Slider Outer Starts --> <div id="slider-outer" >
<!-- Slider Starts -->
<div id="slider">
<img class="scrollButtons left" src="images/arrow-left.png" alt="" />
<!-- Scroll Starts Here -->
<div style="overflow: hidden;" class="scroll">
<!-- Scroll Container Starts -->
<div class="scrollContainer">
<!-- Panel Starts -->
<div class="panel" id="panel_1">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img6.jpg" alt="" />
<p>math problem (charcoal)<br />
<a class="zoom2" href="images/5-2.jpg" target="_blank" rel="group6">More Views</a>
<a class="zoom2" href="images/5-3.jpg" target="_blank" rel="group6"></a>
<a class="zoom2" href="images/img6.jpg" target="_blank" rel="group6"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_2">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img2.jpg" alt="" />
<p>path to nowhere<br />
<a class="zoom2" href="images/red-1.jpg" target="_blank" rel="group2">More Views</a>
<a class="zoom2" href="images/red-2.jpg" target="_blank" rel="group2"></a>
<a class="zoom2" href="images/img2.jpg" target="_blank" rel="group2"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_3">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img3.jpg" alt="" />
<p>and then I woke up<br />
<a class="zoom2" href="images/ss-1.jpg" target="_blank" rel="group3">More Views</a>
<a class="zoom2" href="images/ss-2.jpg" target="_blank" rel="group3"></a>
<a class="zoom2" href="images/img3.jpg" target="_blank" rel="group3"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_4">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img4.jpg" alt="" />
<p>one hundred<br />
<a class="zoom2" href="images/100-1.jpg" target="_blank" rel="group4">More Views</a>
<a class="zoom2" href="images/100-2.jpg" target="_blank" rel="group4"></a>
<a class="zoom2" href="images/img4.jpg" target="_blank" rel="group4"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_5">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img5.jpg" alt="" />
<p>math problem<br />
<a class="zoom2" href="images/5-1.jpg" target="_blank" rel="group5">More Views</a>
<a class="zoom2" href="images/img5.jpg" target="_blank" rel="group5"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_6">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img1.jpg" alt="" />
<p>seven days a week<br />
<a class="zoom2" href="images/7-1.jpg" target="_blank" rel="group1">More Views</a>
<a class="zoom2" href="images/7-2.jpg" target="_blank" rel="group1"></a>
<a class="zoom2" href="images/img1.jpg" target="_blank" rel="group1"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_7">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img7.jpg" alt="" />
<p>there's more to life<br />
<a class="zoom2" href="images/more-1.jpg" target="_blank" rel="group7">More Views</a>
<a class="zoom2" href="images/more-2.jpg" target="_blank" rel="group7"></a>
<a class="zoom2" href="images/img7.jpg" target="_blank" rel="group7"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_8">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img8.jpg" alt="" />
<p>Label info here<br />
<a class="zoom2" href="images/e-1.jpg" target="_blank" rel="group8">More Views</a>
<a class="zoom2" href="images/e-2.jpg" target="_blank" rel="group8"></a>
<a class="zoom2" href="images/img8.jpg" target="_blank" rel="group8"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_9">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img9.jpg" alt="" />
<p>Words aren't always meant to be read<br />
<a class="zoom2" href="images/w-1.jpg" target="_blank" rel="group9">More Views</a>
<a class="zoom2" href="images/w-2.jpg" target="_blank" rel="group9"></a>
<a class="zoom2" href="images/img9.jpg" target="_blank" rel="group9"></a></p>
<!-- Image Ends --> </div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
</div> <!-- SCroll Container Ends -->
</div>
<!-- Scroll Ends Here -->
<img class="scrollButtons right" src="images/arrow-right.png" alt="right" />
</div>
<!-- Slider Ends -->
</div>
<!-- Slider Outer Ends -->
</div>
</body>
</html> |
注册 登录
