先看效果
原理
就是黑色div中装一个红色的div;然后 overflow:hide,
两个div的定位方式都是absolute,
然后利用jq改变红色div的top值就ok!
HTML代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="outer" class="outer"> <ul id="slider" class="slider"> <li><img src="IMG/sam.PNG" alt="sam" /></li> <li><img src="IMG/appleImg.PNG" alt="sam" /></li> <li><img src="IMG/sony001.PNG" alt="sam" /></li> <li><img src="IMG/sonyInfo.jpg" alt="sam" /></li> <li><img src="IMG/sonyInfo.jpg" alt="sam" /></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>
css 代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
img{ height:180px; width:350px; display:block; } .slider,.num{ position:absolute; } .slider li { list-style:none; display:inline; } .outer{ height:180px; width:350px; overflow:hidden; border:1px solid #AAAAAA; position:relative; } .outer ul { list-style:none; margin:0px; padding:0px; } .outer ul li{ } .num{ bottom:5px; right:5px; } .num li{ float:left; color:#FF7300; text-align:center; line-height:16px; font-family:Arial; font-size:12px; cursor:pointer; margin:3px 1px; border:1px solid ; width:12px; #FF7300;background-color: #fff; } .on{ color:#fff; line-height:21px; width:21px; font-size:18px; margin:0 1px; border:0; background-color:#FF7300; font-weight:bold; }
jq 代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/jscript"> 2 $(function (){ 3 var len=$(".num>li").length; 4 var index=0; 5 var Timer; 6 $(".num li").mouseover(function (){ 7 index=$(".num li").index(this); //获取当前的索引; 8 showImg(index); 9 }).eq(0).mouseover(); 10 11 $("#outer").hover(function (){ 12 clearInterval(Timer) 13 },function (){ 14 Timer=setInterval(function (){ 15 showImg(index); 16 index++; 17 if(index==len){ 18 index=0; 19 } 20 },3000) 21 22 }).trigger("mouseleave"); 23 }) 24 25 function showImg(index){ 26 var he=$("#outer").height(); 27 //alert(he) 28 $("#slider").stop(true,false).animate({top:-(he*index)},300); //向上的效果; 29 $(".num li").removeClass("on").eq(index).addClass("on"); //这是下标的变化 30 } 31 32 33 </script>
总结:
代码简洁(看了js代码后,你会发现这个其实,真的很简洁),借助jq动画帮助,效果已经很不错了,不过要是你最求完美的话!
亲,阅读我的另外一篇文章:
JS-实现图片的横向滑动!