jquery left and right scrolling focus graph banner picture mouse over Display page Up button _jquery

jquery left and right scrolling focus map banner picture, mouse over show page down
For pages with wide and high widths

Demonstrate

Copy Code code as follows:

<div class= "Bannerbox" >
<div id= "Focus" >
<ul>
<li><a href= "http://www.freejs.net/" target= "_blank" >
</a></li>
<li><a href= "http://www.freejs.net/" target= "_blank" >
</a></li>
<li><a href= "http://www.freejs.net/" target= "_blank" >
</a></li>
<li><a href= "http://www.freejs.net/" target= "_blank" >
</a></li>
</ul>
</div>
</div>

Copy Code code as follows:

@charset "Utf-8";
img {border:0px;}
. bannerbox {width:320px; height:150px; overflow:hidden; margin:0px Auto;}
#focus {width:320px; height:150px; clear:both; overflow:hidden; position:relative; float:left;}
#focus ul {width:320px; height:150px; float:left; position:absolute; clear:both; padding:0px; margin:0px;}
#focus ul li {float:left; width:320px; height:150px; overflow:hidden; position:relative; padding:0px; margin:0px; }
#focus. prenext {width:250px; height:150px; position:absolute; top:0px; cursor:pointer;}
#focus. Pre {left:0 background:url (.) /images/sprite.png) No-repeat left center; }
#focus. Next {rightright:0; Background:url (.. /images/sprite1.png) no-repeat Rightright Center; }

JS file

Copy Code code as follows:

$ (function () {
var swidth = $ ("#focus"). width ();
var len = $ ("#focus ul li"). length;
var index = 0;
var Pictimer;
var btn = "<div class= ' btnbg ' ></div><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> ';
$ ("#focus"). Append (BTN);
$ ("#focus. BTNBG"). CSS ("opacity", 0);
$ ("#focus. BTN span"). CSS ("opacity", 0.4). MouseEnter (function () {
Index = $ ("#focus. BTN span"). index (this);
Showpics (index);
). EQ (0). Trigger ("MouseEnter");
$ ("#focus. Prenext"). CSS ("opacity", 0.0). Hover (function () {
$ (this). Stop (True, false). Animate ({"opacity": "0.5"}, 300);
}, function () {
$ (this). Stop (True, false). Animate ({"opacity": "0"}, 300);
});
$ ("#focus. Pre"). Click (function () {
index-= 1;
if (index = = 1) {index = len-1;}
Showpics (index);
});
$ ("#focus. Next"). Click (function () {
Index + 1;
if (index = = len) {index = 0;}
Showpics (index);
});
$ ("#focus ul"). CSS ("width", swidth * (len));
$ ("#focus"). Hover (function () {
Clearinterval (Pictimer);
}, function () {
Pictimer = setinterval (function () {
Showpics (index);
index++;
if (index = = len) {index = 0;}
}, 2800);
}). Trigger ("MouseLeave");
function Showpics (index) {
var nowleft =-index * swidth;
$ ("#focus ul"). Stop (True, false). Animate ({"Left": Nowleft}, 300);
$ ("#focus. BTN span"). Stop (True, false). Animate ({"opacity": "0.4"},). EQ (index). Stop (True, false). Animate ({" Opacity ":" 1 "}, 300);
}
});