Главная » Шпаргалка » PHP MYSQL javascript » jQuery » Классный слайдер на jQuery

Классный слайдер на jQuery

http://www.ruseller.com/lessons/les273/example/index.html#4

Здравствуйте. В этом уроке мы займемся созданием оригинального слайдера с помощью плагина на jQuery - Coda-Slider. Ниже вы можете просмотреть демонстрацию получившегося у меня слайдера и скачать исходные файлы урока:
    

Шаг 1. HTML-каркас слайдера.

Для начала мы должны составить html-каркас нашему будущему слайдеру. Она обязательно должна состоять из всех основных пунктов, которые у нас будут присутствовать. Ниже я привожу код такого каркаса:

HTML:


<div class="slider-wrap">    <div id="slider1" class="csw">        
<div class="panelContainer">                
<div class="panel" title="Первая панель">                
<div class="wrapper">                    
<h3>Первая панель</h3>                    
<p>Здесь будет текст Вашей первой панели.</p>                                        
<p><a href="#5" class="cross-link" title="К пятой панели">« Предыдущая</a> | <a href="#2" class="cross-link" title="Ко второй панели">Следующая »</a></p>
</div>            
</div>            
<div class="panel" title="Вторая панель">                
<div class="wrapper">                    
<h3>Вторая панель</h3>                    
<p>Здесь будет текст Вашей второй панели.</p>                    
<p><a href="#1" class="cross-link" title="К первой панели">« Предыдущая</a> | <a href="#3" class="cross-link" title="К третьей панели">Следующая »</a></p>                
</div>            
</div>                    
<div class="panel" title="Третья панель">                
<div class="wrapper">                    
<h3>Третья панель</h3>                    
<p>Здесь будет текст Вашей третьей панели.</p>                    
<p><a href="#2" class="cross-link" title="Ко второй панели">« Предыдущая</a> | <a href="#4" class="cross-link" title="К четвертой панели">Следующая »</a></p>                
</div>            
</div>            
<div class="panel" title="Четвертая панель">                
<div class="wrapper">                    
<h3>Четвертая панель</h3>                    
<p>Здесь будет текст Вашей четвертой панели.</p>                    
<p><a href="#3" class="cross-link" title="К третьей панели">« Предыдущая</a> | <a href="#5" class="cross-link" title="К пятой панели">Следующая »</a></p>                
</div>            
</div>            
<div class="panel" title="Пятая панель">                
<div class="wrapper">                    
<h3>Пятая панель</h3>                    
<p>Здесь будет текст Вашей пятой панели.</p>                    
<p><a href="#4" class="cross-link" title="К четвертой панели">« Предыдущая</a> | <a href="#1" class="cross-link" title="К первой панели">Следующая »</a></p>                
</div>            
</div>                    
</div>    
</div>
</div>

Шаг 2. Дизайн слайдера

Теперь, как и полагается, мы должны преобразить наш слайдер, т. е. немного его улучшить со стороны дизайна. Все те стили, которые мы применяли выше, в html-коде, на всех элементах нашего слайдера теперь мы просто их вставим между тегами <head> и </head> Ниже я привожу весь список этих стилей:

CSS:



<style type="text/css">
    
  * { margin: 0; padding: 0
}  
  p { text-align: left; margin: 15px 0
}
  p, ul { font-size: 13px; line-height: 1.4em
}
  p a, li a { color: #39c; text-decoration: none
}
  p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100%
}
  p#cross-links { text-align: center
}
  p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px
}
  a:focus { outline:none
}
  img { border: 0
}
  h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
  body {
  font-family: Verdana, Arial;
  background: #ebebeb url("images/body-bg.png") repeat-y center;
  color: #000;
  width: 800px;
  margin: auto;
  text-align: center;
  padding-bottom: 20px;
  }
  .stripViewer .panelContainer .panel ul {
  text-align: left;
  margin: 0 15px 0 30px;
  }
  .slider-wrap {
  margin: 20px 0;
  position: relative;
  width: 100%;
  }
  .csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
  .csw .loading {margin: 200px 0 300px 0; text-align: center}
 .stripViewer {
  position: relative;
  overflow: hidden;
  border: 5px solid #000;
  margin: auto;
  width: 700px;
  height: 460px;
  clear: both;
  background: #fff;
  }
  .stripViewer .panelContainer {
  position: relative;
  left: 0; top: 0;
  width: 100%;
  list-style-type: none;
  }
  .stripViewer .panelContainer .panel {
  float:left;
  height: 100%;
  position: relative;
  width: 700px;
  }
  .stripViewer .panelContainer .panel .wrapper {
  padding: 10px;
  }
  .stripNav {
  margin: auto;
  }
  .stripNav ul {
  list-style: none;
  }
  .stripNav ul li {
  float: left;
  margin-right: 2px;
  }
  .stripNav a {
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  background: #c6e3ff;
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 0 15px;
  }
  .stripNav li.tab1 a { background: #60f }
  .stripNav li.tab2 a { background: #60c }
  .stripNav li.tab3 a { background: #63f }
  .stripNav li.tab4 a { background: #63c }
  .stripNav li.tab5 a { background: #00e }
  .stripNav li a:hover {
  background: #333;
  }
  .stripNav li a.current {
  background: #000;
  color: #fff;
  }
  .stripNavL, .stripNavR {
  position: absolute;
  top: 230px;
  text-indent: -9000em;
  }
  .stripNavL a, .stripNavR a {
  display: block;
  height: 40px;
  width: 40px;
  }
  .stripNavL {
  left: 0;
  }
  .stripNavR {
  right: 0;
  }
  .stripNavL {
  background: url("images/arrow-left.gif") no-repeat center;
  }
  .stripNavR {
  background: url("images/arrow-right.gif") no-repeat center;
  }
</style>

Шаг 3. "Прикрутка" основного фреймворка jQuery

Конечно же, как и в любом уроке по jQuery, мы не обойдемся без основного фреймворка. Этот файл я выложил также в исходниках в папку js. "Прикручивать" его к нашему документу со слайдером будем следующим образом между тегами <head> и </head>:


<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>

Шаг 4. "Прикрутка" всех нужных JavaScript'ов

На данном этапе работа нам понадобится не один и не два, а целых три JavaScript 'a, Ниже я перечисляю название каждого из них и его свойства:

    * query-easing.1.2.pack.js - отвечает за плавное передвижение содержимого вкладок при нажатии на любую из них;
    * jquery-easing-compatibility.1.2.pack.js - имеет те же функции, что и предыдущий JavaScript, однако вместе они дают более четкий и красивый эффект;
    * coda-slider.1.1.1.pack.js - основной JavaScript этого слайдера, именно он правильно рассортировует вкладки в правильном порядке.

Все эти JavaScript'ы находятся в исходниках, которые я выложил выше, а конкретнее в папке js. Теперь нам всего лишь навсего остается прикрутить данные JavaScript'ы. Делаем это следующим образом, вставляя нижеприведенный код между тегами <head> и </head>:


    <script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
    <script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
    <script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>