jquery 图片轮换
jquery 图片轮换
1.下载jquery.superslide.2.1.1.js (百度搜索)
2.下载Jquery-1.4.1.js(百度搜索下载)
准备工作好了,下面开始实现
3.html
<div class="lunzhuan"> <ul class="pic"> <li><a href="#"> <img src="../images/1.jpg"/></a> </li> <li><a href="#"> <img src="../images/2.jpg"/></a> </li> <li><a href="#"> <img src="../images/3.jpg"/></a> </li> </ul> <a class="Prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a> <div class="num"> <ul></ul></div> </div> 4.css样式 <style type="text/css"> body,div,ul,li { padding:0; marin:0; } ul{list-style:none} img{border:none} a{blr:express(this.onFouce=this.blur()); outline:none} .lunhuan { width:600px; height:260px; margin:0; postion:relative; overflow:hidden; margin-bottom:0; } .lunhuan .num { overflow:hidden; height:25px; position:absolute; bottom:12px; left:15px; zoom:1; z-index:3; } .lunhuan .num li { width:25px; height:25px; text-height:25px; text-aligen:center; font-weight:400; font-family:"微软雅黑",Arial; color:#FFFFFF; background:#444444; margin-right:10px; border-radius:50%; cursor:pointer; float:left; } .lunhuan .num li .on { background:#FF7700; } .lunhuan .prev,.lunhuan .next { display:none; width:40px; height:100px; background:url(/images/leftRight.png) --<>这个样式的图片 position:absolute; top:80px; } .lunhuan .prev { left:0; } .lunhuan .next { right:0; background-position:right; } </style>
5.引用两个jq文件 开始写jq
<script type="text/javascript"> $(function(){ $(".lunhuan").hover(fonction(){ $(this).find(".prev,.next").fadeTo("show",0.1); },function(){ $(this).find(".prev,.next").hide(); }) $(".prev,.next").hover(){ $(this).fadeTo("show",0.5); },function(){ $(this).fadeTo("show",0.1); }) $(".lunhuan").slide({titCell:".num ul", mainCell:".pic",effect:"fold",autoPlay:true,delayTime:,autoPage:true}); }); </script>
结束。
jquery 图片轮换的更多相关文章
- JQuery图片轮换 nivoSlider图片轮换
效果图: 第一步:添加引用 <script src="jquery-ui-1.9.2.custom.min.js" type="text/javascript&qu ...
- Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
- jQuery仿迅雷图片轮换效果
jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 美女jquery图片播放器插件
相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
随机推荐
- 销售订单、外向交货单、交货 bapi
转自[http://www.cnblogs.com/elegantok/archive/2009/10/18/1585398.html]***********SALES ORDER INPUT CRE ...
- Python 面试题(下)
接上篇. 网络 1 三次握手 客户端通过向服务器端发送一个SYN来创建一个主动打开,作为三路握手的一部分.客户端把这段连接的序号设定为随机数 A. 服务器端应当为一个合法的SYN回送一个SYN/ACK ...
- R语言set.seed()函数介绍
set.seed(),该命令的作用是设定生成随机数的种子,种子是为了让结果具有重复性.如果不设定种子,生成的随机数无法重现.这个函数的主要目的,是让你的模拟能够可重复出现,因为很多时候我们需要取随机数 ...
- MainWindows
开发带有菜单栏状态栏等常用windows应用时候使用
- Shell中的while循环
while循环的格式 while expression do command command ``` done 1.计数器控制的while循环 主要用于已经准确知道要输入的数据和字符串的数目 ...
- 模仿jquery框架源码---网络
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page& ...
- html 文本输入框效果大汇集
html 文本输入框效果大汇集 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ...
- DevOps means no Ops!
DevOps means no Ops! 只单纯地搞网络的话或许你可以搞得非常好,并且获得不错的薪资,不过,5年后~10年后~,那时候随便一个人经过简单的学习就能通过Web界面或者专用的工具就能搞定一 ...
- CustomizaitonSpec Clone_VM
克隆虚拟机可以加上CustomizationSpec来自动配置好:IP地址.DNS.Domain等信息 1.可以利用PyVmimo中的vim模块在python中完全自定义CustomizationSp ...
- Linux课程---3、Linux远程登录和传输(操作Linux服务器软件)
Linux课程---3.Linux远程登录和传输(操作Linux服务器软件) 一.总结 一句话总结: xshell:Xshell是一个强大的安全终端模拟软件 Xshell是一个强大的安全终端模拟软件, ...