基于JQuery制作的产品广告效果_jquery-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 18:14:12

原创

1449人浏览过

效果图.如下：
基于JQuery制作的产品广告效果_jquery
动画效果介绍：这组广告效果是打开页面后图片会自动播放，从1-5共计5张图片，如果属标放到右下角的1、2、3、4、5列表上，可以自由进行切换到自己想看的图片上去。图片切换是由下到上变换的。
基于JQuery制作的产品广告效果_jquery
制作思路：先将这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结构如下：

商易建站系统

商易建站系统(Sunnyi Website System)是一款基于THINKPHP开发制作的多语言CMS建站系统,其适用范围广,扩展性强,方便二次开发.商易建站系统使用了PHP缓存技术,可减少数据库访问，降低数据库压力,加速系统访问速度，提升系统性能.程序添加多种支付接口(财付通,支付宝等),并可自定配送方式. 功能介绍:1.数据库备份还原2.产品管理3.会员管理4.广告管理5.系统设置6.文章

查看详情

复制代码代码如下:

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; 
} 