完美JQuery图片切换效果的简单实现
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
下面小编就为大家带来一篇完美JQuery图片切换效果的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
css:
body { font-family:"Microsoft Yahei"; }
body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;}
img{vertical-align: top;}
/***大图切换***/
.scroll_view{margin: 0px auto;overflow:hidden;position: relative;}
.photo_view li{position:absolute;width: 100%;}
.photo_view li em,.photo_view li h3{position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px;}
.photo_view li em{z-index: 1;background:rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#50000000',endColorstr = '#50000000');_background:#000;}
.photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;}
.photo_view li h3 a{color:#fff;}
.photo_view li h3 a:hover{color:#f60;}
.small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;}
.small_photo li {float: left;padding-right: 10px;}
.small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;} .small_photo li.active img{border: solid 2px #f60;}
html:
<!-- start:大图切换-->
<div class="scroll_view">
<ul class="photo_view">
<li><img src="images/ad1.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果1</a></h3></li>
<li><img src="images/ad2.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果2</a></h3></li>
<li><img src="images/ad3.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果3</a></h3></li>
<li><img src="images/ad4.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果4</a></h3></li>
</ul>
<ul class="small_photo"></ul>
</div>
<!-- End:大图切换-->
js:
$.fn.extend({
imgScroll:function(options){
var def={phtot_parent:$(".scroll_view"),photo_view:$(".photo_view"),small_photo:$(".small_photo") ,speed:800,isauto:true,width:800,height:349},
opt=$.extend({},def,options),
$photo_view=opt.photo_view,
$small_photo=opt.small_photo,
speed=opt.speed,
isauto=opt.isauto,
index=0,
_length=$photo_view.find("li").length,
strTime=null;
opt.phtot_parent.css({width:opt.width,height:opt.height});
$photo_view.find("li:not(:first)").hide()//.find("img").hide();
$photo_view.find("li").each(function(i){
$small_photo.append('<li><img src="'+$(this).find("img").attr("src")+'" alt="" class="" /></li>');
})
$small_photo.find("li:first").addClass("active");
//小图鼠标动作
$small_photo.find("li").bind("mouseenter",function(){
clearInterval(strTime);
if(index!=$(this).index()){
index=$(this).index();
animate(index)
}
}).bind("mouseleave",function(){
if(isauto){
start();
}
});
//大图悬停动作
$photo_view.find("li").bind("mouseenter",function(){
clearInterval(strTime);
}).bind("mouseleave",function(){
if(isauto){
start();
}
});
//自动播放
if(isauto){
start();
}