此代码参考网上修改的,上面要收费,我花了一小时整理修改的。。。还算节约了一瓶可乐钱。。。
?
下面附上代码和源码。。。
?
效果图
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(下载地址 )
?
?
?