JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果

2、新闻滚动（跑马灯）

3、广告效果

4、新款上市模块横向滚动

1、导航效果

图1.1 导航效果

1.1 导航样式

<style type="text/css">
/*导航样式开始*/
#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.2 导航HTML

<!--导航开始-->
<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>
<!--导航结束-->

1.3导航脚本

//导航效果（兼容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">
/**最新动态 样式*/
.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.2 新闻滚动HTML

<!--最新动态开始-->
<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>
<!--最新动态结束-->

2.3新闻滚动脚本

/*新闻滚动*/
$(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">
/*滚动广告样式*/
.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.2 广告效果HTML

<!--广告滚动-->
<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>

3.3 广告效果脚本

/*广告滚动效果*/
$(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");
}

首先使用$(".ad").height()方法获取产品广告的高度，然后使用animate()方法来达到动画效果，每个图片的滚动高度有所不同，可以通过传入的参数index的值乘以产品广告的高度来得到。在animate()方法前，使用shop(true,false)方法将未执行完的动画队列清空，但不将正在执行的动画跳转到末状态。最后使用$(".num li").removeClass("on").eq(index).addClass("on")来给当前的广告数字添加高亮样式。

现在，当光标在广告右下角的数字上滑过时，广告就会有上下翻转的效果。但如果不去碰它，那么广告始终不会动。因此可以使用trigger()方法来触发。

4、新款上市模块横向滚动

图4.1 新款上市模块横向滚动

4.1 新款上市模块横向滚动样式

<style type="text/css">
/*新款上市样式*/
.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>

4.2 新款上市模块横向滚动HTML

<div class="prolist">
<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>

4.3 新款上市模块横向滚动

/*新款上市模块横向滚动*/
$(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下始终显示滚动条*/