一、效果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"}); }); } /*定时器*/ setInterval(run,2000); }); </script> </body> </html>