<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>banner</title>
<!--引入开始-->
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
ul, li{list-style:none;}
img{border:0;}
.wrapper{800px;margin:0 auto;padding-bottom:50px;}
/* 核心代码 */
.focus{800px;height:280px;overflow:hidden;position:relative;}
.focus ul{height:380px;position:absolute;}
.focus ul li{float:left;800px;height:280px;overflow:hidden;position:relative;background:#000;}
.focus ul li div{position:absolute;overflow:hidden;}
.focus .btn{position:absolute;780px;height:10px;padding:5px 10px;right:0;bottom:5px;text-align:center;}
.focus .btn span{display:inline-block;_display:inline;_zoom:1;13px;height:13px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;border-radius:50%;}
.focus .btn span.on{background:yellow;}
.focus .preNext{45px;height:100px;position:absolute;top:90px;background:url("http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/sprite.png") no-repeat 0 0;cursor:pointer;display:none;}
.focus .pre{left:0;}
.focus .next{right:0;background-position:right top;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script>
jQuery.fn.extend({
slideFocus: function(){
var This = $(this);
var sWidth = $(This).width(),
len =$(This).find('ul li').length,
index = 0,
Timer;
// btn event
var btn = "<div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
};
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$(This).append(btn);
$(This).find('.btn span').eq(0).addClass('on');
$(This).find('.btn span').mouseover(function(){
index = $(This).find('.btn span').index(this);
Tony(index);
});
$(This).find('.next').click(function(){
index++;
if(index == len){index = 0;}
Tony(index);
});
$(This).find('.pre').click(function(){
index--;
if(index == -1){index = len - 1;}
Tony(index);
});
// start setInterval
$(This).find('ul').css("width",sWidth * (len));
$(This).hover(function(){
clearInterval(Timer);
show($(This).find('.preNext'));
},function(){
hide($(This).find('.preNext'));
Timer=setInterval(function(){
Tony(index);
index++;
if(len == index){index = 0;}
}, 2000)
}).trigger("mouseleave");
function Tony(index){
var new_width = -index * sWidth;
$(This).find('ul').stop(true,false).animate({'left' : new_width},300);
$(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
};
// show hide
function show(obj){ $(obj).stop(true,false).fadeIn();}
function hide(obj){ $(obj).stop(true,false).fadeOut();}
}
});
</script>
<div style="800px; margin:50px auto;">
<div id="focus" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
</ul>
</div>
</div>
<div style="800px; margin:50px auto;">
<div id="focus2" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
</ul>
</div>
</div>
<div style="800px; margin:50px auto;">
<div id="focus3" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#focus').slideFocus();
$('#focus2').slideFocus();
$('#focus3').slideFocus();
});
</script>
</body>
</html>
