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

最新推荐文章于 2023-02-07 16:50:44 发布

anjichan4261

最新推荐文章于 2023-02-07 16:50:44 发布

阅读量126

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/ajuanabc/archive/2009/11/09/2462834.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" />
<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>


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