$.fn.extend({
flash: function(){
var offset = this.offset();
var ul=$(this).children("ul");
var li=ul.children("li");
var w=$(this).width()/li.size();
for(var i=0;i<li.size();i++){
var span='<span> </span>';
$(this).append(span);
var left=offset.left+(w*i);
var bpostion=w*i;
$(this).children("span").eq(i).css({width:($(this).width()/li.size())+'px',height:$(this).height(),position: 'absolute',top:offset.top+'px',left:left+'px',background:-bpostion+'px 0px no-repeat '})
}
$('.bfocus').children("ul").children("li").children("img").eq(0).show();
var h=1;
var index=0;
var sw=parseInt($('.bfocus').width()/$('.bfocus').children("ul").children("li").size());
var t;
setInterval(function (){
var s=$('.bfocus').children("ul").children("li").length;
index=index >=s-1?0:index+=2;
var b=$('.bfocus').children("ul").children("li").children("img").eq(index).attr("src");
$('.bfocus').children("span").css({backgroundImage:'url('+b+')'});
t=setInterval(function ()
{
$('.bfocus').children("span").css({width:sw+'px'});
document.title=sw;
if(sw<=0){
window.clearInterval(t);
}else{
sw-=1;
}
},20);
if(parseInt($('.bfocus').children("span").width())==0){
sw=parseInt($('.bfocus').width()/$('.bfocus').children("ul").children("li").size())
}
},6000)
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script><script src="http://upcdn.b0.upaiyun.com/libs/modernizr/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="Flash.js"></script>
</head>
<body><style>
.tc_sytle1 {
float: left;
background: #fff;
}
*, html {
margin: 0;
padding: 0;
}
.section {
margin: 0 auto;
width: 1073px;
}
.bfocus {
height: 216px;
overflow: hidden;
}
img{width:100%; height:100%;}
.bfocus ul {
width:200%;
}
.bfocus ul li{width:1073px;height: 216px;}
.bfocus ul li img{display:none;}
</style>
<br/>
<section class="section bfocus">
<ul>
<li ><img src="http://cqcmxy.com:81/Content/Image/01.png" alt="我院石美珊院长一行参观考察中铁华夏广告
有限公司" ></li>
<li ><img src="http://cqcmxy.com:81/Content/Image/02.png" alt="我院举行“2013毕业生就业双选会”"
></li>
<li><img src="http://cqcmxy.com:81/Content/Image/03.png" alt="我院第七届党课培训落下帷幕" ></li>
</ul>
</section>
<script>
$(".bfocus").flash();
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消