<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #out{ height: 400px; width: 400px; } #bigimg{ height: 300px; width: 300px; background-image: url(t1.jpg); background-size: cover; } .b{ height: 80px; width: 390px; margin-top: 10px; } .small{ height: 80px; width: 80px; float: left; background-size: cover; margin-left: 5px; } </style> <script> function first(){ document.getElementById('bigimg').style.backgroundImage='url(t1.jpg)'; } function second(){ document.getElementById('bigimg').style.backgroundImage='url(t2.jpg)'; } function third(){ document.getElementById('bigimg').style.backgroundImage='url(t3.jpg)'; } function forth(){ document.getElementById('bigimg').style.backgroundImage='url(t4.jpg)'; } </script> </head> <body> <div id="out"> <div id="bigimg"></div> <div class="b"> <div class="small" style="background-image: url(t1.jpg)" οnclick="first()"></div> <div class="small" style="background-image: url(t2.jpg)" οnclick="second()"></div> <div class="small" style="background-image: url(t3.jpg)" οnclick="third()"></div> <div class="small" style="background-image: url(t4.jpg)" οnclick="forth()"></div> </div> </div> </body> </html>
效果如下: