商城常用滚动的焦点图效果代码简单实用

这种商城的效果网上很多，但大多是插件，要么射流研究…写的太过于复杂，对于学习的童鞋来说看起来比较费劲，这个看起来比较简单，也比较容易理解，各位童鞋需要的请围观，也欢迎各位评价，贴代码（为方便使用，代码复制即可用，无需另外添加东西): 复制代码代码如下：doctype html html lang='en '标题商城常用滚动的效果，简单实用/title脚本类型=' text/JavaScript ' src=' http :http://JT。875 .cn/js/jquery。js /脚本脚本类型=' text/JavaScript ' $(function(){ var len=$(').数李' .长度；定义变量索引=0;var adTimer$(')。数李' .mouseover(function(){ index=$(').数李' .索引（这个);showImg(索引);}).等式(0).鼠标悬停在()；//滑入停止动画，滑出开始动画。$('.公元'年.hover(function(){ clearInterval(ADTiMer))；}，function(){ adTimer=setInterval(function(){ showImg(index)index；if(index==len){ index=0；} } , 3000);}).触发器(“鼠标离开”)；}) //通过控制顶部，来显示不同的幻灯片函数显示img(索引){ var AdhTarget=$(' .内容(公元)年.高度();$('.滑块')。停止（真，假)。animate({ top :-AdhTare * index }，1000)；$('.数李' .removeClass('on ').eq(指数)。添加CLaSS(' on ')；}/脚本样式类型='text/css' ul，li { margin:0划水：0;} .ad { margin-bottom :10 px；宽度宽度：586像素高度：150 px飞越：隐藏；位置：相对；} .内容。滑块，内容num { position:absolute}。内容。滑块李{列表式：无；display:inline}。内容。滑块img { width:586px高度：150 px显示：块；} .内容num { right :5 pxbottom :5 px }。内容num li {左侧浮动：color: # FF7300文本对齐：中心；线高： 16px宽度： 16pxheight : 16px font-family : Arial；font-size : 12px光标：指针；飞越：隐藏；margin : 3px 1pxborder : 1px实心# FF7300背景-color : # fff；} .内容num li.on { color: # fff线高： 21px宽度： 21pxheight : 21 px font-size : 16px；margin: 0 1pxborder : 0背景-颜色： # FF7300字体粗细：粗体；}/style/head body div class=' content ' div class=' ad ' ul class=' slider ' liimg src=' http :http://pic。875 .cn/upload/2013-03-26/1504517406。jpg ' width=' 586 ' height=' 150 '/Li liimg src=' http :3358 pic。875 .cn/upload/2013-2013效果图如下