作为以后回想的记录,大致思路就是在一个容器里面放置好几张图片,利用绝对定位让这些图片堆叠起来,借用jq的淡出淡入效果,就完成了一个简易的轮播图。直接复制粘贴代码即可运行,图片是用的汽车之家的,如果失效,可以自己弄几张图。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .imgBox{ width:670px; height:500px; position:relative; margin:100px auto; } img{ width:670px; position:absolute; top:0; left:0; display:none; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> </head> <body> <div class="imgBox"> <img style="display:block" src="https://car3.autoimg.cn/cardfs/product/g7/M07/82/21/1024x0_1_q87_autohomecar__wKgH3VnA89SABlIPAAn_H3kNNfQ632.jpg" alt=""> <img src="https://car2.autoimg.cn/cardfs/product/g13/M0B/82/43/1024x0_1_q87_autohomecar__wKgH41nA88OAW7d_AAn50P9igu0905.jpg" alt=""> <img src="https://car3.autoimg.cn/cardfs/product/g21/M0E/56/D7/1024x0_1_q87_autohomecar__wKjBwlnA85-AYjJkAAkEnJZRfI8518.jpg" alt=""> </div> <script> $(function(){ var i=0; function lunbotu(){ $('img').eq(i%3).fadeOut(700); $('img').eq((i+1)%3).fadeIn(700); i++; } setInterval(function(){ lunbotu(); },5000) }) </script> </body> </html>