jQuery实现简洁的轮播图效果实例

前端之家收集整理的这篇文章主要介绍了jQuery实现简洁的轮播图效果实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现简洁的轮播图效果分享给大家供大家参考,具体如下:

HTML:

css:

幻灯片*/ .ppt{ width:270px; height:330px; border:1px solid #ccc; position:relative;} .ppt img{ position: absolute; top:10px; left:7px; width:255px; height:310px; overflow:hidden;} .pptNum{ position: absolute; height: 13px; line-height: 14px; bottom:12px; right: 10px; } .pptNum span{ font-size: 12px; font-weight: 400; color: #FFF; float: right; display: block; width: 24px; text-align: center; background: #000; border-left: solid 1px #FFF; cursor: pointer; } .pptNum .normal{ color: #FFF; background: #000; filter: Alpha(opacity=50); opacity: .5; } .pptNum .cur{ background: #ce0609; color: #FFF; }

js:

span:contains(' + (i + 2 > num ? num - i : i + 2) + ')').attr('class','cur').siblings('span').attr('class','normal'); i = i + 1 === num ? 0 : i + 1; },st = setInterval(autochange,t || 2000); $this.hover(function () { clearInterval(st); },function () { st = setInterval(autochange,t || 2000) }); $pics.find('.pptNum>span').click(function () { i = parseInt($(this).text(),10) - 2; autochange(); }); } }); }(jQuery)); $('.ppt').ppting(1000);

调用JQ:

猜你在找的jQuery相关文章