基于JQuery的产品广告效果

效果图如下：。

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

制作思路：首先将这五张图片放入ul的五li列表中，计算出《1》的图片总数。当我们点击1.2.3.4.5时，我们会传递相应的数字，并在上面显示相应的图片。103010如果是标配，停止动画(可以使用clearIntval())；如果是在标准上，我们可以使用setIntval(函数，时间)每3000毫秒执行一次这个函数。003010完成这个动画功能。在这个函数中，我们可以先得到动画区域的高度(。滑块)。然后，使用动画自定义动画功能实现TOP位置的变化。并突出显示当前li中的数字。003010另一点是，为了使TOP在这里正常变化，“位置position:relative”必须在父标记()中设置。ad)的当前区域。一切都好。制作代码如下：1。1”html结构如下：复制的代码如下： div class=' ad ' Ul class=' slider ' liimg src=' http 3360 images/ads/1 . gif '/Li liimg src=' http 3360 images/ads/2 . gif '/Li liimg src=' http : images/ads/3 . gif '/Li liimg src=' http 3360 images/ads/4 . gif '/Linumli ')。长度；var索引=0；var adTimer$('.num Li’)。mouseover(function(){ index=$(')。num Li’)。索引(这个)；//“this”在这里可以用“$(this)”代替show img(index)；}).eq(0)。mouse over()；//用于初始化。当页面打开时，当第一张图片显示为通用标签时，触发动画。//以广告图片为对象，通用标签滑入停止动画，通用标签滑出开始动画$()。ad’)。hover(function(){ clear interval(ad timer))；}，function(){ adTimer=setInterval(function(){ show img(index))；指数；if(index==len){ index=0；} } , 3000);}).触发器(' mouse leave ')；})//通过给定的索引函数showimg (index) {var ad height=$('显示不同的图片。content _ right.ad ')。高度()；$('.滑块')。停止(真，假)。animate({ ' top ' :-AdhTare * index }，1000)；$('.num Li’)。removeClass('on ')。eq(指数)。add CLaSS(' on ')；} 3 "对应CSS样式：复制代码如下：content _ right { background : # eee；边框： 1px实心# AAA；宽度： 586 px；float:left} .内容_对。ad { margin-bottom :10 px；宽度width:586px高度：150 px；飞越：隐藏；位置：相对；} .内容_对。滑块，内容_对。num { position:absolute} .内容_对。滑块Li { list-style : none；display:inline} .内容_对。滑块img { width:586px高度：150 px；显示：块；} .内容_对。num { right:5pxbottom:5px} .内容_对。num li{左侧浮动：宽度： 16px；height: 16px线高： 16px；文本对齐：中心；font-family : Arial；font-size : 12px；color: # FF7300背景-color : # fff；border: 1px实心# FF7300飞越：隐藏；margin: 3px 1pxcursor:指针；} .内容_对。num li.on { width: 21pxheight: 21px线高： 21px；color: # fff背景-color : # FF7300；font-size : 16px；margin: 0 1pxborder : 0；font-weight:粗体；}