How to use css to make image carousel in dw-CSS Tutorial-php.cn

How to use css to make image carousel in dw

anonymity

Release： 2019-05-28 14:58:07

Original

18609 people have browsed it

Adobe Dreamweaver, referred to as "DW", the Chinese name is "Dream Weaver", was originally developed by the American MACROMEDIA company and was acquired by Adobe in 2005. DW is a WYSIWYG web code editor that integrates web page production and website management. With support for HTML, CSS, JavaScript and more, designers and programmers can quickly create and build websites virtually anywhere.

Adobe Dreamweaver uses a WYSIWYG interface and also has HTML (an application under the Standard Universal Markup Language) editing function. With the help of a simplified intelligent coding engine, it is easy to create, code and manage dynamic websites. . Access code tips to quickly learn about HTML, CSS, and other web standards. [2] Use visual aids to reduce errors and speed up website development.

How to use css to make image carousel in dw

This html is very simple, just set up two divs, one to place the img, and one to set the 12345 icon below. When 1~5 is clicked, it will link to the corresponding The picture, and the switching effect of the picture is ultimately set by the attributes of #imagesimg and #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>

Copy after login

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;
}

Copy after login

The above is the detailed content of How to use css to make image carousel in dw. For more information, please follow other related articles on the PHP Chinese website!