参考课堂案例jquery图片滚动效果实现微博首页内容滚动效
来源：互联网 发布：有机遇成功的数据 编辑：程序博客网 时间：2024/05/21 14:53
<!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=
