Comment utiliser CSS pour créer un carrousel d'images dans DW-tutoriel CSS-php.cn

Comment utiliser CSS pour créer un carrousel d'images dans DW

anonymity

Libérer： 2019-05-28 14:58:07

original

18592 Les gens l'ont consulté

Adobe Dreamweaver, appelé « DW », le nom chinois est « Dream Weaver », a été initialement développé par la société américaine MACROMEDIA et a été acquis par Adobe en 2005. DW est un éditeur de code Web WYSIWYG qui intègre la production de pages Web et la gestion de sites Web. Grâce à la prise en charge de HTML, CSS, JavaScript et bien plus encore, les concepteurs et les programmeurs peuvent rapidement créer et créer des sites Web pratiquement n'importe où.

Adobe Dreamweaver utilise une interface WYSIWYG et dispose également d'une fonction d'édition HTML (une application sous le Standard Universal Markup Language). À l'aide d'un moteur de codage intelligent simplifié, vous pouvez facilement créer, coder et gérer des sites Web dynamiques. . Accédez à des astuces sur le code pour en savoir plus rapidement sur HTML, CSS et d'autres normes Web. [2] Utilisez des aides visuelles pour réduire les erreurs et accélérer le développement de sites Web.

Comment utiliser CSS pour créer un carrousel d'images dans DW

Ce code HTML est très simple, il suffit de configurer deux divs, un pour placer l'image et un pour définir l'icône 12345 ci-dessous. Lorsque vous cliquez sur 1~5, il est activé. sera lié à l'image correspondante, et l'effet de commutation de l'image est finalement défini par les attributs de #imagesimg et #images img:target.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>How to Create An Image Slider With Pure CSS3</title>
<link href="images.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>CSS3 Image Slider</h1>
    <div id="images">
        <img id="image1" src="./images/1.jpg" />
        <img id="image2" src="./images/2.jpg" />
        <img id="image3" src="./images/3.jpg" />
            <img id="image4" src="./images/4.jpg" />
            <img id="image5" src="./images/5.JPG" />
    </div>
    <div id="slider">
        <a href="#image1">1</a>
        <a href="#image2">2</a>
            <a href="#image3">3</a>
            <a href="#image4">4</a>
            <a href="#image5">5</a>
    </div>
</body>
</html>

Copier après la connexion

CSS

@CHARSET "UTF-8";
body {
    background-image:url("./images/sdl (31).png");
    background-attachment: fixed;
}
h1 {
    font: bold 35px/60px Helvetica, Arial, Sans-serif;
    text-align: center; color: #eee;
    text-shadow: 0px 2px 6px #333;
}
#images {
    width: 400px;
    height: 600px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 1;
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
}
#slider {
    width: 150px;
    height: 30px;
    margin: 20px auto;
}
#slider a {
    text-decoration: none;
    background: #45b97c;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
    margin: 20px auto;
}
#slider a:hover {
    background: #C6E4F2;
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!