Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>슬라이드</title>
- <script src="js/jquery-1.11.3.js"></script>
- <style>
- #slider {
- width: 500px;
- height: 300px;
- border: 1px solid #000;
- overflow: hidden;
- }
- #slider img {
- display: none;
- }
- </style>
- </head>
- <body>
- <div id="slider" onclick="slide(1);">
- <img id="p1" src="images/food.jpg" width="500" height="300" alt="food">
- <img id="p2" src="images/sports.jpg" width="500" height="300" alt="sports">
- <img id="p3" src="images/nature.jpg" width="500" height="300" alt="nature">
- <img id="p4" src="images/fashion.jpg" width="500" height="300" alt="fashion">
- <img id="p5" src="images/transport.jpg" width="500" height="300" alt="transport">
- </div>
- <button onclick="slide(-1);">이전</button>
- <span id="cno">1</span>
- <button onclick="slide(1);">다음</button>
- <button onclick="auto();">자동슬라이드 시작/중지</button>
- <script>
- $("#p1").show();
- var sno = 1;
- var max = 5;
- function slide(n){
- sno = sno + n; // = sno++
- if( sno > max ) sno = 1;
- if( sno < 1 ) sno = max;
- $("#cno").html(sno);
- for( var i=1; i<=max; i++){
- if( i == sno ) $("#p" + i).show(); else $("#p" + i).hide();
- }
- }
- var timer = null;
- function auto(){
- if( timer == null ) {
- timer = setInterval( function(){ slide(1); }, 1000 );
- } else {
- clearInterval(timer);
- timer = null;
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement