css to achieve image switching effect-CSS Tutorial-php.cn

css to achieve image switching effect

墨辰丷

Release： 2018-05-09 17:10:50

Original

8114 people have browsed it

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>

Copy after login

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!