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

原创 2012年03月30日 22:10:10
<!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=

Android开发之实现图片自动滚动显示标签的ViewPager

Android中实现图片自动滚动的效果非常的常见,我们可以自己动画去实现功能。但是在Android中提供了一个ViewPager类,实现了滚动效果,在Android的extras目录下android-...
  • fengshizty
  • fengshizty
  • 2014年12月20日 18:09
  • 3388

1.jquery小案例的完成版分析 2.jQuery仿微博项目

1.jquery小案例的完成版分析 ·jQuery小案例分析 ·nav.js 获取navigation 下 ul 下 li 加载hover()事件,鼠标移入函数为当前对象的所有ul子元素,停止所...
  • Jye13
  • Jye13
  • 2013年04月24日 07:41
  • 1099

分享一款jQuery全屏滚动页面特性案例

分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。它们就像是竖着的图片轮转一样。 这样的页面有很多,如:iPh...
  • xmt1139057136
  • xmt1139057136
  • 2015年03月27日 13:46
  • 6174

仿新浪微博的Tab滑动效果、手势滑动

http://www.cnblogs.com/dwinter/archive/2012/02/27/AndroidViewPager多页面滑动切换以及动画效果.html...
  • userzhanghao123
  • userzhanghao123
  • 2014年05月04日 17:11
  • 729

微博发布框的jquery

textarea{ width: 300px; height: 300px; border: solid 1px #abcdef; } strong{ color: ...
  • u011263845
  • u011263845
  • 2015年05月26日 10:35
  • 942

多张图片连续滚动效果的制作方法

先制作向上滚动的效果:   插入代码: 〈!-- 指向链接图片url --〉 〈base href="http://www.it365cn.com"〉 〈div id=demo style=overf...
  • xck01
  • xck01
  • 2006年06月15日 12:07
  • 2901

javascript+css 实现滚动效果

简单的滚动效果: HTML文字滚动效果 *{ margin:0; padding:0; } .box{ width:500px; border:3px solid #ccc; m...
  • csdn9_14
  • csdn9_14
  • 2016年10月19日 21:29
  • 765

JQuery实现文字滚动效果-最简单的方法

陈**  购买  特惠体验三期.1万起投       李**  购买  特惠体验三期.1万起投&nb...
  • wlzx120
  • wlzx120
  • 2013年12月03日 21:51
  • 3586

前端动效--页面滑动

前端动效 scrolltop值恒等于0
  • sinat_26416969
  • sinat_26416969
  • 2016年10月17日 16:58
  • 27

jquery实现滚动到页面底部时无限加载内容的代码

由于时间关系没有整理封装,有空的时候再把他做成一个插件。但复制下来修改一下是可以用的。以下为实例: [javascript] view plain copy   ...
  • zgrkaka
  • zgrkaka
  • 2016年06月07日 17:21
  • 3587
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:参考课堂案例jquery图片滚动效果实现微博首页内容滚动效
举报原因:
原因补充:

(最多只允许输入30个字)