基于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结构如下：
复制代码 代码如下:
- 1
- 2
- 3
- 4
- 5
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(对象.属性)集锦之二
正则表达式 表示 非指定字符串开头的正则
