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

原创 2012年03月30日 20:42:39

<!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>


<script language="javascript" type="text/javascript">

 
  $(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();
 
  });

</script>
</head>

<body>
<div class="scroll">
   <ul class="items">
     <li><img src="images/1.gif" width="150" /></li>
     <li><img src="images/2.jpg" width="150" /></li>
     <li><img src="images/3.jpg" width="150" /></li>
     <li><img src="images/4.jpg" width="150" /></li>
     <li><img src="images/1.jpg" width="150" /></li>
     <li><img src="images/6.jpg" width="150" /></li>
     <li><img src="images/7.jpg" width="150" /></li>
     <li><img src="images/8.jpg" width="150" /></li>
     <li><img src="images/9.gif" width="150" /></li>
     <li><img src="images/3.jpg" width="150" /></li>
     <li><img src="images/4.jpg" width="150" /></li>
    
   </ul>
</div>
<input type="button" value="<<" id="prev"/>

<input type="button" value=">>" id="next" />
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery实现级联菜单(仿淘宝首页)

相信初学HTM+DIV+CSSl的同学们肯定也想
  • zzjmay
  • zzjmay
  • 2014-04-07 16:51
  • 1461

Jquery实现仿淘宝天猫左侧分类导航插件

插件参数配置如下:1、 target: $('#Z_RightSide')//绑定倚靠右边容器的ID2、 fTop: 60,// 距离顶部距离3、 cTop: 100,// 滚动条滚动多少像素后开始折...

jQuery实现焦点图播放效果

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...

JavaScript和jQuery实现淘宝搜索栏的制作

最终效果图如下: html和JavaScript代码如下: Document 宝贝 店铺 ...

jquery实现焦点图轮换代码

  • 2013-03-28 11:03
  • 434KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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