图片轮播
图片轮播效果图:
html test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> <script language="javascript" type="text/javascript" src="js/jquery-1.js" ></script> <script language="javascript" type="text/javascript" src="js/index.js" ></script> </head> <body> <div class="j11308_slider_banner"> <div class="j11308_slider_banner1"> <div class="slides"> <ul class="slide_pic"> <li class="cur"><a rel="nofollow" href="http://www.j1.com/activity/maternal.html" target="_blank"><img alt="母婴特惠5折" src="http://img03.j1.com/images/images1308/index_father.jpg" /></a></li> <li><a rel="nofollow" href="http://miao.j1.com/" target="_blank"><img alt="9点半包邮秒杀" src="http://img03.j1.com/images/images1308/index_miao.jpg" /></a></li> <li><a rel="nofollow" href="http://tuan.j1.com/" target="_blank"><img alt="精品团购秘籍" src="http://img03.j1.com/images/images1308/index_jph.jpg" /></a></li> <li><a rel="nofollow" href="http://dongeejiao.j1.com/" target="_blank"><img alt="东阿阿胶优惠" src="http://img03.j1.com/images/images1308/index_deej_4.jpg" /></a></li> <li><a rel="nofollow" href="http://www.j1.com/promotion/1782.html" target="_blank"><img alt="参茸5折起" src="http://img03.j1.com/images/images1308/index_srzc.jpg" /></a></li> <li><a rel="nofollow" href="http://www.j1.com/promotion/1726.html" target="_blank"><img alt="汤臣倍健买1送2" src="http://img03.j1.com/images/images1308/index_dbzf.jpg" /></a></li> <li><a rel="nofollow" href="http://www.j1.com/activity/jsyp.html" target="_blank"><img alt="避孕套买就送" src="http://img03.j1.com/images/images1308/byt-20131119.jpg" /></a></li> </ul> <ul class="slide_txt op"> <li class="cur"><a rel="nofollow" href="http://www.j1.com/activity/maternal.html" target="_blank">母婴特惠5折</a></li> <li><a rel="nofollow" href="http://miao.j1.com/" target="_blank">秒杀价1折起</a></li> <li><a rel="nofollow" href="http://tuan.j1.com/" target="_blank">精品团购秘籍</a></li> <li><a rel="nofollow" href="http://dongeejiao.j1.com/" target="_blank">东阿阿胶优惠</a></li> <li><a rel="nofollow" href="http://www.j1.com/promotion/1782.html" target="_blank">参茸5折起</a></li> <li><a rel="nofollow" href="http://www.j1.com/promotion/1726.html" target="_blank">汤臣倍健买1送2</a></li> <li><a rel="nofollow" href="http://www.j1.com/activity/jsyp.html" target="_blank">避孕套买就送</a></li> </ul> </div> </div> <div class="j11308_shadow"></div> </div> </body> </html> index.js文件内容 /*banner*/ jQuery(function ($) { if ($(".slide_pic").length > 0) { var defaultOpts = { interval: 3000, 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(); } }); style.css文件内容 img{border:0;} .j11308_slider_banner{ padding:10px 10px 0 10px; width:750px; height:415px;float:left; } .j11308_slider_banner1{ height:414px;} /*banner*/ .slides {width:750px; height:414px; overflow: hidden; position:relative;} .slide_pic { margin: 0px; padding: 0px; width:750px; overflow:hidden; list-style:none; } .slide_pic img { width:750px; height:414px; } .slide_pic li { display: none; } .slide_pic li.cur { display:block; } .slide_txt{ padding:0px; margin:0px; left:0px; bottom:0px; position:absolute;} .slide_txt li {width:107px; height:30px; float:left; overflow:hidden; list-style:none; line-height:30px; text-align:center;} .slide_txt a,.slide_txt a:link,.slide_txt a:visited{width:107px; height:30px; color:#fff; font-size:12px; display: block; text-decoration:none;} .slide_txt a:hover { color:#fff;} .op li { background:#000; filter:alpha(opacity=80); opacity:0.8;} .op li.cur {background:#666; filter:alpha(opacity=80); opacity:0.8; }