用jquery实现仿淘宝焦点图的动画

最新推荐文章于 2022-05-05 07:15:00 发布

王浩

最新推荐文章于 2022-05-05 07:15:00 发布

阅读量1.6k

点赞数

分类专栏： jquery 文章标签： jquery function javascript button delay swing

本文链接：https://blog.csdn.net/youngerhao/article/details/7412960

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>
<style>
.scroll{
position:relative;
background-color:#CCC;
padding:2px;
width:600px;
height:150px;
overflow:hidden;
}

.items{

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

.items li{
float:left;
}

</style>
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>

$(document).ready(function (){
//设置延迟时间
var delay=3000;//越大越慢
//设定速度
var speed="slow"; //fast 快，normal 中
//每屏移动的图片的
var pageSize=3;

//定义第几个图片移动
//var i=1;
//设置当前屏
var nowPage=1;
//总屏数
var pages=Math.ceil($(".items>li").length/pageSize);
//设置方向的标志并且约定，当dir=true的时候，向后滚动
var dir=true;

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

//调用向前滚动
Prev();

});


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

     //调用向后滚动的方法
     Next();

});

function goMove(location){

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

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

}

//定义向后移动的方法
   function Next(){

     //判断是否到最后一屏
   if(nowPage==pages){
    //当最后一屏时，不能在向后移动了
    dir=false;
    return ;
   }

  //调用move的方法
  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();

});