仿趣玩网五屏带标题的jQuery幻灯效果 分享
此代码参考网上修改的，上面要收费，我花了一小时整理修改的。。。还算节约了一瓶可乐钱。。。下面附上代码和源码。。。
效果图
http://www.agoit.com/upload/picture/pic/104664/ad274655-edb0-3c22-a7f3-4314c5a9b967.png
1.页面
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'><html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><link href='slides.css' media='all' type='text/css' rel='stylesheet'><script type='text/javascript' src='jquery.js'></script><title></title></head><body><div class='slides'> <ul class='slide-pic'> <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='童款卫衣￥89选2' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li> <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='SPORTICA特惠159元' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li> <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='RAMPAGE新品79元起' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li> <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='佐丹奴冬装劲爆价' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li> <li class='cur' style='display: list-item;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='性感女郎全场低至4折' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li> </ul> <ul class='slide-li op'><li class=''></li><li class=''></li><li class=''></li><li class=''></li><li class='cur'></li> </ul> <ul class='slide-li slide-txt'> <li class=''><a target='_blank' href='http://djangoer.iteye.com'>童款卫衣￥89选2</a></li> <li class=''><a target='_blank' href='http://djangoer.iteye.com'>SPORTICA特惠159元</a></li> <li class=''><a target='_blank' href='http://djangoer.iteye.com'>RAMPAGE新品79元起</a></li> <li class=''><a target='_blank' href='http://djangoer.iteye.com'>佐丹奴冬装劲爆价</a></li> <li class='cur'><a target='_blank' href='http://djangoer.iteye.com'>性感女郎全场低至4折</a></li> </ul></div></body><script type='text/javascript'>if($('.slide-pic').length>0){var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 };var _titles = $('ul.slide-txt li');var _titles_bg = $('ul.op li');var _bodies = $('ul.slide-pic li');var _count = _titles.length;var _current = 0;var _intervalID = null;var stop = function() { window.clearInterval(_intervalID); };var slide = function(opts) {if (opts) {_current = opts.current || 0;} else {_current = (_current >= (_count - 1)) ? 0 : (++_current);};_bodies.filter(':visible').fadeOut(defaultOpts.fadeOutTime, function() {_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);_bodies.removeClass('cur').eq(_current).addClass('cur');});_titles.removeClass('cur').eq(_current).addClass('cur');_titles_bg.removeClass('cur').eq(_current).addClass('cur');}; var go = function() {stop();_intervalID = window.setInterval(function() { slide(); }, defaultOpts.interval);}; var itemMouseOver = function(target, items) {stop();var i = $.inArray(target, items);slide({ current: i });}; _titles.hover(function() { if($(this).attr('class')!='cur'){itemMouseOver(this, _titles); }else{stop();}}, go);_bodies.hover(stop, go);go();}</script></html> 2.css文件
@CHARSET "UTF-8";.slides { overflow: hidden; position: relative; height: 380px; width: 690px;}.slides * { list-style: none outside none; margin: 0; padding: 0;}.slides ul { list-style-type: none;}.slides li { list-style-type: none;}.slides a img, *:link img, *:visited img { border: 0 none;}.slides a:link { color: #000000; text-decoration: none;}.slides a:visited { color: #000000; text-decoration: none;}.slides a:hover { color: #000000; text-decoration: underline;}.slides .slide-pic { overflow: hidden; width: 690px;}.slides .slide-pic img { height: 380px; width: 690px;}.slides .slide-pic li { display: none;}.slides .slide-pic li.cur { display: block;}.slides .slide-li { bottom: 0; left: 0; position: absolute;}.slides .slide-li li { float: left; height: 30px; line-height: 30px; margin-right: 1px; text-align: center; width: 137px;}.slides .slide-li a { color: #FFFFFF; display: block; font-size: 14px; height: 30px; width: 137px;}.slides .slide-li a, .slide-li a:link, .slide-li a:visited { color: #FFFFFF;}.slides .slide-li .cur a, .slide-li a:hover { color: #333333; text-decoration: none;}.slides .op li { background: none repeat scroll 0 0 #666666; opacity: 0.6;}.slides .op li.cur { background: none repeat scroll 0 0 #FFFFFF;}.slides .slide-txt span { display: none;} 3.jquery（下载地址）
页:
[1]