一、效果1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery.min.js"></script> <style type="text/css"> ul{margin:0;padding:0;} li{list-style:none;} img{display:block;border:none 0;} .banner{width:400px;height:300px;margin:0 auto;border:1px solid orange;} .banner img{display:none;} .bannerCtrl{width:60px;margin:0 auto;overflow:hidden;} .bannerCtrl li{width:10px;height:10px;float:left;margin:5px 5px;background-color:skyblue;} </style> </head> <body> <div class="banner"> <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px"> <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px"> <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px"> </div> <ul class="bannerCtrl"> <li></li> <li></li> <li></li> </ul> <script type="text/javascript"> $(document).ready(function(){ $(".banner img:first").css("display","block"); $(".bannerCtrl li:first").css("background-color","pink"); }); $(function(){ $(".bannerCtrl li").mouseover(function(){ var n=$(".bannerCtrl li").index($(this)); $(".banner img").hide(); $(".banner img").eq(n).show(); $(this).css("background-color","pink"); $(this).siblings("li").css("background-color","skyblue"); }); }); </script> </body> </html>
二、效果2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery.min.js"></script> <style type="text/css"> img{display:block;border:none 0;} .outBox{border:2px solid orange;width:400px;height:300px;overflow:hidden;position:relative;} .imgBox{width:1200px;height:300px;position:absolute;left:0;top:0;} .imgBox img{float:left;} </style> </head> <body> <div class="outBox"> <div class="imgBox"> <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px"> <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px"> <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px"> </div> </div> <script type="text/javascript"> $(function(){ function run(){ /*滚动一次*/ $(".imgBox").animate({left:"-400px"},500,function(){ /*将第一张图放在最后一张图的后面*/ $(".imgBox img:first").insertAfter($(".imgBox img:last")); /*将图像框归位*/ $(".imgBox").css({left:"0"}); }); } /*定时器*/ var interval=setInterval(run,1000); //每隔2000毫秒执行一次 $(".imgBox").hover(function(){ if(interval){ clearInterval(interval); //鼠标置于上时取消定时器 interval=null; } },function(){ if(interval){ clearInterval(interval); interval=null; } interval=setInterval(run,1000); //鼠标离开后重新开始定时器 }); }); </script> </body> </html>
三、效果3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery.min.js"></script> <style type="text/css"> img{display:block;border:none 0;} .box{width:400px;height:300px;border:2px solid orange;overflow:hidden;position:relative;} .imgBox{width:1200px;height:300px;} .imgBox img{float:left;} .leftBtn,.rightBtn{width:30px;height:150px;line-height:150px;background-color:skyblue;text-align:center;cursor:pointer;position:absolute;} .leftBtn{left:0;top:75px;color:gray;} .rightBtn{right:0;top:75px;color:white;} </style> </head> <body> <div class="box"> <div class="imgBox"> <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px"> <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px"> <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px"> </div> <a class="leftBtn"><<</a> <a class="rightBtn">>></a> </div> <script type="text/javascript"> $(function(){ /*获取imgBox中共有几个img子元素*/ var i=0; i=parseInt($(".imgBox").children("img").length); var j=0; /*按向右箭头，图片向左滑动*/ $(".rightBtn").click(function(){ j=j+1; if(j<i){ $(".imgBox").animate({marginLeft:-400*j},1000); if((j+1)>=i){ $(".leftBtn").css("color","white"); $(".rightBtn").css("color","gray"); }else if((j-1)<0){ $(".leftBtn").css("color","gray"); $(".rightBtn").css("color","white"); }else{ $(".leftBtn").css("color","white"); $(".rightBtn").css("color","white"); } }else{ j=i-1; } }); /*按向左箭头，图片向右滑动*/ $(".leftBtn").click(function(){ j=j-1; if(j>=0){ $(".imgBox").animate({marginLeft:-400*j},1000); if((j+1)>=i){ $(".leftBtn").css("color","white"); $(".rightBtn").css("color","gray"); }else if((j-1)<0){ $(".leftBtn").css("color","gray"); $(".rightBtn").css("color","white"); }else{ $(".leftBtn").css("color","white"); $(".rightBtn").css("color","white"); } }else{ j=0; } }); }); </script> </body> </html>