jQ实现图片的滚动
不连续（点击可以控制的）代码：
图示：
<!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>Jane shopping</title>
<!--css begin-->
<style type="text/css">
/*基本样式*/
* { margin:0; padding:0; word-wrap:break-word; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
img { border:none; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/
.global_module {
position:relative;
background:#EEEEEE;
padding-bottom:8px;
}
.global_module h3 {
height:26px;
background:#3B5998;
color:#FFF;
line-height:26px;
text-indent:6px;
}
#content{
margin:10px auto;
width: 800px;
}
/*右侧样式*/
.content_right{
background:#eee;
border : 1px solid #AAAAAA;
width: 586px;
float:left;
}
/*新款上市样式*/
.content_right .prolist {
position:relative;
height: 220px;
margin-bottom:10px;
overflow:hidden;
border: 1px solid #AAAAAA;
background:#FFFFFF;
}
.content_right .prolist .prolist_content{
position:absolute;
width:1800px;
top:26px;
left:0px;
padding:20px 0 0 8px;
}
.content_right .prolist ul{
margin-bottom:10px;
float:left;
height: 220px;
}
.content_right .prolist ul li {
float:left;
display:inline;
text-align:center;
margin-right:22px;
}
.content_right .prolist ul li span {
display:block;
overflow:hidden;
}
.content_right .prolist ul li img {
display:block;
width:124px;
height:124px;
background:#EEE; border:0;
}
.module_left_right{
position:absolute;
top:5px;
right:10px;
cursor:pointer;
}
</style>
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*产品列表横向滚动*/
$(function(){
var page = 1;
var i = 4; //每版放4个图片
var len = $(".prolist_content ul li").length; //总图片的个数
var page_count = Math.ceil(len / i); //ceil()函数，只要不是整数，就往大的方向取最小的整数
var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位
var $parent = $(".prolist_content");
//向右 按钮
$(".goRight").click(function(){
if(!$parent.is(":animated") ){ //判断是否处于动画状态
if( page==page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$parent.animate({ left : 0},800); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$parent.animate({ left:'-='+none_unit_width},800); //通过改变left值，达到每次换一个版面
page++;
}
}
});
//向左 按钮
$(".goLeft").click(function(){
if( !$parent.is(":animated") ){
if( page==1 ){
$parent.animate({ left : '-='+none_unit_width*(page_count-1)},800);
page = page_count;
}else{
$parent.animate({ left : '+='+none_unit_width },800);
page--;
}
}
});
});
</script>
</head>
<body>
<!--主体开始-->
<div id="content">
<div class="content_right">
<div class="global_module prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
</ul>
</div>
<p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
</div>
</div>
</div>
<!--主体结束-->
</body>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jane shopping</title>
<style type="text/css">
/*基本样式*/
* { margin:0; padding:0; word-wrap:break-word; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
img { border:none; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/
.global_module {
position:relative;
background:#EEEEEE;
padding-bottom:8px;
}
.global_module h3 {
height:26px;
background:#3B5998;
color:#FFF;
line-height:26px;
text-indent:6px;
}
#content{
margin:10px auto;
width: 800px;
}
/*右侧样式*/
.content_right{
background:#eee;
border : 1px solid #AAAAAA;
width: 586px;
float:left;
}
/*新款上市样式*/
.content_right .prolist {
position:relative;
height: 220px;
margin-bottom:10px;
overflow:hidden;
border: 1px solid #AAAAAA;
background:#FFFFFF;
}
.content_right .prolist .prolist_content{
position:absolute;
width:1800px;
top:26px;
left:0px;
padding:20px 0 0 8px;
}
.content_right .prolist ul{
margin-bottom:10px;
float:left;
height: 220px;
}
.content_right .prolist ul li {
float:left;
display:inline;
text-align:center;
margin-right:22px;
}
.content_right .prolist ul li span {
display:block;
overflow:hidden;
}
.content_right .prolist ul li img {
display:block;
width:124px;
height:124px;
background:#EEE; border:0;
}
</style>
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*产品列表横向滚动*/
$(function(){
var $this = $(".prolist_content");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
prolist_content($this);
},1000);
}).trigger("mouseleave");
});
function prolist_content(obj){
var $self = obj.find("ul:first");
var none_unit_width = $(".prolist").width(); //获取行宽
$self.animate({"marginLeft" : - none_unit_width + "px"}, 600,function(){
$self.css({marginLeft:0}).find(".prolist").appendTo($self); //appendTo能直接移动元素
})
}
</script>
</head>
<body>
<!--主体开始-->
<div id="content">
<div class="content_right">
<div class="global_module prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--主体结束-->
</body>
</html>
备注：只是换了js的部分
浙公网安备 33010602011771号