jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

　　<div class="bannerbox">

　　<div id="focus">

　　<ul>

　　<li><a href="http://www.freejs.net/" target="_blank">

　　<img src="../dandong.png" alt="" /></a></li>

　　<li><a href="http://www.freejs.net/" target="_blank">

　　<img src="../mohe.png" alt="" /></a></li>

　　<li><a href="http://www.freejs.net/" target="_blank">

　　<img src="../changbaishan.png" alt="" /></a></li>

　　<li><a href="http://www.freejs.net/" target="_blank">

　　<img src="../erlianhaote.png" alt="" /></a></li>

　　</ul>

　　</div>

　　</div>

　　@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; }

　　$(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" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);

　　}

　　});