有域名了怎么建立网站,网站后台登录域名,做内容网站 用什么模版,网络营销课程总结1000字基于JQuery制作的产品广告效果效果图.如下#xff1a;动画效果介绍#xff1a;这组广告效果是打开页面后图片会自动播放#xff0c;从1-5共计5张图片#xff0c;如果属标放到右下角的1、2、3、4、5列表上#xff0c;可以自由进行切换到自己想看的图片上去。图片切换是由下…基于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结构如下复制代码 代码如下:123452》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 ){ index0; }} , 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(对象.属性)集锦之二正则表达式 表示 非指定字符串开头的正则
