1、导航效果
2、新闻滚动（跑马灯）
3、广告效果
4、新款上市模块横向滚动
1、导航效果
图1.1 导航效果
1.1 导航样式
<style type="text/css">1.2 导航HTML
/*导航样式开始*/
#navigation { width:784px; padding:8px; margin:8px auto; background:#3B5998;height:18px;}
#navigation ul li { float:left; margin-right:14px;position: relative ;z-index:100;}
#navigation ul li a { display:block;padding:0 8px; background:#EEEEEE; font-weight:700;}
#navigation ul li a:hover { background:none; color:#fff;}
#navigation ul li ul{background-color: #88C366;position: absolute;width: 80px;overflow:hidden;display:none;}
#navigation ul li:hover ul{background-color: #88C366;position: absolute;width: 100px;display:block;}
#navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 100%;}
/*导航样式结束*/
</style>
<!--导航开始-->1.3导航脚本
<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>
<!--导航结束-->
//导航效果（兼容IE6）
$(function(){
$("#navigation ul li:has(ul)").hover(function(){
$(this).children("ul").stop(true,true).slideDown(400);
},function(){
$(this).children("ul").stop(true,true).slideUp("fast");
});
})
在IE7和FireFox浏览器上可以使用伪劣:hover来显示导航效果，但IE6并不支持除超链接之外的元素使用这个伪类，因此使用上述的CSS代码并不能再IE6下正常运行，解决方法是用脚本来弥补这个不足。
在两个动画效果之前都添加了stop(true,true)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。
2、新闻滚动（跑马灯）
图1.2 新闻滚动
2.1 新闻滚动样式
<style type="text/css">2.2 新闻滚动HTML
/**最新动态 样式*/
.news{width:200px;border:1px solid #AAAAAA; margin:10px;}
.scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;}
h3{ height:26px; background:#3B5998;color:#FFF; line-height:26px; text-indent:6px;}
.scrollNews li{height:20px; padding-left:10px;}
</style>
<!--最新动态开始-->2.3新闻滚动脚本
<div class="news">
<h3>最新动态</h3>
<div class="scrollNews" >
<ul>
<li><a href="#" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
</div>
<!--最新动态结束-->
/*新闻滚动*/
$(function() {
var $this = $(".scrollNews");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 3000);
}).trigger("mouseleave");
});
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); //appendTo能直接移动元素
})
}
3、广告效果
图3.1 广告效果
3.1 广告效果样式
<style type="text/css">3.2 广告效果HTML
/*滚动广告样式*/
.ad {margin:10px;width:586px; height:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;}
.slider,.num{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:586px; height:150px;display:block;}
.num{ right:5px; bottom:5px;}
.num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;}
.num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;}
</style>
<!--广告滚动-->3.3 广告效果脚本
<div class="ad" >
<ul class="slider" >
<li><img src="/images/shopping/ads/1.gif" alt="ad1"/></li>
<li><img src="/images/shopping/ads/2.gif" alt="ad2"/></li>
<li><img src="/images/shopping/ads/3.gif" alt="ad3"/></li>
<li><img src="/images/shopping/ads/4.gif" alt="ad4"/></li>
<li><img src="/images/shopping/ads/5.gif" alt="ad5"/></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
/*广告滚动效果*/首先使用$(".ad").height()方法获取产品广告的高度，然后使用animate()方法来达到动画效果，每个图片的滚动高度有所不同，可以通过传入的参数index的值乘以产品广告的高度来得到。在animate()方法前，使用shop(true,false)方法将未执行完的动画队列清空，但不将正在执行的动画跳转到末状态。最后使用$(".num li").removeClass("on").eq(index).addClass("on")来给当前的广告数字添加高亮样式。
$(function() {
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function() {
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//滑入 停止动画，滑出开始动画.
$('.ad').hover(function() {
clearInterval(adTimer);
}, function() {
adTimer = setInterval(function() {
showImg(index)
index++;
if (index == len) { index = 0; }
}, 3000);
}).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index) {
var adHeight = $(".ad").height();
$(".slider").stop(true, false).animate({ top: -adHeight * index }, 1000); //翻滚效果
//$(".slider").css("top", -adHeight * index); //跳转效果
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
现在，当光标在广告右下角的数字上滑过时，广告就会有上下翻转的效果。但如果不去碰它，那么广告始终不会动。因此可以使用trigger()方法来触发。
4、新款上市模块横向滚动
图4.1 新款上市模块横向滚动
4.1 新款上市模块横向滚动样式
<style type="text/css">4.2 新款上市模块横向滚动HTML
/*新款上市样式*/
.prolist {position:relative;height: 220px;margin-bottom:10px; overflow:hidden; border: 1px solid #AAAAAA;background:#FFFFFF;border:1px solid #AAAAAA;width: 586px; margin:10px;}
h3{background: none repeat scroll 0 0 #3B5998;color: #FFFFFF;height: 26px;line-height: 26px;text-indent: 6px;}
.prolist .prolist_content{position:absolute; width:1800px;top:26px; left:0px;padding:20px 0 0 8px;}
.prolist ul{margin-bottom:10px; float:left;height: 220px;}
.prolist ul li { float:left;display:inline;text-align:center;margin-right:22px; }
.prolist ul li span { display:block;overflow:hidden; }
.prolist ul li img { display:block; width:124px; height:124px; background:#EEE; border:0;}
.module_left_right{ position:absolute; top:5px; right:10px; cursor:pointer;}
</style>
<div class="prolist">4.3 新款上市模块横向滚动
<h3>新款上市</h3>
<p class="module_left_right"><img id="goLeft" src="/images/shopping/left.gif" alt="左键" /><img id="goRight" src="/images/shopping/right.gif" alt="右键" /></p>
<div class="prolist_content">
<ul>
<li>
<a href="#"><img src="/images/shopping/img_1.jpg" alt="" class="imageOver" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
</ul>
</div>
</div>
/*新款上市模块横向滚动*/*注意:公共样式
$(function() {
var page = 1;
var i = 4; //每版放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 (!$parent.is(":animated")) {
if (page == page_count) { //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$parent.animate({ left: 0 }, 800); //通过改变left值，跳转到第一个版面
page = 1;
} else {
$parent.animate({ left: '-=' + none_unit_width }, 800); //通过改变left值，达到每次换一个版面
page++;
}
}
});
//往左 按钮
$("#goLeft").click(function() {
if (!$parent.is(":animated")) {
if (page == 1) { //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); //通过改变left值，跳转到最后一个版面
page = page_count;
} else {
$parent.animate({ left: '+=' + none_unit_width }, 800); //通过改变left值，达到每次换一个版面
page--;
}
}
});
});
body{font: 12px/1.6em Helvetica,Arial,sans-serif;}
*{margin:0px; padding:0px;}
a{text-decoration:none; outline: none;}
a:hover{text-decoration:underline;}
ul li{list-style-type:none;}
.g-cl{clear:both;zoom:1;}
h1, h2, h3, h4, h5, h6 {font-size: 1em; margin:0px; padding:0px;}
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/