Jquery实现简单的图片滚动效果

最新推荐文章于 2022-08-03 15:12:16 发布

u013497151

最新推荐文章于 2022-08-03 15:12:16 发布

阅读量1.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wjw0130/article/details/44678453

版权

JavaScript 专栏收录该内容

25 篇文章 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=utf-8" />
<title>图片滚动</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
 body,ul,li { padding:0; margin:0}
 ul,li { list-style:none}
.person_pic{ width:72%; height:auto; margin-top:18%; margin-left:28%;}
.per-pic-scroll {height:200px; position:relative;margin-top:5%; margin-left:10px;}
.per-pic-scroll .pre,.per-pic-scroll .next { 
position:absolute; display:block; width:35px; height:50px; 
background-color:#999999;top:23px; color:#FFF; text-align:center; 
line-height:50px;}
.per-pic-scroll .pre { left:16px}
.per-pic-scroll .next { right:50px}
.img-list { position:relative; width:78%; height:150px; margin-left:60px; overflow:hidden}
.img-list ul { width:200%;} //这里一定要大点
.img-list li { float:left; display:inline; width:135px; margin-right:10px; height:150px; background-color:#BDBDDF; text-align:center; line-height:100px;}
.img-list li img{width:135px; height:150px;}
.per-pic-scroll a{ text-decoration:none; }
</style>

<script type="text/javascript">
	function Per_pic_scroll(){ 
	  var pre_person , next_person , image , wid;
	  pre_person = $(".pre") , next_person = $(".next") , image = $(".img-list").find('ul');
	  wid = $(".img-list").find('ul').find("li").outerWidth(false);

	  next_person.click(function(){
			image.animate({'margin-left':-wid},function()
					  {
					   image.find('li').eq(0).appendTo(image);
					   
					   image.css({'margin-left':0});
					   });
			});
	  pre_person.click(function(){

				image.find('li:last').prependTo(image);

				image.css({'margin-left':-wid});

				image.animate({'margin-left':0});

				});
	}
$(function(){
	
	 Per_pic_scroll();

})
</script>
</head>

<body>

 <div class="person_pic">
		<div class="per-pic-scroll">
		
			 <span class="pre"><a href="#" οnclick="return false"><</a></span>
			 <span class="next"><a href="#" οnclick="return false">></a></span>
			 <div class="img-list">
				 <ul>
					 <li>1</li>
					 <li>2</li>
					 <li>3</li>
					 <li>4</li>
					 <li>5</li>
					 <li>6</li>
					 <li>7</li>
					 <li>8</li>
					 <li>9</li>
				</ul>
		  </div>
	  </div>
  </div>
</body>
</html>

u013497151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现简单的图片滚动效果

图片滚动 body,ul,li { padding:0; margin:0} ul,li { list-style:none}.person_pic{ width:72%; height:auto; margin-top:18%; margin-left:28%;}.per-pic-scroll {height:200px; position:relative;margin-top:5
复制链接

扫一扫

专栏目录