<!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">
*{padding:0; margin:0;}
ul,li{list-style:none;}
#wrap{width:960px; padding:100px 0; pink; margin:0 auto; position:relative;}
#slideWrap{width:790px; height:188px; overflow:hidden; position:relative; margin-left:90px;}
#slide{width:3200px; position:absolute; top:0;}
#slide ul{width:3200px; clear:both;}
#slide ul li{float:left; width:196px; padding:0 1px;}
.prev,.next,.next1,.prev1{width:50px; height:50px; display:block; position:absolute; color:#fff; top:158px;}
.prev,.next{background:#906;}
.prev1,.next1{background:#09F;}
.prev,.prev1{left:20px;}
.next,.next1{right:20px;}
</style>
<script type="text/javascript" src="../../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#next").click(function(){
$("#prev").removeClass("prev").addClass("prev1");
var x=$("#slide").position().left;
if(x>(-2300)){
$("#slide").stop(true,false).animate({left:"-=790px"},"normal");
}else{
$("#next").removeClass("next1").addClass("next");
};
});
$("#prev").click(function(){
$("#next").removeClass("next").addClass("next1");
var x=$("#slide").position().left;
if(x<=(-790)){
$("#slide").stop(true,false).animate({left:"+=790px"},"normal");
}else{
$("#prev").removeClass("prev1").addClass("prev");
};
});
})
</script>
</head>
<body>
<div id="wrap">
<a href="#" class="prev" id="prev">prev</a>
<a href="#" class="next1" id="next">next</a>
<div id="slideWrap">
<div id="slide">
<ul>
<li><a href="#"><img src="20120220.png" /></a></li>
<li><a href="#"><img src="20120217.jpg" /></a></li>
<li><a href="#"><img src="20120218.jpg" /></a></li>
<li><a href="#"><img src="20120219.png" /></a></li>
<li><a href="#"><img src="20120220.png" /></a></li>
<li><a href="#"><img src="20120217.jpg" /></a></li>
<li><a href="#"><img src="20120218.jpg" /></a></li>
<li><a href="#"><img src="20120219.png" /></a></li>
<li><a href="#"><img src="20120220.png" /></a></li>
<li><a href="#"><img src="20120217.jpg" /></a></li>
<li><a href="#"><img src="20120218.jpg" /></a></li>
<li><a href="#"><img src="20120219.png" /></a></li>
<li><a href="#"><img src="20120220.png" /></a></li>
<li><a href="#"><img src="20120217.jpg" /></a></li>
<li><a href="#"><img src="20120218.jpg" /></a></li>
<li><a href="#"><img src="20120219.png" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
