最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
用jquery的attr方法实现图片切换效果
时间:2017-03-14 编辑:简简单单 来源:一聚教程网
利用jquery的attr方法实现如下简单的图片切换效果,希望大家喜欢
代码如下:
代码如下 | 复制代码 |
/* intro */ .intro { width:470px; margin-top: 40px; padding: 25px 19px; border: 1px solid #e6e6e6; background-color: #fff; }
.intro .pic-selector { /* width: 430px;*/ height: 256px; /* float: left;*/ }
.intro .pic-selector .pic { width: 341px; height: 256px; overflow: hidden; float: left; }
.intro .pic-selector .pic img { width:100%; height:100%; }
.intro .pic-selector ul { width: 73px; float: left; margin-left: 5px; margin-top:0px; }
.intro .pic-selector ul li { width: 80px; height: 60px; overflow: hidden; margin-top: 5px; cursor: pointer; opacity: 0.5; } .intro .pic-selector ul li img{ width:100%; height:100%; }
.intro .pic-selector ul li.active { opacity: 1; }
.intro .pic-selector ul li:first-child { margin-top: 0px; }
$(function(){ // pic selector $('.intro .pic-selector ul li').hover(function () { $('.intro .pic-selector ul li').removeClass('active'); $(this).addClass('active'); $('.intro .pic-selector .pic img').attr('src', $(this).children('img').attr('src')); // makeImageCoverSize(); }); })
|
-
下一个: jQuery实现最简单实用的分秒倒计时
相关文章
- jquery特效的图片切换插件jqFancyTransitions用法 10-16
- jquery插件DGallery插件模拟翻相 图片切换效果 07-12
- jquery插件DGallery用于商城图片切换效果 07-12
- 基于jquery个性的飞入式图片幻灯切换效果 07-18
- 基于jquery带翻页按钮的图片幻灯切换效果 05-22
- 基于 jquery ImageScroll 实现图片切换效果 10-10