*{outline: none;}
4    img {border: 0;}
5    .container {
6  width: 790px;
7  padding: 0;
8  margin: 0 auto;
9    }
10    .folio_block {
11  position: absolute;
12  left: 50%; top: 50%;
13  margin: -140px 0 0 -395px;
14    }
15
16    / *-- Главная контейнеров - * /
17    .main_view {
18  float: left;
19  position: relative;
20    }
21  / *-- Window / Маскировка стили - * /
22    .window {
23  height:286px; width: 790px;
24  overflow: hidden; / *-- скрывает ничего вне множества width/height-- * /
25  position: relative;
26    }
27    .image_reel {
28  position: absolute;
29  top: 0; left: 0;
30    }
31    .image_reel img {float: left;}
32
33    / *-- Стили Пейджинг - * /
34    .paging {
35  position: absolute;
36  bottom: 40px; right: -7px;
37  width: 178px; height:47px;
38  z-index: 100; / *-- Обеспечивает подкачки остается в верхнем слое - * /
39  text-align: center;
40  line-height: 40px;
41  background: url(/slider/paging_bg2.png) no-repeat;
42  display: none; / *-- скрыты по умолчанию, будет показано позднее с JQuery - *
43    }
44    .paging a {
45  padding: 5px;
46  text-decoration: none;
47  color: #fff;
48    }
49    .paging a.active {
50  font-weight: bold;
51  background: #920000;
52  border: 1px solid #610000;
53  -moz-border-radius: 3px;
54  -khtml-border-radius: 3px;
55  -webkit-border-radius: 3px;
56    }
57    .paging a:hover {font-weight: bold;}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
3    <script type="text/javascript">
4
5    $(document).ready(function() {
6
7  //Set Default State of each portfolio piece
8  $(".paging").show();
9  $(".paging a:first").addClass("active");
10
11  //Get size of images, how many there are, then determin the size of the image reel.
12  var imageWidth = $(".window").width();
13  var imageSum = $(".image_reel img").size();
14  var imageReelWidth = imageWidth * imageSum;
15
16  //Adjust the image reel to its new size
17  $(".image_reel").css({'width' : imageReelWidth});
18
19  //Paging + Slider Function
20  rotate = function(){
21  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
22  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
23
24  $(".paging a").removeClass('active'); //Remove all active class
25  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
26
27  //Slider Animation
28  $(".image_reel").animate({
29  left: -image_reelPosition
30  }, 500 );
31
32  };
33
34  //Rotation + Timing Event
35  rotateSwitch = function(){
36  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
37  $active = $('.paging a.active').next();
38  if ( $active.length === 0) { //If paging reaches the end...
39  $active = $('.paging a:first'); //go back to first
40  }
41  rotate(); //Trigger the paging and slider function
42  }, 7000); //Timer speed in milliseconds (3 seconds)
43  };
44
45  rotateSwitch(); //Run function on launch
46
47  //On Hover
48  $(".image_reel a").hover(function() {
49  clearInterval(play); //Stop the rotation
50  }, function() {
51  rotateSwitch(); //Resume rotation
52  });
53
54  //On Click
55  $(".paging a").click(function() {
56  $active = $(this); //Activate the clicked paging
57  //Reset Timer
58  clearInterval(play); //Stop the rotation
59  rotate(); //Trigger rotation immediately
60  rotateSwitch(); // Resume rotation
61  return false; //Prevent browser jump to link anchor
62  });
63
64    });
65    </script>

<div class="container">
3
4  <div class="folio_block">
5
6  <div class="main_view">
7
8  <div class="window">
9  <div class="image_reel">
10  <a href="ссылка"><img src="/slider/reel_1.jpg" alt="" /></a>
11  <a href="ссылка"><img src="/slider/reel_2.jpg" alt="" /></a>
12  <a href="ссылка"><img src="/slider/reel_3.jpg" alt="" /></a>
13  <a href="ссылка"><img src="/slider/reel_4.jpg" alt="" /></a>
14  </div>
15  </div>
16  <div class="paging">
17
18  <a href="#" rel="1">1</a>
19  <a href="#" rel="2">2</a>
20  <a href="#" rel="3">3</a>
21  <a href="#" rel="4">4</a>
22  </div>
23  </div>
24
25  </div>
26
27    </div>