Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>HTML5</title>
- <style>
- body { margin:0; }
- .wrap {
- width:1000px;
- margin:0 auto;
- }
- header {
- width:100%;
- height:300px;
- background-image:url(images/main.jpg);
- background-position: center;
- }
- nav {
- width:100%;
- height: 50px;
- background-color:rgb(0,0,0);
- }
- nav a {
- padding:0 10px;
- height:50px;
- color:white;
- font-size: 1.7em;
- line-height:50px;
- display:inline-block;
- text-decoration:none;
- }
- nav a:hover {
- background-color:#f00;
- }
- section, aside { float:left; min-height:400px; }
- section { width:640px; }
- aside { width:360px; }
- footer {
- clear:both;
- width:100%;
- height: 50px;
- line-height: 50px;
- color: white;
- text-align: center;
- background-color:#000;
- }
- .slide {
- position:relative;
- width:640px;
- height:480px;
- /* overflow:hidden; */
- }
- .slide > img {
- position: absolute;
- width: 640px;
- height: 480px;
- left: 0;
- top: 0;
- opacity: 0;
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <header></header>
- <nav>
- <a href="#">HOME</a>
- <a href="#">JavaScript</a>
- <a href="#">CSS</a>
- <a href="#">PHP&MySql</a>
- </nav>
- <div class="main">
- <section>
- <article class="slide">
- <img src="images/1.jpg">
- <img src="images/2.jpg">
- <img src="images/3.jpg">
- <img src="images/4.jpg">
- <img src="images/5.jpg">
- </article>
- </section>
- <aside>
- </aside>
- </div>
- <footer>©2015 유승열 All Rights Reserved</footer>
- </div>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
- <script>
- var sno = 0;
- var slides = $(".slide > img");
- var max = slides.length - 1;
- $( slides[sno] ).css("opacity",1);
- $(".slide").click(function(){
- $( slides[sno] ).animate({"opacity":0},2000);
- sno = sno + 1; //sno++
- if( sno > max ) sno = 0;
- $( slides[sno] ).animate({"opacity":1},2000);
- });
- var timer = setInterval(function(){ $(".slide").click(); },2000);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement