您现在的位置: 365建站网 > 365学习 > JS banner 切换,幻灯片,支持所有浏览器

JS banner 切换,幻灯片,支持所有浏览器

文章来源:365jz.com     点击数:2042    更新时间:2009-11-09 22:40   参与评论

 <!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>

/uploads/allimg/200911/2009110922405162.jpg


JS和css文件,图片文件
http://www.corange.cn//uploadfiles/slide_45027.rar

原文地址:http://www.corange.cn/archives/2009/11/3486.html

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (2042人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------