来优化焦点图代码
$.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+=1;
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;
}
},50);
if(parseInt($('.bfocus').children("span").width())==0){
sw=parseInt($('.bfocus').width()/$('.bfocus').children("ul").children("li").size())
}
},10000)
}
});<!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="鎴戦櫌涓捐鈥?013姣曚笟鐢熷氨涓氬弻閫変細鈥?
/></li>
<li><img src="http://cqcmxy.com:81/Content/Image/03.png" alt="回优化焦点图代码"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+=1;
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;
}
},50);
if(parseInt($('.bfocus').children("span").width())==0){
sw=parseInt($('.bfocus').width()/$('.bfocus').children("ul").children("li").size())
}
},10000)
}
});
$(".bfocus").flash();
</script>
</body>
</html>
<!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>
<style>
body{text-align: center;}
.bfocus{margin: 50px auto;width:1073px;height: 216px;overflow: hidden;text-align: left;position: relative;}
.bfocus div{position: absolute;height: 216px;}
.bfocus ul{margin: 0;padding: 0;list-style: none;}
.bfocus ul li{margin: 0;padding: 0;width:1073px;height: 216px;overflow: hidden;position: absolute;}
.bfocus ul li img{width:100%;height: 100%}
</style>
<script>
$.fn.extend({
flash: function(){
var W=$(this).width();//总宽度
var img=$(this).find("img");//img对象集
var l=img.size();//总共多少个
var w=W/l;//每个小块的宽度
var n=l-1,html="";
for(var i=0;i<l;i++){
html+='<div style="left:'+w*i+'px;width:'+w+'px;background-position: '+(-w*i)+'px 0"></div>';
}
var div=$(html).appendTo($(this));
setInterval(function(){
div.css({display:"block",backgroundImage:"url("+img.eq(n).attr("src")+")",width:w});
n=n+1>l-1?0:n+1;
img.hide().eq(n).show();
div.animate({width:1},2000,function(){$(this).hide()})
},5000);
}
});
</script>
</head>
<body>
<div class="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="回优化焦点图代码"></li>
<li><img src="http://cqcmxy.com:81/Content/Image/03.png" alt="回优化焦点图代码" ></li>
</ul>
</div>
<script>
$(".bfocus").flash();
</script>
</body>
</html>