基于JQuery制作的产品广告效果

效果图.如下：

动画效果介绍：这组广告效果是打开页面后图片会自动播放，从1-5共计5张图片，如果属标放到右下角的1、2、3、4、5列表上，可以自由进行切换到自己想看的图片上去。图片切换是由下到上变换的。

制作思路：先将这5张图片分别放入到ul的5个li列表中,

《1》求出图片个的总个数. 并当我们如果在单击1.2.3.4.5时就将它对应的数字传过去，就它显示对应的图片。

《2》如果属标放上，就停止动画(可以利用clearIntval() )，如果属标移到，我们可以利用 setIntval(函数，时间) 去每隔3000毫秒去执行一下这个函数一次。

《3》完成这个动画函数。在这个函数中首先我们可以得到这个动画区域(.slider)的高度。再利用animate自定义动画函数实现在TOP位置上变化。并且给当前li中的数字加上高亮效果。

《4》还有一点就是要使这里的TOP变化正常，一定要在当前区域的父标记(.ad)中设置"position:relative;" 一切就都已OK了。制作代码如下：

1》html结构如下：

复制代码 代码如下:

2》jquery 代码如下:

复制代码 代码如下:

//超链接文字提示

$(function(){

var len = $(".num >li").length;

var index = 0;

var adTimer;

$(".num li").mouseover(function(){

index = $(".num li").index(this); //这里的 " this " 可以换成 " $(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");

})

//通过给定的的索引 显示不同的图片

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");

}

3》对应的CSS样式：

复制代码 代码如下:

.content_right{

background:#eee;

border : 1px solid #AAAAAA;

width: 586px;

float:left;

}

.content_right .ad {

margin-bottom:10px;

width:586px;

height:150px;

overflow:hidden;

position:relative;

}

.content_right .slider,

.content_right .num {

position:absolute;

}

.content_right .slider li{

list-style:none;

display:inline;

}

.content_right .slider img{

width:586px;

height:150px;

display:block;

}

.content_right .num{

right:5px;

bottom:5px;

}

.content_right .num li{

float: left;

width: 16px;

height: 16px;

line-height: 16px;

text-align: center;

font-family: Arial;

font-size: 12px;

color: #FF7300;

background-color: #fff;

border: 1px solid #FF7300;

overflow: hidden;

margin: 3px 1px;

cursor: pointer;

}

.content_right .num li.on{

width: 21px;

height: 21px;

line-height: 21px;

color: #fff;

background-color: #FF7300;

font-size: 16px;

margin: 0 1px;

border: 0;

font-weight: bold;

}相关阅读:

js 模仿网上的限时抢购效果

原创]如何回到先前的页面的方法多中语言" target="_blank">[原创]如何回到先前的页面的方法多中语言

PHP5经典教程之文件操作

Wine中中文存在很多的乱码怎么解决？

Mysql权威指南读书笔记(四)

什么叫标准网页设计?

document.all与WEB标准

javascript跨域刷新实现代码

使用yui3实现最简单拖动

javascript关键字加亮加连接

css hack 记录

55种网页常用小技巧(javascript)

javascript(对象.属性)集锦之二

正则表达式 表示 非指定字符串开头的正则