JS banner 切换,幻灯片,支持所有浏览器
<!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" />
<link href="slide/index_ne.css" rel="stylesheet" type="text/css" />
<link href="slide/common00.css" rel="stylesheet" type="text/css" />
<script src="slide/jquery00.js"></script>
</head>
<body>
<!--content-->
<div class="content">
<!--首页大图轮播-->
<div class="SlidePlayer">
<ul class="SlidePlayer-List">
<li class="selected"><a href=""><img src="slide/1.jpg" /></a></li>
<li ><a href=""><img src="slide/2.jpg" /></a></li>
<li ><a href=""><img src="slide/3.jpg" /></a></li>
<li ><a href=""><img src="slide/4.jpg" /></a></li>
<li ><a href=""><img src="slide/5.jpg" /></a></li>
</ul>
<ul class="SlidePlayer-Trigger">
<li class="selected"><a href=""><img src="slide/12566657.jpg" /></a></li>
<li ><a href=""><img src="slide/12559857.jpg" /></a></li>
<li ><a href=""><img src="slide/12559856.jpg" /></a></li>
<li ><a href=""><img src="slide/12566658.jpg" /></a></li>
<li ><a href=""><img src="slide/12571226.jpg" /></a></li>
</ul>
</div>
<script>
(function($) {
var slide;
var index=0;
var count=0;
var time=3000; //
var done=true;
$.fn.SlidePlayer=function() {
count=$('.SlidePlayer-List li',this[0]).length;
startSlide($('.SlidePlayer-List li',this[0])[0]);
$('.SlidePlayer-Trigger li').bind('mousemove',function() {
if(done&&!$(this).is('.selected')) {
Slide($(this).parent().find('>').index(this),this);
}
});
};
//
function Slide(ix,obj) {
if(ix>=0) index=ix;
else index++;
if(index>count-1) index=0;
stopSlide();
done=false;
var father=$(obj).parents('.SlidePlayer:eq(0)');
var list=$('.SlidePlayer-List',father);
var trigger=$('.SlidePlayer-Trigger',father);
var old=$('>.selected',list);
if(old.length>0) {
old.css('z-index',10);
$('>:eq('+index+')',list).addClass('selected').show();
old.fadeOut(300,function() { //
$(this).css('z-index',1).removeClass('selected');
done=true;
startSlide(obj);
});
trigger.find('li.selected').removeClass('selected');
$('>:eq('+index+')',trigger).addClass('selected');
}
}
//
function stopSlide(){
clearTimeout(slide);
}
//
function startSlide(obj){
slide=setTimeout(function() {Slide(-1,obj)},time);
}
})(jQuery);
</script>
<script>
$(function() {
$('.SlidePlayer').SlidePlayer();
});
</script>
</div>
</body>
</html>
JS和css文件，图片文件
http://www.corange.cn//uploadfiles/slide_45027.rar
原文地址:http://www.corange.cn/archives/2009/11/3486.html
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
