jquery的商品首页
js代码：
$(function() {
/*新闻滚动*/
var $this = $('.scrollNews');
var scrollTimer;
$this.hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews($this);
}, 3000)
}).trigger('mouseleave');
// *模块展开和关闭*/
$(".module_up_down").toggle(function(){
var $self = $(this);
$self.prev().slideToggle(600,function(){
$("img",$self).attr("src","images/up.gif");
});
},function(){
var $self = $(this);
$self.prev().slideToggle(600,function(){
$("img",$self).attr("src","images/down.gif");
});
})
/*产品树展开和关闭*/
$(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 ( > )
var $ul = $(this).siblings("ul");
if($ul.is(":visible")){
$(this).parent().attr("class","m-collapsed");
$ul.hide();
}else{
$(this).parent().attr("class","m-expanded");
$ul.show();
}
return false;
})
// 轮播图
var len=$('.num>li').length;
var index=0;
var adTimer;
$('.num li').mouseover(function () {
index=$('.num li').index(this);
showImg(index);
});
$('.ad').hover(function () {
clearInterval(adTimer);
},function(){
adTimer=setInterval(function () {
showImg(index);
index++;
if(index==len){index=0;}
},3000);
}).trigger('mouseleave');
/*新款上市模块横向滚动*/
var page=1;
var i=4;
var len=$('.prolist_content ul li').length;
var page_count=Math.ceil(len/i);
var none_unit_width=$('.prolist').width();
var $parent =$('.prolist_content');
$('.goRight').click(function () {
if(page==page_count){
$parent.animate({left:0},800);
page=1;
}else{
$parent.animate({left:'-='+none_unit_width},800);
page++;
}
});
$('.goLeft').click(function () {
if(!$parent.is(':animated')){
if(page=1){
$parent.animate({lefg:'-='+none_unit_width*(page_count-1)},800);
page=page_count;
}else{
$parent.animate({left:"+="+none_unit_width},800)
page--;
}
}
})
});
function scrollNews(obj) {
var $self=obj.find('ul:first');
var lineHeight=$self.find('li:first').height();
$self.animate({'marginTop':-lineHeight+"px"},600,function () {
$self.css({marginTop:0}).find('li:first').appendTo($self);
})
}
function showImg(index){
var adHeight=$('.content_right .ad').height();
$('.slider').stop(true,false).animate({top:-adHeight*index},1000);
$('.num li').removeClass('on')
.eq(index).addClass('on');
}
html代码：
<!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>我的Jane shopping</title>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="scripts/index.js"></script>
</head>
<body>
<!--头部开始-->
<div id="header">
<a id="logo" href="#">Jane Shopping</a>
<ul id="skin">
<li id="skin_0" title="蓝色" class="selected">蓝色</li>
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="红色">红色</li>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul> </div>
<!--头部结束-->
<!--导航开始-->
<div id="navigation">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">衬 衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li><a href="#">卫 衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li><a href="#">裤 子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!--导航结束-->
<!--主体开始-->
<div id="content">
<div class="content_left">
<div class="global_module news">
<h3>最新动态</h3>
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
<p class="module_up_down"><img src="data:images/down.gif" alt="" /></p>
</div>
<div class="global_module procatalog">
<h3>产品分类</h3>
<ul class="m-treeview">
<li class="m-expanded">
<span>衬衫</span>
<ul>
<li><span>短袖衬衫</span></li>
<li><span>长袖衬衫</span></li>
</ul>
</li>
<li class="m-expanded">
<span>卫衣</span>
<ul>
<li ><span>开襟卫衣</span></li>
<li ><span>套头卫衣</span></li>
</ul>
</li>
<li class="m-expanded">
<span>裤子</span>
<ul>
<li><span>休闲裤</span></li>
<li><span>免烫卡其裤</span></li>
<li><span>牛仔裤</span></li>
<li><span>短裤</span></li>
</ul>
</li>
</ul>
<p class="module_up_down"><img src="data:images/down.gif" alt="" /></p>
</div>
</div>
<div class="content_right">
<div class="ad" >
<ul class="slider" >
<li><img src="data:images/ads/1.gif"/></li>
<li><img src="data:images/ads/2.gif"/></li>
<li><img src="data:images/ads/3.gif"/></li>
<li><img src="data:images/ads/4.gif"/></li>
<li><img src="data:images/ads/5.gif"/></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="global_module prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
</ul>
</div>
<p class="module_left_right"><img class="goLeft" src="data:images/left.gif" alt="" /><img class="goRight" src="data:images/right.gif" alt="" /></p>
</div>
</div>
</div>
<!--主体结束-->
</body>
</html>
jquery的商品首页的更多相关文章
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- jquery实现商品sku多属性选择（商品详情页）
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...
- jQuery实现商品楼层的感觉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery实现商品详情 详细参数页面切换
利用index实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- jquery特效 商品SKU属性规格选择实时联动
转载,原文链接 功能:各种属性的值选中后,SKU填写表格进行变动,对属性.属性值的数量自适应,编辑时不因去掉勾选导致原有值不显示 所有代码均属原创,现在共享,如果有更好的实现方式,希望互相交流 最终实 ...
- 商品描述（动画）--- jQuery
本文章实现是基于jQuery展示商品描述的一个功能 (1)鼠标移入显示描述内容,鼠标移开内容隐藏.先来看看一个先后效果. (2)jQuery所以的文件可以自行下载,也可以在我主页找到文件,右键文件名复 ...
- js实现商品颜色尺码联动以及购买数量的选择
<script type="text/javascript"> $(function(){ //初始化点击第一个颜色 jquery $("#colors a: ...
- 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计
第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...
随机推荐
- 需要掌握哪些python标准库和三方库？
讨论参考:https://www.zhihu.com/question/20501628 库太多了,根据需要使用相应领域的三方库:至于对于企业常用的三方库,可以参考热门招聘网站的招聘说明
- [Todo] Redis相关学习
Redis与新浪 http://www.cnblogs.com/me115/p/3482783.html Redis对于多个CPU的机器,可以启动多实例. 可以看看这个(写的简单了) http://w ...
- Install Python+Django+Nginx+UWSGI
一.软件环境: CentOS6.6_64bit 需要用到的软件: [root@django tools]# ll 总用量 33336 -rw-r--r-- 1 root root 7497785 3月 ...
- RHEL7.0 配置网络IP的三种方法
导读 RHEL7里面的网卡命名方式从eth0,1,2的方式变成了enoXXXXX的格式. en代表的是enthernet (以太网),o 代表的是onboard (内置),那一串数字是主板的某种索引编 ...
- 转： SVN和Git的一些用法总结
转:http://www.codelast.com/?p=5719 转载请注明出处:http://www.codelast.com/ 以下都是比较基础的操作,高手们请绕道,不必浪费时间来看了. (A) ...
- C#中Split用法~字符串分隔
1.用字符串分隔: using System.Text.RegularExpressions;string str="aaajsbbbjsccc";string[] sArray= ...
- MongoDB 基础命令 (MongoDB Shell)
1.我们 mongodb 安装成功后,用上一篇的方法启动 mongodb服务 然后使用 mongodb shell 来做数据库的增删改查 2.创建数据库 语法: use 数据库名称 案例: > ...
- discuz，ecshop的伪静态规则（apache+nginx）
discuz(nginx): (备注:该规则也适用于二级目录) rewrite ^([^\.]*)/topic-(.+)\.html$ $/portal.php?mod=topic&topic ...
- vbox下安装centos （全部都是基于64位）
1.首先提示说CPU内核不匹配,如下图: 于是查阅资料得知:64位CPU支持32位和64位,而要用64位内核,就需要主板支持,于是修改BIOS,在ADVANCE(高级)里,找到VT(也就是virtua ...
- IO核心代码