日期:2014-05-16 浏览次数:20376 次
var data = { interval:5000, //翻页间隔(单位毫秒) focusWrap:".focus-body", leftBtn:".leftBtn", //左边按钮的class rightBtn:".rightBtn", //右边按钮的class speed:149, //翻页距离 list2:$("#list1 li").clone(true).insertAfter("#list1").wrapAll("<ul id='list2'></ul>"),//复制一个list /*----自动滚动----*/ ljl_AutoPlay:function(){ alert("1") setInterval(data.ljl_GoRight,data.interval); }, /*----左侧按钮添加点击事件----*/ ljl_GoLeft:function(){ $(data.leftBtn).click(function(){ $(data.focusWrap).animate({left :'+=' + data.speed},"normal"); }) }, /*----右侧按钮添加点击事件----*/ ljl_GoRight:function(){ alert("2") $(data.rightBtn).bind("click", function(){ alert("3") $(data.focusWrap).animate({left :'-=' + data.speed},"normal"); }); }, } data.ljl_AutoPlay();
<div class="focus"> <div class="leftBtn"></div> <div class="rightBtn"></div> <div class="focus-warp"> <div class="focus-body"> <ul id="list1"> <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li> <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li> <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li> <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li> <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li> <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li> </ul> </div> </div> </div>
/*reset*/ ul,li{ list-style:none; margin:0; padding:0;} /*main*/ .focus{ position:relative; border:1px solid #000; width:960px; height:174px; margin:0 auto; } .leftBtn{ position:absolute; background:url(http://mat1.gtimg.com/auto/07np/bj2012/lorr.png) no-repeat 0 0; height:174px; width:21px; cursor:pointer;} .rightBtn{ position:absolute; background:url(http://mat1.gtimg.com/auto/07np/bj2012/lorr.png) no-repeat 0 bottom; height:174px; width:21px; right:0; cursor:pointer;} .focus-warp{position:absolute; left:21px; overflow:hidden; height:174px; width:894px; padding-left:23px;} .focus-body{ position:absolute; width:9999px;}/*left的宽度等于21px(按钮的宽度)+li的marginright*/ .focus-body ul li{ float:left; margin