简单的图片轮换
首先用Css 创建简单的ui
<style> ul{ list-style:none; padding:0px; margin:0px;} #scrollPics{ width:500px; height:200px; position:relative; overflow:hidden} #scrollPics img{ width:500px; height:200px;} #scrollPics .num{position:absolute;right:5px;bottom:5px;} #scrollPics .num ul{ list-style:none;} #scrollPics .num li{ float:left; width:20px; height:20px; border:1px #FFCC00 solid;cursor: pointer;background-color: #fff; margin-right:5px; text-align:center; font-size:12px} #scrollPics .num li.on{ width:20px; height:20px; border:1px #FFCC00 solid;cursor: pointer; background-color:#FF6600} </style>在boby里插入这段代码
<div id="scrollPics"> <ul class="slide"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> </ul> <ul class="num"> <li class="on">1</li> <li>2</li> <li>3</li> </ul> </div>接下来就要创建jquery动画了
<script language="javascript"> var len = $(".num li").length; var index=0; var adTimer; $(document).ready(function(){ $(".num li").mouseover(function(){ index=$(".num li").index(this); showimg(index); }); $('#scrollPics').hover(function() { clearInterval(adTimer); }, function() { adTimer = setInterval(function() { showimg(index); index++; if (index == len) { //最后一张图片之后，转到第一张 index = 0; } }, 3000); }).trigger("mouseleave"); function showimg(index){ var adHeight=$("#scrollPics>ul>li:first").height(); $(".slide").stop(true,false).animate({ "marginTop":-adHeight*index+"px" },1000); $(".num li").removeClass("on").eq(index).addClass("on"); }; }); </script>
转载于:https://www.cnblogs.com/vania/p/3316577.html
相关资源：网页图片轮换切换网页图片轮换切换