Вопрос по скрипту

58

sertu

16 января 2011, 13:34

650

День дбрый уважаемые веб-мастера.Собственно вопрос имеем вот такой скрипт от juqery Живой пример ТУТ смена банера или картинки


<script type="text/javascript">



function theRotator() {

	//Set the opacity of all images to 0

	$('div#rotator ul li').css({opacity: 0.0});

	

	//Get the first image and display it (gets set to full opacity)

	$('div#rotator ul li:first').css({opacity: 1.0});

		

	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

	setInterval('rotate()',3000);

	

}



function rotate() {	

	//Get the first image

	var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));



	//Get next image, when it reaches the end, rotate it back to the first image

	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));	

	

	//Set the fade in effect for the next image, the show class has higher z-index

	next.css({opacity: 0.0})

	.addClass('show')

	.animate({opacity: 1.0}, 1000);



	//Hide the current image

	current.animate({opacity: 0.0}, 1000)

	.removeClass('show');

	

};



$(document).ready(function() {		

	//Load the slideshow

	theRotator();

});

</script>

на странице отображается так

div id="rotator">

  <ul>

    <li class="show"><a href="http://www.alohatechsupport.net/webdesignmaui/"><img src="rrr_files/image-10.jpg" width="500" height="313"  alt="pic1" /></a></li>

    <li><a href="http://www.alohatechsupport.net/"><img src="rrr_files/image-20.jpg" width="500" height="313"  alt="pic2" /></a></li>

    <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="rrr_files/image-30.jpg" width="500" height="313"  alt="pic3" /></a></li>

    <li><a href="http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html"><img src="rrr_files/image-40.jpg" width="500" height="313"  alt="pic4" /></a></li>

  </ul>

</div>

Вопрос как сделать несколько ротаций баннеров или картинок в разных местах сайта. Если геморойно сделать ,то сколько ето будет платно сделать?

Адаптивные сайты на ModxRevo

54

n0name

16 января 2011, 13:45

#1

sertu:

на странице отображается так

<div id="rotator">

  <ul>

    <li class="show"><a href="http://www.alohatechsupport.net/webdesignmaui/"><img src="rrr_files/image-10.jpg" width="500" height="313"  alt="pic1" /></a></li>

    <li><a href="http://www.alohatechsupport.net/"><img src="rrr_files/image-20.jpg" width="500" height="313"  alt="pic2" /></a></li>

    <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="rrr_files/image-30.jpg" width="500" height="313"  alt="pic3" /></a></li>

    <li><a href="http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html"><img src="rrr_files/image-40.jpg" width="500" height="313"  alt="pic4" /></a></li>

  </ul>

</div>

Продублировать в нужных местах этот код. В каждом блоке можно поставить свои картинки.

Сервис сравнения цена на VPS (http://vpska.com/)

58

sertu

16 января 2011, 13:48

#2

n0name:
Продублировать в нужных местах этот код. В каждом блоке можно поставить свои картинки.

Как то странно выводит он тогда.Хрень какая то получается

54

n0name

16 января 2011, 13:53

#3

sertu:
Как то странно выводит он тогда.Хрень какая то получается

Да, вы правы. Через некоторое время стопорится на одной картинке. Сейчас поправим.

Новый CSS

<style type="text/css">

/* rotator in-page placement */

    .rotator {

	position:relative;

	height:345px;

	margin-left: 15px;

}

/* rotator css */

	.rotator ul li {

	float:left;

	position:absolute;

	list-style: none;

}

/* rotator image style */	

	.rotator ul li img {

	border:1px solid #ccc;

	padding: 4px;

	background: #FFF;

}

    .rotator ul li.show {

	z-index:500

}

</style>

Новый JS

<script type="text/javascript">

$(document).ready(function() {		



    function rotate() {	

        $(".rotator").each(function() {

            var current = $(this).find(".show");

            current.removeClass("show");

            

	        var next = current.next().length ? current.next() : $(this).find("li:first");	

	        next.addClass("show");

            

        });

    };



    setInterval(rotate, 6000);

});

</script>

58

sertu

16 января 2011, 15:38

#4

n0name:
Да, вы правы. Через некоторое время стопорится на одной картинке. Сейчас поправим.

Новый CSS

<style type="text/css">

/* rotator in-page placement */

    .rotator {

	position:relative;

	height:345px;

	margin-left: 15px;

}

/* rotator css */

	.rotator ul li {

	float:left;

	position:absolute;

	list-style: none;

}

/* rotator image style */	

	.rotator ul li img {

	border:1px solid #ccc;

	padding: 4px;

	background: #FFF;

}

    .rotator ul li.show {

	z-index:500

}

</style>

Новый JS

<script type="text/javascript">

$(document).ready(function() {		



    function rotate() {	

        $(".rotator").each(function() {

            var current = $(this).find(".show");

            current.removeClass("show");

            

	        var next = current.next().length ? current.next() : $(this).find("li:first");	

	        next.addClass("show");

            

        });

    };



    setInterval(rotate, 6000);

});

</script>

Че то не пашет , вроде так все вставляю..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" />

<title>Easy Jquery Auto Slideshow Image Rotator</title>

<style type="text/css">

body {

	margin:0;

	padding:0;

	color: #4E3D4E;

	font: normal 0.6em sans-serif, Arial;

	background-color: #EDEDED;

	width: 100%;

}

h1 {

	padding-left: 55px;

	font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;

	text-transform:uppercase;

	letter-spacing:.0.5em;

}

a {

	outline: none;

}

</style>



<style type="text/css">

/* rotator in-page placement */

    div#rotator {

	position:relative;

	height:345px;

	margin-left: 15px;

}

/* rotator css */

	div#rotator ul li {

	float:left;

	position:absolute;

	list-style: none;

}

/* rotator image style */	

	div#rotator ul li img {

	border:1px solid #ccc;

	padding: 4px;

	background: #FFF;

}

    div#rotator ul li.show {

	z-index:500

}

</style>



<script type="text/javascript" src="rrr_files/jquery00.js"></script>

 

<script type="text/javascript">

$(document).ready(function() {		



    function rotate() {	

        $(".rotator").each(function() {

            var current = $(this).find(".show");

            current.removeClass("show");

            

	        var next = current.next().length ? current.next() : $(this).find("li:first");	

	        next.addClass("show");

            

        });

    };



    setInterval(rotate, 2000);

});

</script>



</head>

<body>



<h1>Jquery Auto Image Rotator</h1>



<div id="rotator">

  <ul>

    <li class="show"><a href="http://www.alohatechsupport.net/webdesignmaui/"><img src="rrr_files/image-10.jpg" width="500" height="313"  alt="pic1" /></a></li>

    <li><a href="http://www.alohatechsupport.net/"><img src="rrr_files/image-20.jpg" width="500" height="313"  alt="pic2" /></a></li>

    <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="rrr_files/image-30.jpg" width="500" height="313"  alt="pic3" /></a></li>

    <li><a href="http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html"><img src="rrr_files/image-40.jpg" width="500" height="313"  alt="pic4" /></a></li>

  </ul>

</div>





<div id="rotator" style="position:absolute; top:400px">

  <ul>

    <li class="show"><a href="http://www.alohatechsupport.net/webdesignmaui/"><img src="rrr_files/image-10.jpg" width="500" height="313"  alt="pic1" /></a></li>

    <li><a href="http://www.alohatechsupport.net/"><img src="rrr_files/image-20.jpg" width="500" height="313"  alt="pic2" /></a></li>

    <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="rrr_files/image-30.jpg" width="500" height="313"  alt="pic3" /></a></li>

    <li><a href="http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html"><img src="rrr_files/image-40.jpg" width="500" height="313"  alt="pic4" /></a></li>

  </ul>

</div>







</body>

</html>

54

n0name

16 января 2011, 16:00

#5

http://paste.pocoo.org/show/321600/

Там еще надо было CSS новый вставить и прописать класс у блоков с картинками.

58

sertu

16 января 2011, 16:22

#6

n0name:
http://paste.pocoo.org/show/321600/

Там еще надо было CSS новый вставить и прописать класс у блоков с картинками.

А че то теперь плавного затухания нет, я заплачу если что за ваши труды🚬

Все что нужно знать о DDоS-атаках грамотному менеджеру

VK приобрела 70% в структуре компании-разработчика red_mad_robot