jquery问题，求教高手

经济小爪哇 2011-09-06 09:15:09
下面代码是想通过jquery实现一组一组照片的切换，下面代码是以4张照片为一页，当点击下一页的时候跳转到第2页也就是第5张照片，同时1234相应页码也高亮显示，求教高手下面代码哪里错了

<html>
<head>
<title>jquery中的事件实现切换</title>
<style type="text/css">
#current{
color:#FF3300;
background:#CC3300;
}
.v_content_list{
height:100px;
width:600px;
}
#v_content{
height:100px;
width:600px;
overflow:hidden;
}
.next{
cursor:pointer;
}
.prev{
cursor:pointer;
}
</style>
<script src="jquery.min.js" src="jquery-1.1.3.1.min.js" src="jquery-1.2.3.js"></script>
<script>
$(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;
alert(page);
}else{
$v_show.animate({left:"-=100px"},"slow");
page++;
alert(page);
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
});
</script>
<style type="text/css">
.v_content_list ul li{
list-style-type:none;
float:left;
padding:10px;
}
</style>
</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 id="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景1</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景2</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景3</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景4</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景5</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景6</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景7</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景8</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景9</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景10</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景11</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景12</a></h4><span>播放:<em>2876</em></span></li>
</ul>
</div>
</div>
</body>
</html>
...全文
74 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
最后一个菜鸟 2011-09-06
  • 打赏
  • 举报
 回复
楼上的代码可用，看懂了代码学习了很多
MuBeiBei 2011-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 yananxj 的回复:]
1楼的代码还是不能实现一组图片的的切换啊，那个字体高亮显示是次要的主要是那组图片随着点击下一页而切换啊
[/Quote]

<html>

<head>

<title>jquery中的事件实现切换</title>

<style type="text/css">

  .current{

  color:#FF3300;

  background:#CC3300;

  }

  .v_content_list{

  height:120px;

  width:1200px;

  position:absolute;

  left:0px;

  }

  #v_content{

  height:120px;

  width:540px;

  overflow:hidden;

  }

  .next{

  cursor:pointer;

  }

  .prev{

  cursor:pointer;

  }

</style>

<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>

<script>

$(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:"-=500px"},"slow");

page++;

}

}

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

  });

});

</script>

<style type="text/css">

.v_content_list ul li{

list-style-type:none;

float:left;

padding:10px;

}

</style>

</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 id="v_content">

<div class="v_content_list">

<ul>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="1" /><h4><a href="#">风景1</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="2" /><h4><a href="#">风景2</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="3" /><h4><a href="#">风景3</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="4" /><h4><a href="#">风景4</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="5" /><h4><a href="#">风景5</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="6" /><h4><a href="#">风景6</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="7" /><h4><a href="#">风景7</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="8" /><h4><a href="#">风景8</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="9" /><h4><a href="#">风景9</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="10" /><h4><a href="#">风景10</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="11" /><h4><a href="#">风景11</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="12" /><h4><a href="#">风景12</a></h4><span>播放:<em>2876</em></span></li>

</ul>

  </div>

  </div>

</body>

</html>




样式跟位置自己调调吧
经济小爪哇 2011-09-06
  • 打赏
  • 举报
 回复
1楼的代码还是不能实现一组图片的的切换啊，那个字体高亮显示是次要的主要是那组图片随着点击下一页而切换啊
MuBeiBei 2011-09-06
  • 打赏
  • 举报
 回复
<script src="jquery.min.js" src="jquery-1.1.3.1.min.js" src="jquery-1.2.3.js"></script>

改成

<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
MuBeiBei 2011-09-06
  • 打赏
  • 举报
 回复
#current{
color:#FF3300;
background:#CC3300;
}


改成

.current{
color:#FF3300;
background:#CC3300;
}
MuBeiBei 2011-09-06
  • 打赏
  • 举报
 回复 
<html>

<head>

<title>jquery中的事件实现切换</title>

<style type="text/css">

  .current{

  color:#FF3300;

  background:#CC3300;

  }

  .v_content_list{

  height:100px;

  width:600px;

  }

  #v_content{

  height:100px;

  width:600px;

  overflow:hidden;

  }

  .next{

  cursor:pointer;

  }

  .prev{

  cursor:pointer;

  }

</style>

<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>

<script>

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

alert(page);

}else{

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

page++;

alert(page);

}

}

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

  });

});

</script>

<style type="text/css">

.v_content_list ul li{

list-style-type:none;

float:left;

padding:10px;

}

</style>

</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 id="v_content">

<div class="v_content_list">

<ul>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景1</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景2</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景3</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景4</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景5</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景6</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景7</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景8</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景9</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景10</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景11</a></h4><span>播放:<em>2876</em></span></li>

<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景12</a></h4><span>播放:<em>2876</em></span></li>

</ul>

  </div>

  </div>

</body>

</html>
java中图标_java中图标按钮
关于java中图标按钮的搜索结果问题求教如何在按钮中嵌入图标求高手告诉我，我的问题出在哪里，我想了一上午都没想出来，我想的是设置按钮的图标而不是背景， 未设置按钮图标之前运行的效果 设置按钮图标之后运行的效果package button;import java.awt.*;import j...爵霸2019-12-01 19:43:581014 浏览量回答数 1回答// Programme Nam...
【编程高手】，不想再崇拜，我们也可以，just do it
在没有装过系统，没有接触过编程，没有亲自编过软件之前，作为一个小白，曾经对那些会装系统，会编软件会做网页的人非常崇拜，可是当自己亲自做的时候，发现原来装Linux也那么简单，曾经被复杂的教程吓过，当自己终于亲自尝试后，不断的摸索，不断的尝试，能力不断的被激发，很多问题其实我们都不会遇到，遇到再去查，解决问题的过程更让我们有成就感，不断的尝试让我们也成为了别人眼中的高手，高手仅仅...
php 检测用户名已存在错误,(细节错误求教)PHP+AJAX交互判断用户名是否存在
html代码输入框：js检测(仅列出jquery判断用户名的代码)：$(document).ready(function(){//判断用户名是否已经注册了$('#username').blur(function() {if ($('#username').val() != '') {$.post('chkname.php', {username : $('#username').val()}, f...
javaScript，如何让一个div盒子随着鼠标移动而移动
如果想让一个div的盒子随着鼠标移动而移动，那么就必须获取到鼠标的坐标！
php怎么获取账号密码,PHP 前台代码实现获取用户密码功能
比如说用户登录-->进入个人首页在进入个人首页的时候验证一下登录的用户密码是否全部数字或者全英文进入个人首页 提示弹出出来的层内容：系统检测到您的账户密码过于简单,存在严重的安全隐患,建议您及时修改 ,以免造成录音被误删等不必要的麻烦和损失。两个按钮用户jquery 或者是PHP 某种方式可以实现呢？回复讨论(解决方案)用ajax可以实现，document.ready里可以把该用户传进后台查...
JavaScript

87,924

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章