图片轮播无缝接
第一种方法:图片一直向左滑动,无缝接
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul li{list-style-type: none} #banner{ width:400px; height:400px; overflow: hidden; } #banner ul{ width:1600px; overflow: hidden; } #banner ul>li{ width:400px; height:400px; float: left; } img{ max-width: 100%; } </style> </head> <body> <div id="banner"> <ul> <li><img src="img/adamcatlace1.jpg" alt="" width="400px" height="400px"/></li> <li><img src="img/adamcatlace2.jpg" alt="" width="400px" height="400px"/></li> <li><img src="img/adamcatlace3.jpg" alt="" width="400px" height="400px"/></li> <li><img src="img/adamcatlace4.jpg" alt="" width="400px" height="400px"/></li> </ul> </div> <input type="button" value="left" class="left"/> <input type="button" value="right" class="right"/> <script src="js/jquery-1.8.3.min.js"></script> <script> $(function () { $('.right').click(function () { $("#banner ul").animate({marginLeft:"-400px"},600, function () { $("#banner ul>li").eq(0).appendTo($("#banner ul")); $("#banner ul").css('marginLeft','0px'); }); console.log($("#banner ul").html()); }) $('.left').click(function () { $("#banner ul").css('marginLeft','-400px'); $("#banner ul>li").eq(3).prependTo($("#banner ul")); $("#banner ul").animate({marginLeft:"0px"},600); }) }) </script> </body> </html>
第二种方法:图片向左滑动,当到最后一个一个图片,向右滑动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #a1{ width:400px; height:400px; left:0; position:relative; overflow:hidden; } #ta{ position:relative; left:0px; top:0px; transition:1s; } </style> </style> </head> <body> <div id="a1"> <table id="ta" cellpadding="0" cellspacing="0" > <tr> <td><img src="img/adamcatlace1.jpg" /></td> <td><img src="img/adamcatlace2.jpg"/></td> <td><img src="img/adamcatlace3.jpg"/></td> <td><img src="img/adamcatlace4.jpg"/></td> <td><img src="img/adamcatlace5.jpg"/></td> </tr> </table> </div> <script> //javascrpt固定格式,双标签元素 var leftBoolse=true; document.getElementById("ta").style.left="0px" //将0px这个值赋值给根据id找到的left的值 function ff(){ // 定义一个值ta,将找到的值强制转换为整数 var ta=parseInt( document.getElementById("ta").style.left); //判断,当ta>-3200时执行的操作 if(leftBoolse){ if(ta != -1600){ //将ta的值减去400,(将left向左移动,原来的数是0,-400,即移动一张图的距离) document.getElementById("ta").style.left=(ta-400)+"px"; }else{ leftBoolse=false; } }else{ //不满足ta>-3200时,即ta=3200时,走完五张图的时候,跳回0px,即回到第一张图 if(ta != 0){ document.getElementById("ta").style.left=(ta+400)+"px"; }else{ leftBoolse=true; } } window.setTimeout("ff()",2000); } //延迟执行ff(),2s的时间,两秒钟换第一次图 window.setTimeout("ff()",2000); </script> </body> </html>
记下点滴,等老了慢慢欣赏