参考课堂案例jquery图片滚动效果实现微博首页内容滚动效

本文链接：https://blog.csdn.net/dunyanan1/article/details/7413246

<!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 src="../jquery/jquery-1.7.1.js"></script>

<style>
.scroll{
	position:relative;
	width:600px;
	background-color:#999;
	padding:2px;
	height:175px;
	overflow:hidden;
	
}
.items{
	position:absolute;
	margin:0px 0px;
	padding:0px 0px;
	list-style-type:none;
	width:9999em;
}
.items li{
	
	}

</style>

<script language="javascript" type="text/javascript">

$(function(){
	//定义第几个图片移动
	var i=1;
	  //设置延迟时间
	var delay=3000; //越大越慢
	//设定速度
	var speed="slow"; //fast normal中
	//设置当前屏
	var nowPage=1;
	//每页显示的个数
	var pageSize=3;
	var pages=Math.ceil($(".items > li").length /pageSize);
	//alert( pages);
	//设置方向的标志，并且约定，当dir=true的时候向右移动
	var dir=true;
	
	
	//增加按钮的监听事件
 $("#prev").click(function(){
	 //判断是否是第一屏
	 //调用向前移动的方法
	  prev();
	
 });	
	
	//点击向右移动
	
  $("#next").click(function(){
	  //调用向后移动的方法
	  Next();
    });	
	
	
		
	function goMove(location){
	    var top=$(".items > li").eq(location).position().top;

	   //让所有的ul产生动画  向右移动
        $(".items").animate({top:-top},"swing").show("show");	
		
	}
	
	//定义向后移动的方法
 function Next(){
		
		if(nowPage==pages){
			//当最后一屏时，不能向右移动
			dir=false;
		 return;  
	  }
	   //获取第i个图片距左的距离
	   goMove(nowPage*pageSize);
       i--;
	   //当前屏
	    nowPage++;	
		
 }
 function prev(){
	 if(nowPage==1){
		 //
		 dir=true;
		 return;
	  }
	  //当前页--
	   nowPage--;
	   //调用移动方法
	  goMove((nowPage-1)*pageSize);
      i++; 
 }
 
 //定时自动执行
 function autoPlay(){
	 //可以根据dir的状态值，判断是向前还是向后滚动
	 if(dir){
		 //如果dir=true，表示还没有到最后一屏，所以可以执行Next()
		Next(); 
	 }else{
		prev(); 
	 }
	  setTimeout(autoPlay,delay);
	 
 }

 autoPlay();
});
	
	
</script>
</head>

<body>
<div class="scroll">
   <ul class="items">
     <?php
	 //建立数据库的连接
       mysql_connect("localhost","root","");
	   mysql_select_db("db_wb");
	   mysql_query("set names utf8");
	   $sql="select c_date,c_content from comment order by c_id  desc limit 15";
	   echo $sql;
	  $res=mysql_query($sql);
	 $arr=array();
	 $strs="";
	  //遍历查询结果，并且拼装html代码
while($rows=mysql_fetch_assoc($res)){
	//拼装下拉选项
	//将$rows的每一个数据都给$arr 相当于复制
	$arr[]=$rows;
	 
	}
	
    for($i=0;$i<=count($arr)-1;$i++){
     $strs.="<li >在##“".$arr[$i]['c_date']."”发表了@@“".$arr[$i]['c_content']."”</li><hr>" ;
	}
	
    echo $strs;
		
	
     ?> 
   </ul>
  

</div>
<input type="button" value="下" id="prev" />
<input type="button" value="上" id="next" />

</body>
</html>

http://hbcsdn.tk/forum.php?mod=viewthread&tid=48&extra=