<! DOCTYPE HTML >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>banner</title>
<!--introduction Start-up
<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{width:800px;margin:0 auto;padding-bottom:50px;}
/* Core Code */
. focus{width:800px;height:280px;overflow:hidden;position:relative;}
. focus Ul{height:380px;position:absolute;}
. Focus UL Li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background: #000;}
. Focus ul Li Div{position:absolute;overflow:hidden;}
. focus. btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:5px;text-align:center;}
. focus. BTN Span{display:inline-block;_display:inline;_zoom:1;width:13px;height:13px;_font-size:0;margin-left : 5px;cursor:pointer;background: #fff; border-radius:50%;}
. focus. btn Span.on{background:yellow;}
. focus. Prenext{width: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>
<body>
<script>
JQuery.fn.extend ({
Slidefocus:function () {
var = $ (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= "width:800px; margin:50px auto; " >
<div id= "Focus" class= "focus" >
<ul>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
</ul>
</div>
</div>
<div style= "width:800px; margin:50px auto; " >
<div id= "Focus2" class= "Focus" >
<ul>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
</ul>
</div>
</div>
<div style= "width:800px; margin:50px auto; " >
<div id= "Focus3" class= "Focus" >
<ul>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
<li><a href= "JavaScript:;" > </a></li>
</ul>
</div>
</div>
<script type= "Text/javascript" >
$ (function () {
$ (' #focus '). Slidefocus ();
$ (' #focus2 '). Slidefocus ();
$ (' #focus3 '). Slidefocus ();
});
</script>
</body>
jquery Carousel Diagram