Красивый слайдер с превью-переключателями
Реализация качественного слайдера изображений в стиле Apple с превью-преключателями.
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="gallery"> <div id="slides"> <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div> </div> <div id="menu"> <ul> <li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li> </ul> </div> |
2. Добавим стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
#gallery{ /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; /* The width of the gallery */ width:920px; overflow:hidden; } #slides{ /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; } .slide{ float:left; } #menu{ /* This is the container for the thumbnails */ height:45px; } ul{ margin:0px; padding:0px; } li{ /* Every thumbnail is a li element */ width:60px; display:inline-block; list-style:none; height:45px; overflow:hidden; } li.inact:hover{ /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; } li.act,li.act:hover{ /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; } li.act a{ cursor:default; } .fbar{ /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; } li a{ display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; } a img{ border:none; } /* The styles below are only necessary for the demo page */ h1{ font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:36px; font-weight:normal; margin-bottom:15px; } h2{ font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:12px; font-weight:normal; position:absolute; right:0; text-transform:uppercase; top:15px; } #main{ /* The main container */ margin:15px auto; text-align:center; width:920px; position:relative; } a, a:visited { color:#0196e3; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } |
3. Ну и последнее, подключаем javascript и библиотеку jQuery (В шапку сайта)
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> |
Готово.
