点击按钮左右滚动的图片框

最新推荐文章于 2021-09-24 18:50:09 发布

guwen1991

最新推荐文章于 2021-09-24 18:50:09 发布

阅读量1k

点赞数

分类专栏：网页特效

本文链接：https://blog.csdn.net/oGuWen1/article/details/12746207

版权

网页特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
    var page = 1;
    var i = 4; //每版放4个图片
	var len = $(".prolist_content ul li").length;
	var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
	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); //通过改变left值，跳转到最后一个版面
				page = page_count;
			}else{
				$parent.animate({ left : '+='+none_unit_width }, 800);  //通过改变left值，达到每次换一个版面
				page--;
			}
		}
    });
});
</script>
<style>
 
/*右侧样式*/
*{ margin:0px; padding:0px;}
.content_right{
	background:#eee;
	border : 1px solid #AAAAAA;
	width: 586px;
	float:left;
}
/*新款上市样式*/
.prolist { 
	position:relative; 
	height: 220px;
	margin-bottom:10px; 
	overflow:hidden; 
	border: 1px solid #AAAAAA;
	background:#FFFFFF;
}
 .prolist .prolist_content{
 	position:absolute; 
	width:1800px;
	top:26px; 
	left:0px;
	padding:20px 0 0 8px;
}
.prolist ul{  
	margin-bottom:10px; 
    float:left;
	height: 220px;
	padding:0px;
}
.prolist ul li { 
	float:left;
	display:inline;
	text-align:center;
	margin-right:22px;  
}
.prolist ul li span { 
	display:block;
	overflow:hidden; 
}
 .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>
</head>

<body>
<div class="content_right 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>
  

</body>
</html>

效果图：

guwen1991

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
点击按钮左右滚动的图片框

无标题文档$(function(){ var page = 1; var i = 4; //每版放4个图片 var len = $(".prolist_content ul li").length; var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数 var none_unit_wi
复制链接

扫一扫