JS如何实现翻页功能？？？

fencible 2011-09-29 09:54:04
已经读取9张图片路径存至数组$V，如何利用JS实现一次显示3张，点击 换一组 链接，可以显示为下3张，最后回到开始状态。能不能不要刷新页面，直接用隐藏一组显示一组的方法？
...全文
535 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
BLUE_LG 2011-09-30
  • 打赏
  • 举报
 回复
7楼大体意思是对的，具体不太规范，楼主自己修改修改就好了
BLUE_LG 2011-09-30
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 ahlaliuchao 的回复:]
啊，这不是我看jQuery书上面的列子吗、、、无条件奉上源代码
你换几张图片就可以看到效果了、、

HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="视屏播放切换_._Default" %>

<!DOCTYPE html PUBLIC "-//W……
[/Quote]
用不了这么复杂。。。
fencible 2011-09-29
  • 打赏
  • 举报
 回复
还没人来帮忙看下吗~
ahlaliuchao 2011-09-29
  • 打赏
  • 举报
 回复
啊，这不是我看jQuery书上面的列子吗、、、无条件奉上源代码
你换几张图片就可以看到效果了、、
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="视屏播放切换_._Default" %>



<!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 runat="server">

    <title>视屏播放功能</title>

    <style type="text/css">

        .hightlight_tip

        {

            top: 24px;

            left: 596px;

            position: absolute;

            height: 17px;

            width: 117px;

        }

        .change_btn

        {

            top: 13px;

            left: 217px;

            position: absolute;

        }

        #more

        {

            height: 20px;

            width: 92px;

            top: 4px;

            left: 600px;

            position: absolute;

        }

        .v_show

        {

            top: 100px;

            left: 267px;

            position: absolute;

            height: 253px;

            width: 717px;

        }

        .v_caption

        {

            height: 39px;

            width: 674px;

            background-color:#EFEFEF;

            }

        .v_content

        {

        	overflow:hidden;

        	border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7;

            top: 44px;

            left: 3px;

            position: absolute;

            height: 169px;

            width: 669px;

        }

        .v_content_list

        {

            top: 0px;

            left: 0px;

            position: absolute;

            height: 172px;

            width: 2800px;

        }

        .v_content ul li { display:table-row ; float:left;background:url() no-repeat; width:160px;  padding-left:5px; }

        .v_content ul li img{ border:0px;}

        .change_btn {            width: 77px;

            height: 20px;

        }

        .change_btn  span { position: absolute; display:block; cursor:pointer; }

        .change_btn .prev { position: absolute;

            top: -1px;

            left: -36px;

            width: 31px;

            height: 26px;

        }

        .change_btn .next { position: absolute;

            top: -1px;

            left: -10px;

            width: 32px;

            height: 31px;

        }

        .highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }

        .highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }

        .current { color:Red;}

    </style>

</head>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript" >

    $(function (){

     var page=1;

     var i=4;

     $("span.next").click(function (){

        var $parent=$(this).parents("div.v_show");

        var $v_show=$parent.find("div.v_content_list");

        var $v_content=$parent.find("div.v_content");

        var v_width=$v_content.width();

        var len=$v_show.find("li").length;

        var page_count=Math.ceil(len/i);

        

        if(!$v_show.is(":animated")){

            if(page==page_count){

                $v_show.animate({left:"0px"},"slow");

                page=1;

            }else{

                $v_show.animate({left:"-="+v_width},"slow");

                page++;

            }

        }

        $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

     });

     

       $("span.prev").click(function(){

	     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素

		 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”

		 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素

		 var v_width =$v_content.width();

		 var len = $v_show.find("li").length;

		 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数

		 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画

		 	 if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。

				$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");

				page = page_count;

			}else{

				$v_show.animate({ left : '+='+v_width }, "slow");

				page--;

			}

		}

		$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

    });

    });

    </script>

<body>

<div class="v_show">

    <div class="v_caption">

        <h2 title="最新热点视频" 

            

            style="height: 27px; width: 157px; margin-right: 3px; margin-bottom: 10px; top: 11px; left: 8px; position: absolute;">最新热点视频</h2>

        <div class="hightlight_tip">

            页码<span class="current" >1</span><span>2</span><span>3</span><span>4</span>

        </div>

        <div class="change_btn">

            <span class="prev"><input type="button" value="<<<"  

                style=" background-image:url('img/left.jpg'); height: 25px; width: 29px;"/></span>

            <span class="next"><input type="button" value=">>>"  

                style=" background-image:url('img/right.jpg'); height: 25px; width: 29px;"/></span>

        </div>

        <div id="more"><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="海贼王" style="width: 126px" /></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>

    

</div>



</body>

</html>
fencible 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 fencible 的回复:]

引用 3 楼 ycmjh2010 的回复:

引用 2 楼 fencible 的回复:

引用 1 楼 ycmjh2010 的回复:

路径都已经在数组里了，当然可以不刷新页面，‘下一组链接’的函数做个判断，得到三张图片的地址即可

判断后得到下三张的图片路径，如何让图片即时显示在当前页面呢
获取dom，修改其src啊！

谢谢！我是新手，对JS了解很少，能不能稍微写个简单……
[/Quote]
来个大神帮助下啊~
fencible 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 ycmjh2010 的回复:]

引用 2 楼 fencible 的回复:

引用 1 楼 ycmjh2010 的回复:

路径都已经在数组里了，当然可以不刷新页面，‘下一组链接’的函数做个判断，得到三张图片的地址即可

判断后得到下三张的图片路径，如何让图片即时显示在当前页面呢
获取dom，修改其src啊！
[/Quote]
谢谢！我是新手，对JS了解很少，能不能稍微写个简单的例子我参考下呢？
比如现在有个$v里面存了9张图片的路径，有个循环是显示3个<img src=<? echo $v['image'];?>/>,怎样才能让他显示下三张啊?
万分感谢！！！！
光曰不日 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 fencible 的回复:]

引用 1 楼 ycmjh2010 的回复:

路径都已经在数组里了，当然可以不刷新页面，‘下一组链接’的函数做个判断，得到三张图片的地址即可

判断后得到下三张的图片路径，如何让图片即时显示在当前页面呢
[/Quote]获取dom，修改其src啊！
fencible 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 ycmjh2010 的回复:]

路径都已经在数组里了，当然可以不刷新页面，‘下一组链接’的函数做个判断，得到三张图片的地址即可
[/Quote]
判断后得到下三张的图片路径，如何让图片即时显示在当前页面呢
光曰不日 2011-09-29
  • 打赏
  • 举报
 回复
路径都已经在数组里了，当然可以不刷新页面，‘下一组链接’的函数做个判断，得到三张图片的地址即可
fencible 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 ycmjh2010 的回复:]

楼上名字好萌啊哈哈，楼主参考楼上代码
[/Quote]
楼上的代码用var arr=<?php echo $cc?>;存储路径数组可以吗？为什么点击了之后没反应？
fencible 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 lxl888 的回复:]

<img id=img1></img>
<img id=img2></img>
<img id=img3></img>

<script language=javascript>
var arr;
var istart;

istart = 0;

function nextPage()
{
if (istart<arr.getLength(……
[/Quote]
我用var arr=<?php echo $cc?>;存储了路径数组，但是不行啊
输出是这个<img id='img1' src='' alt="图片描述" />
光曰不日 2011-09-29
  • 打赏
  • 举报
 回复
楼上名字好萌啊哈哈，楼主参考楼上代码
晨晨 2011-09-29
  • 打赏
  • 举报
 回复
<img id=img1></img>
<img id=img2></img>
<img id=img3></img>

<script language=javascript>
var arr;
var istart;

istart = 0;

function nextPage()
{
if (istart<arr.getLength()&&istart>arr.getLength()-2)
{
img1.src = arr(istart);
img2.src = arr(istart+1);
img3.src = arr(istart+2);
istart += 3;
}
else
{
if (istart<arr.getLength())
img1.src = arr(istart+1);
if (istart<arr.getLength()-1)
img2.src = arr(istart+2);
}
}
function priorPage()
{
if (istart>2)
{
img1.src = arr(istart);
img2.src = arr(istart+1);
img3.src = arr(istart+2);
istart -= 3;
}

}
</script>

<a href="#" onclick=priorPage()>上一页</a>
<a href="#" onclick=nextPage()>下一页</a>
js实现web的翻页功能
纯js实现web前端的翻页，实现、首页、尾页、上一页、下一页的功能实现
js翻页功能
js翻页功能 漂亮的翻页功能实现 简单易用 呵呵
js实现table翻页功能
使用 js 实现html table 的假分页，列的值，可以用ajax异步获取拼成json字符串后前台设值
经典JS切换翻页代码
经典JS切换翻页代码，用光标直接翻页，超酷
JavaScript实现翻页功能(附效果图)
主要介绍了JavaScript实现翻页功能(附效果图)，在项目需求中经常遇到，今天小编抽时间给大家分享JavaScript实现翻页功能实例代码，需要的朋友参考下吧
JavaScript

87,915

社区成员

224,620

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章