jquery自动焦点图
效果预览:http://runjs.cn/detail/vydinibc
带左右箭头的自动焦点图:http://runjs.cn/detail/wr1d1keh
html:
<div class="recommend"> <div class="pic" id="fade"> <ul> <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" /></a></li> <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg" /></a></li> <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg" /></a></li> </ul> <ol> <li class="active"><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" /></a></li> <li><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg" /></a></li> <li><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg" /></a></li> </ol> <p>内容1~</p> </div>
css:
body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; } em { font-style:normal; } li { list-style:none; } a { text-decoration:none; } img { border:none; vertical-align:top; } table { border-collapse:collapse; } input,textarea { outline:none; } textarea { resize:none; overflow:auto; } body { font-size:12px; font-family:"微软雅黑"; } .recommend .pic { width:294px; height:168px; padding:12px 12px 0; background:#f8f8f8; position:relative; margin:0 auto; border-radius:6px; } .recommend .pic ul { width:223px; height:133px; position:absolute; top:12px; left:12px; } .recommend .pic ul li { width:223px; height:133px; border:1px solid #fff; position:absolute; top:0; left:0; } .recommend .pic ul img { width:223px; height:133px; } .recommend .pic ol { position:absolute; top:12px; right:12px; } .recommend .pic ol li,.recommend .pic ol img { width:54px; height:30px; } .recommend .pic ol li { border:3px solid #fff; margin-bottom:13px; } .recommend .pic ol .active { border:3px solid #d6191d; } .recommend .pic p { line-height:32px; position:absolute; left:12px; bottom:0px; } .recommend .list { padding:18px 26px 0; } .recommend .list li { height:27px; vertical-align:middle; } .recommend .list em { float:left; color:#dfdfdf; margin-right:7px; } .recommend .list em img { margin-right:3px; } .recommend .list a { float:left; color:#454545; } .recommend .list a:hover { text-decoration:underline; } .recommend .list span { float:right; font-family:arial; font-size:12px; color:#999; }
js:
// 自动播放的焦点图 (function (){ var oDiv = $(‘#fade‘); var aUlLi = oDiv.find(‘ul li‘); var aOlLi = oDiv.find(‘ol li‘); var oP = oDiv.find(‘p‘); var arr = [ ‘内容1~‘, ‘内容2‘, ‘内容3‘ ]; var iNow = 0; var timer = null; fnFade(); aOlLi.click(function (){ iNow = $(this).index(); fnFade(); }); oDiv.hover(function (){ clearInterval(timer); }, autoPlay); function autoPlay() { timer = setInterval(function () { iNow++; iNow%=arr.length; fnFade(); }, 2000); } autoPlay(); function fnFade() { aUlLi.each(function (i){ if ( i != iNow ) { aUlLi.eq(i).fadeOut().css(‘zIndex‘, 1); aOlLi.eq(i).removeClass(‘active‘); } else { aUlLi.eq(i).fadeIn().css(‘zIndex‘, 2); aOlLi.eq(i).addClass(‘active‘); } }); oP.text(arr[iNow]); } })();
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。