jquery图片循环显示 dodo

<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<%--<script src="scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>--%>
<script type="text/javascript">

$(function(){

//默认显示第一页
var page =1;
//每页显示4张图片
var pagesize = 4;

//获取当前点击元素的父元素(v_show)
var $parent = $("div.v_show");

//查找照片内容显示区域v_content
var $photoshow = $parent.find("div.v_content_list");

//查找到照片内容显示区域外围的v_content
var $v_content = $parent.find("div.v_content");

//获取整个内容显示区域的宽度
var v_width = $v_content.width();

//获取整个内容显示区域包含图片的个数
var len = $photoshow.find("li").length;

//获取要显示区域的数量(只要不是整数,就往大的方向取最小的整数)
var pagecount = Math.ceil(len/pagesize);

//绑定向后按钮点击事件
$("span.next").click(function(){

    //判断图片显示区域是否正处于动画状态
    if (!$photoshow.is(":animated")){
        //判断是否到最后一个版面,如果是最后一个版面就跳转到第一个版面
        if (page == pagecount){
            //通过改变照片内容显示区域的left值,跳转到第一个版面
            $photoshow.animate({left : '0px'},"slow");
           
            //设置page=1
            page = 1;
           
        }
        else{
       
            //通过改变照片内容显示区域的left值,跳转到下一个版面
            $photoshow.animate({left : '-='+v_width },"slow");
           
            page++;
       
        }
    }
   
    //高亮显示当前移动到的版面数字
    $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
   
    //高亮显示当前移动到的版面数字
    //$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
   
});

//绑定向前按钮点击事件
$("span.prev").click(function(){

    //判断图片显示区域是否正处于动画状态
    if (!$photoshow.is(":animated")){
   
        //判断是否是第一页,如果是第一页就跳转到最后一个版面
        if (page == 1){
       
            //通过改变照片内容显示区域的left值,跳转到最后一个版面
            $photoshow.animate({left : "-="+v_width*(pagecount-1)},"slow");
           
            page = pagecount;
       
        }
        else{
           
            //通过改变照片内容显示区域的left值,跳转到上一个版面
            $photoshow.animate({left : '+='+v_width },"slow" );
           
            page--;
           
        }
   
    }
   
    //高亮显示当前移动到的版面数字
    $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

});

});

</script>
</head>
<body>

<div class="v_show">
 <div class="v_caption">
  <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
  <div class="highlight_tip">
   <span class="current">1</span><span>2</span><span>3</span><span>4</span>
  </div>
  <div class="change_btn">
   <span class="prev" >上一页</span>
   <span class="next">下一页</span>
  </div>
  <em><a href="#">更多>></a></em>
 </div>
 <div class="v_content">
  <div  class="v_content_list">
   <ul>
    <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
    <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
    <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
    <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
    <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
    <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
    <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
    <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
    <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
       </ul>
  </div>
 </div>
</div>

</body>
</html>

原文地址:https://www.cnblogs.com/zgqys1980/p/2016064.html