图片轮播效果图:
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; 750px; height:415px;float:left; }
.j11308_slider_banner1{ height:414px;}
/*banner*/
.slides {750px; height:414px; overflow: hidden; position:relative;}
.slide_pic { margin: 0px; padding: 0px; 750px; overflow:hidden; list-style:none; }
.slide_pic img { 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 {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{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; }