今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈:
<body style="text-align: center;"> <div id="img" style="background: gray;opacity: 1; 100%;height: 600px;margin: 0 auto;position: relative;overflow: hidden;"> <div class="img1" style=" 100%;height: 100%;position: absolute;left: -100%"> <img src="1.jpeg" style="background: yellow; 100%;height: 600px"> </div> <div class="img2 ratato" style="float: left;position: absolute; 100%;height: 100%;left: 0"> <img src="2.jpg" style="background: red; 100%;height: 600px"> </div> <div class="img3" style="float: left;position: absolute; 100%;height: 100%;left: 100%"> <img src="3.jpg" style="background: blue; 100%;height: 600px"> </div> </div> <div> <a href="javascript:void(0);" onclick="up()">上一页</a> <a href="javascript:void(0);" onclick="next()">下一页</a> </div> <script type="text/javascript"> var img1,img2,img3;//定义全局变量用来接收DOM对象 var t1,t2,t3,t; $(function(){ t = setTimeout(function(){ test(); },4000)//延迟函数,带dom'准备就绪时间,延迟4秒执行test函数 // clearTimeout(t); function test(){ $('.img2').animate({ left:'100%' })//将class为img2的div通过动画向右移动整个容器的宽度,下面动画同理可得 $('.img1').animate({ left:'0px' }) img3 = $('.img3').remove(); $("#img").prepend(img3); img3.css('left','-100%') t1 = setTimeout(function(){ test1(); },4000) } function test1(){ $('.img3').animate({ left:'0px' }) $('.img1').animate({ left:'100%' }) img2 = $('.img2').remove(); $('#img').prepend(img2); img2.css('left','-100%') t2 = setTimeout(function(){ test2() },4000); } function test2(){ img2.animate({ left:'0px' }) img3.animate({ left:'100%' }) img1 = $('.img1').remove(); img1.css('left','-100%'); $('#img').prepend(img1); t3 = setTimeout(function(){ test() },4000) } }) // function up(){ // clearTimeout(t); // clearTimeout(t1,t2,t3,t); // var a = $('#img').children().eq(1); // a.children().eq(0).attr('class','ratato'); // // a.attr('class','ratato'); // // a.animate({ // // left:'-100%' // // }) // // a.next().animate({ // // left:'0px' // // }); // // var next = a.prev().remove(); // // // alert(next.attr('class')); // // a.next().after(next); // // next.css( // // 'left','100%' // // ) // } // function next(){ // } </script> </body>