jquery实现动画效果

最新推荐文章于 2022-08-13 17:33:37 发布

honey_tao

最新推荐文章于 2022-08-13 17:33:37 发布

阅读量649

点赞数 1

文章标签： jquery function swing javascript button delay

本文链接：https://blog.csdn.net/honey_th/article/details/7412780

版权

<!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 language="javascript" type="text/javascript" src="../include/jquery.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function(){

//alert($(".items>li").length);
//定义第几个图片移动
var i=1;
//设置延迟时间
var delay=1000; //越大越慢
var speed="slow";

var nowPage=1;
//每屏移动图片的个数
var pageSize=3;
var pages=Math.ceil($(".items>li").length/pageSize);
//设置方向的标志,当dir=true的时候向后移动
var dir=true;

//增加按钮的监听事件
$("#prev").click(function(){

  Prev();


//获取第i个图片居左的距离
var left=$(".items > li").eq((nowPage-1)*pageSize).position().left;

//让ul产生动画，向左移动
$(".items").animate({left:-left},"swing").show("slow");

     });

//点击了向右移动
$("#next").click(function(){
    Next();

//获取第i个图片居左的距离
var left=$(".items > li").eq(nowPage*pageSize).position().left;
//alert(left);

//让ul产生动画，向左移动
$(".items").animate({left:-left},"swing").show("slow");


  });

   function goMove(location){

//获取第i个图片居左的距离
var left=$(".items > li").eq(location).position().left;

//让ul产生动画，向左移动
$(".items").animate({left:-left},"swing").show("slow");


    }

//定义向后移动
function Next(){
   if(nowPage==pages){

   //当最后一屏不能再向后移动了
   dir=false;
   return;
    }
    //调用nove的方法
   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();

   }else{

    Prev();
    }

  setTimeout(autoPlay,delay);

  }
   autoPlay();

});

</script>
<style>
#scroll{
position:relative;
background-color:#CCC;
padding:2px;
width:600px;
height:150px;
overflow:hidden;
}

.items{
position:absolute;
margin:0px 0px;
padding:0px 0px;
list-style-type:none;
width:9999em;}

.items li{
float:left;}

</style>
</head>

honey_tao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现动画效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">动画效果 $(document).ready(function(){ //alert($(".items>li").length); //定义第几个图片移动 var i=
复制链接

扫一扫