Home > Article > Web Front-end > css to achieve image switching effect
This article mainly introduces the effect of css to achieve image switching. It does not require css and the code is relatively streamlined. It is recommended to use it. Pay attention to the compatibility of multiple browsers.
The code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纯css图切换 练习 教程来自snwebsite</title> <style type="text/css"> a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidden; } </style> <script language="JavaScript" type="text/javascript"> </script> </head> <body> <dl> <dt><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></dt> <dd> <img src="http://files.jb51.net/upload/20080926074249449.jpg" id="a" /> <img src="http://files.jb51.net/upload/20080926074251309.jpg" id="b" /> <img src="http://files.jb51.net/upload/20080926074251902.jpg" id="c" /> </dd> </dl> </body> </html>
Related recommendations:
jquery makes thumbnail associated image switching function
jquery mouse wheel to implement image switching
Use JS to implement mouse wheel binding page image switching
The above is the detailed content of css to achieve image switching effect. For more information, please follow other related articles on the PHP Chinese website!