簡易輪播圖
阿新 • • 發佈：2018-12-05
作為以後回想的記錄，大致思路就是在一個容器裡面放置好幾張圖片，利用絕對定位讓這些圖片堆疊起來，借用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>