<!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>
參考課堂案例jquery圖片滾動效果實現微博首頁內容滾動效
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章