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

jquery左右滚动焦点图旗帜图片，鼠标经过显示上下页适合宽和高都比较大的页面使用

演示复制代码代码如下： div class=' banner box ' div id=' focus ' ul lia href=' http://www .弗里斯。net/' target=' _ blank ' img src=' http :/丹东。png ' alt=' '//a/Li lia href=' http://www .弗里斯。net/' target=' _ blank ' img src=' http :/漠河。png ' alt=' '//a/Li lia href=' http://www .弗里斯。net/' target=' _ blank ' img src=' http :/长白山。png ' alt=' '//a/Li lia href=' http://www .弗里斯。net/' target=' _ blank ' img src=' http :/二连浩特。png' alt='' //a/li /ul /div /div复制代码代码如下： @ charset ' utf-8 '；img { border: 0px}。bannerbox { width: 320px高度： 150像素；飞越：隐藏；余量： 0px自动；} #焦点{ width: 320px高度： 150像素；clear:两者；飞越：隐藏；相对位置：向左浮动：} #聚焦ul { width: 320px高度： 150像素；向左浮动：绝对位置：clear:两者；padd : 0pxmargin : 0px } # focus ul Li {左侧浮动：宽度： 320 px高度： 150像素；飞越：隐藏；相对位置：padding: 0pxmargin: 0px } #专注preNext { width: 250px高度： 150像素；绝对位置：top: 0pxcursor:指针；} #专注pre { left : 0；背景：网址(./images/sprite.png)不重复左中；} #专注。下一个{右： 0；背景：网址(./images/sprite1.png)不重复右中；} js文件复制代码代码如下： $(function(){ var sWidth=$(' # focus ')).宽度();var len=$('#focus ul li ').长度；定义变量索引=0;var Pictimervar BTN=' div class=' btnBg '/div div class=' BTN '；for(var I=0；我透镜；BTN；} BTN='/div class=' preNext pre '/div class=' preNext next '/div '；$('#focus ').追加(BTN)；$('#focus .btnBg ').css(“”不透明度',0);$('#focus .BTN .css(“”不透明度',0.4)。鼠标输入(function(){ index=$(' # focus .BTN .索引（这个);showPics(索引);}).等式(0).触发器(“鼠标输入”)；$('#focus .preNext ').css(“”不透明度',0.0)。悬停(function () { $(this)).停止（真，假)。动画({ '不透明度' : '0.5' },300);}，function () { $(this).停止（真，假)。动画({ '不透明度' : '0' },300);});$('#focus .前' .click(function(){ index-=1；if(index==-1){ index=len-1；} showPics(索引);});$('#focus .下一个')。click(function(){ index=1；if(index==len){ index=0；} showPics(索引);});$(' #聚焦ul ').css('width '，sWidth *(len))；$('#focus ').hover(function(){ clearInterval(Pictimer))；}，function(){ Pictimer=设置间隔(function(){ show pics(index))；指数；if(index==len){ index=0；} }, 2800);}).触发器(“鼠标离开”)；函数显示图片(索引){ var now left=-index * sWidth；$(' #聚焦ul ').停止（真，假)。动画({ 'left': nowLeft }，300)；$('#focus .BTN .停止（真，假)。动画({ '不透明度' : '0.4' },300)。eq(指数)。停止（真，假)。动画({ '不透明度' : '1' },300);} });