最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jquery带翻页按钮的图片幻灯切换效果
时间：2012-05-22 编辑：简简单单 来源：一聚教程网
先看效果图,我用红色框框起来的左右按钮。
下面我们来分析代码这是css文件
| 代码如下 | 复制代码 |
| ul,li{margin:0;padding:0;} img {border:none;} ul li{list-style:none;} .sx,#idSlider,#idSlider img{width:400px;height:230px;overflow:hidden;} .sx {position:relative;} #shang,#xia{position:absolute;z-index:19;width:24px;height:230px;text-align:center;line-height:230px;background-color:#fff;top:0;text-decoration:none;font-size:12px;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);} #shang{left:0px;} #xia{right:0px;} #shang:hover,#xia:hover{opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);} |
|
html代码
| 代码如下 | 复制代码 |
jquery代码
| 代码如下 | 复制代码 |
整个实例代码如下
| 代码如下 | 复制代码 |
|
|
|
总结：自达有了jquery这东西后我们做起js特效来就特别容易了，效果就更加逼真更好看了。
相关文章
- 用jquery的attr方法实现图片切换效果 03-14
- jquery特效的图片切换插件jqFancyTransitions用法 10-16
- jquery插件DGallery插件模拟翻相 图片切换效果 07-12
- jquery插件DGallery用于商城图片切换效果 07-12
- 基于jquery个性的飞入式图片幻灯切换效果 07-18
- 基于 jquery ImageScroll 实现图片切换效果 10-10