Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Javascript Slide Example</title>
- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
- <style type='text/css'>
- body {
- margin:0;
- }
- #slidebox {
- position:relative;
- width:300px;
- height:200px;
- overflow:hidden;
- white-space:nowrap;
- border:1px solid #000;
- }
- #slidebox ul#slider {
- list-style:none;
- margin:0;
- padding:0;
- }
- #slidebox ul li {
- position:absolute;
- width:300px;
- height:300px;
- }
- #slidebox ul li img {
- width:300px;
- height:200px;
- }
- #snavi {
- width:300px;
- height:20px;
- line-height:20px;
- text-align:center;
- }
- #imgtitle {
- width:300px;
- height:30px;
- line-height:30px;
- white-space:nowrap;
- font-size:1.5em;
- color:#000;
- background-color:#fff;
- opacity:0.7;
- position:absolute;
- left:0;
- top:170px;
- z-index:100;
- text-align:center;
- }
- </style>
- <body>
- <div id="slidebox">
- <ul id="slider">
- <li title="this is image 1"><img src="http://lorempixel.com/300/200/sports" /></li>
- <li title="this is image 2"><img src="http://lorempixel.com/300/200/animals" /></li>
- <li title="this is image 3"><img src="http://lorempixel.com/300/200/food" /></li>
- <li title="this is image 4"><img src="http://lorempixel.com/300/200/business" /></li>
- <li title="this is image 5"><img src="http://lorempixel.com/300/200/city" /></li>
- <li title="this is image 6"><img src="http://lorempixel.com/300/200/fashion" /></li>
- </ul>
- <div id="imgtitle"></div>
- </div>
- <div id="snavi"></div>
- <script type='text/javascript'>
- var x = 300;
- var slideArray = $("#slider li") ;
- var slideMax = slideArray.length - 1;
- var currSlideNo = 0;
- $("#slider li").css("left", -x);
- $(slideArray[currSlideNo]).css("left", 0);
- for( var i = 0; i <= slideMax; i++ ) {
- var addhtml = " <a href='" + i + "'>O</a> ";
- $("#snavi").append( addhtml );
- }
- $("#snavi a").css({color:"#000",textDecoration:"none"});
- var linkArray = $("#snavi a");
- $(linkArray[0]).css({color:"#f00"});
- var changeSlide = function(){
- nextSlideNo = currSlideNo + 1;
- if (nextSlideNo > slideMax) nextSlideNo = 0;
- $(slideArray[currSlideNo]).css("left",0);
- $(slideArray[nextSlideNo]).css("left",-x);
- $(slideArray[currSlideNo]).animate({left: x});
- $(slideArray[nextSlideNo]).animate({left: 0});
- var title = $(slideArray[nextSlideNo]).attr("title");
- $("#imgtitle").html(title);
- currSlideNo = currSlideNo + 1;
- if (currSlideNo > slideMax) currSlideNo = 0;
- $("#snavi a").css({color:"#000"});
- $(linkArray[currSlideNo]).css({color:"#f00"});
- }
- var timer = setInterval(changeSlide,2000);
- $("#snavi a").click(function(event){
- event.preventDefault();
- var no = $(this).attr("href");
- currSlideNo = parseInt(no);
- $("#slider li").css("left",-x);
- $(slideArray[currSlideNo]).css("left",0);
- clearInterval(timer);
- timer = setInterval(changeSlide,2000);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement