jQuery 小案例图片切换
来源：互联网 发布：smplayer linux 编辑：程序博客网 时间：2024/06/10 14:16
<html>
<head>
<meta charset="utf-8" />
<title>jQuery 小案例</title>
<style>
.p{ color:#F00;}
</style>
<link rel="stylesheet" href="styles/main.css" type="text/css"/>
<link rel="stylesheet" href="styles/index.css" type="text/css"/>
<script src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var $width=$("#div1").width();
var $div=$(".prolist_content");
var $page=1;
var $imgs=$(".prolist_content ul li").length;
var $pagesize=4;
var $page_cont=Math.ceil($imgs/$pagesize)
$(".goLeft").click(function(){
if($page==$page_cont){
$div.stop(true,true).animate({'left':0},600);
$page=1;
}else{
$div.animate({'left':'-='+$width+'px'},600);
$page++;
}
});
//向右移动
$(".goRight").click(function(){
if($page==1){
$div.animate({'left':'-='+$width*($page_cont-1)+'px'},600);
$page=$page_cont;
}else{
$div.animate({'left':'+='+$width+'px'},600);
$page--;
}
})
})
</script>
<script>
$(function(){
$(".guanzhu").toggle(function(){
//alert("aa");
$(this).css("color","green").text("已关注");
return false;
},function(){
$(this).css("color","green").text("关注");
return false;
})
})
</script>
</head>
<body>
<div class="content_right">
<div class="global_module prolist" id="div1">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>嘻嘻</span><span><p class="guanzhu" ><font color="#FF0000">关注</font></p></span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span><p class="guanzhu" ><font color="#FF0000">关注</font></p></span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬</span><span><p class="guanzhu" ><font color="#FF0000">关注</font></p></span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
</li>
<li>
<a href="detail.html"><img src="images/img_5.jpg" alt="" /></a><span>免烫高支棉衬衣2</span>
</li>
<li>
<a href="detail.html"><img src="images/img_6.jpg" alt="" /></a><span>免烫斜纹衬</span>
</li>
<li>
<a href="detail.html"><img src="images/img_7.jpg" alt="" /></a><span>棉小方格正装衬衣</span>
</li>
<li>
<a href="detail.html"><img src="images/img_8.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
</li>
<li>
<a href="detail.html"><img src="images/img_9.jpg" alt="" /></a><span>免烫高支棉衬衣3</span>
</li>
<li>
<a href="detail.html"><img src="images/img_10.jpg" alt="" /></a><span>免烫斜纹衬</span>
</li>
<li>
<a href="detail.html"><img src="images/img_11.jpg" alt="" /></a><span>棉小方格正装衬</span>
</li>
<li>
<a href="detail.html"><img src="images/img_12.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
</li>
</ul>
</div>
<p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
</div>
</div>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>jQuery 小案例</title>
<style>
.p{ color:#F00;}
</style>
<link rel="stylesheet" href="styles/main.css" type="text/css"/>
<link rel="stylesheet" href="styles/index.css" type="text/css"/>
<script src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var $width=$("#div1").width();
var $div=$(".prolist_content");
var $page=1;
var $imgs=$(".prolist_content ul li").length;
var $pagesize=4;
var $page_cont=Math.ceil($imgs/$pagesize)
$(".goLeft").click(function(){
if($page==$page_cont){
$div.stop(true,true).animate({'left':0},600);
$page=1;
}else{
$div.animate({'left':'-='+$width+'px'},600);
$page++;
}
});
//向右移动
$(".goRight").click(function(){
if($page==1){
$div.animate({'left':'-='+$width*($page_cont-1)+'px'},600);
$page=$page_cont;
}else{
$div.animate({'left':'+='+$width+'px'},600);
$page--;
}
})
})
</script>
<script>
$(function(){
$(".guanzhu").toggle(function(){
//alert("aa");
$(this).css("color","green").text("已关注");
return false;
},function(){
$(this).css("color","green").text("关注");
return false;
})
})
</script>
</head>
<body>
<div class="content_right">
<div class="global_module prolist" id="div1">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>嘻嘻</span><span><p class="guanzhu" ><font color="#FF0000">关注</font></p></span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span><p class="guanzhu" ><font color="#FF0000">关注</font></p></span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬</span><span><p class="guanzhu" ><font color="#FF0000">关注</font></p></span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
</li>
<li>
<a href="detail.html"><img src="images/img_5.jpg" alt="" /></a><span>免烫高支棉衬衣2</span>
</li>
<li>
<a href="detail.html"><img src="images/img_6.jpg" alt="" /></a><span>免烫斜纹衬</span>
</li>
<li>
<a href="detail.html"><img src="images/img_7.jpg" alt="" /></a><span>棉小方格正装衬衣</span>
</li>
<li>
<a href="detail.html"><img src="images/img_8.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
</li>
<li>
<a href="detail.html"><img src="images/img_9.jpg" alt="" /></a><span>免烫高支棉衬衣3</span>
</li>
<li>
<a href="detail.html"><img src="images/img_10.jpg" alt="" /></a><span>免烫斜纹衬</span>
</li>
<li>
<a href="detail.html"><img src="images/img_11.jpg" alt="" /></a><span>棉小方格正装衬</span>
</li>
<li>
<a href="detail.html"><img src="images/img_12.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
</li>
</ul>
</div>
<p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
</div>
</div>
</body>
</html>
- jQuery 小案例图片切换
- jquery小案例-扩大图片
- jQuery随机切换图片的小例子
- jQuery随机切换图片的小例子
- jQuery——小案例：点击图片放大缩小
- jQuery案例小七个
- jquery 小案例
- JQuery小案例
- Jquery小案例
- javascript中图片切换案例
- JQUERY实现图片切换
- jquery图片切换效果
- jQuery图片切换效果
- JQuery 实现图片切换
- jquery图片自动切换
- jquery 图片自动切换
- jquery图片切换
- Jquery 动态切换图片
- 微信收费事件背后被广泛忽略的技术细节
- mysql数据库复习之三(备份和导入)
- ZOJ 1006 Do the Untwist 加密解密 模拟
- 将一个字符串的元音字母复制到另一个字符串并排序
- 小菜学C之递归
- jQuery 小案例图片切换
- Java中的容器
- Spring3 MVC 的介绍和使用(重排版转载收录)
- Handler使用
- java中的try中的return和finally的执行顺序问题
- C++ 利用类的静态成员特性定义全局变量来存储信息
- Placement New
- 图片和数以保持一致的切换
- Linux系统中的计时机制及相关时间函数
