Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 06.05.2010, 11:38   #1
oregano
Новичок
Джуниор
 
Регистрация: 06.05.2010
Сообщений: 1
По умолчанию Не показывается слайдер в IE6

Суть проблемы в том, что есть слайдер из последовательно сменяющихся кадров, который во всех кроме 6 осла показывается нормально. Бьюсь уже третий день, но так и не пойму в чём трабла При абсолютном позиционировании всё гуд, а при онтосительном осёл упрямится.

Код:
/* Стили слайдера */
*{outline:none;}
img {border:0;}
.container {width:500px; padding:0; margin:0;}
.folio_block {position:relative; margin:0;}
.main_view {float:left;	position:relative;}
.window {width:500px; height:200px; overflow:hidden; position:relative;}
.image_reel {position:relative;}
.image_reel img {float:left;}

.paging {position:absolute;	bottom:-15px; right:-4px; width:350px; height:47px;	z-index:100; text-align:left; text-indent:24px;	padding-top:8px; padding-left:5px; background:url(paging_bg2.png) no-repeat; display:none;}
.paging a {padding-top:16px; background:#fff; text-decoration:none;	border:1px solid #ccc;  /* Для хороших браузеров */
  -moz-border-radius:5px; /* Firefox */
  -webkit-border-radius:5px; /* Safari, Chrome */
  -khtml-border-radius:5px; /* KHTML */
  border-radius:5px; /* CSS3 */
Код HTML:
<div class="container">
    <div class="folio_block">
        <div class="main_view">
            <div class="window">	
                <div class="image_reel">
                    <a href="#"><img src="images/slider/01.jpg" /></a><a href="#"><img src="images/slider/02.jpg" /></a><a href="#"><img src="images/slider/03.jpg" /></a><a href="#"><img src="images/slider/04.jpg" /></a><a href="#"><img src="images/slider/05.jpg" /></a><a href="#"><img src="images/slider/06.jpg" /></a><a href="#"><img src="images/slider/07.jpg" /></a><a href="#"><img src="images/slider/08.jpg" /></a><a href="#"><img src="images/slider/09.jpg" /></a><a href="#"><img src="images/slider/10.jpg" /></a>
				</div>
            </div>
            <div class="paging">
                <a href="#" rel="1"><img src="images/slider/01.gif" alt="" /></a><a href="#" rel="2"><img src="images/slider/02.gif" alt="" /></a><a href="#" rel="3"><img src="images/slider/03.gif" alt="" /></a><a href="#" rel="4"><img src="images/slider/04.gif" alt="" /></a><a href="#" rel="5"><img src="images/slider/05.gif" alt="" /></a><a href="#" rel="6"><img src="images/slider/06.gif" alt="" /></a><a href="#" rel="7"><img src="images/slider/07.gif" alt="" /></a><a href="#" rel="8"><img src="images/slider/08.gif" alt="" /></a><a href="#" rel="9"><img src="images/slider/09.gif" alt="" /></a><a href="#" rel="10"><img src="images/slider/10.gif" alt="" /></a>
			</div>
        </div>
    </div>	
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});
</script>
oregano вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сайт не показывается в IE HereComesTheRain Помощь студентам 0 30.04.2010 18:14
Новый слайдер на ваш сайт 13th Обсуждение статей 5 09.03.2010 21:57
ГЛЮК В ie6 sdm98 HTML и CSS 2 23.10.2009 03:02
сайт сделан в CSS, почему в експлолере он у меня глючит, а в мозиле все показывается как я сделал? -=Ламер=- HTML и CSS 16 11.09.2008 18:12