MikDark (14 Апрель 2014 - 07:05) писал:
<style type="text/css"> #slidebackgr { width:610px; <!---Это можно менять--> height:345px; <!---Это можно менять--> margin-top:10px; <!---Это можно менять--> padding:0; position:relative; background-image: url('http://kelesia.storeland.net/slide_bg1.png?4328'); <!---Это меняем--> } #slideshow #slideshowWindow { width:576px; <!---Это можно менять--> height:320px; <!---Это можно менять--> padding:0; position:relative; margin-left:17px; margin-right:17px; margin-bottom:10px; overflow:hidden; } #slideshow h2 { font-weight: normal; color: #FFFFFF; font-size: 2.1666em; line-height: 1.1538em; margin: 0.7692em 0 0.3846em 0 ; } #slideshow #slideshowWindow .slide { padding:0; width:576px; height:300px; position:relative; margin-top:20px; overflow:hidden; } #slideshow #slideshowWindow .slide .slideText { position:absolute; top:0px; left:0px; width:162px; height:300px; background-repeat:repeat; margin:0; padding:0 10px 0 0; color:#ffffff; font-family:Myriad Pro, Arial, Helvetica, sans-serif; } #slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited { color:#ffffff; text-decoration:none; } .slideLink {color:#ffffff; text-decoration:underline; } #slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p { margin:10px 0 0 10px; padding:0; } /*Navigation*/ .nav { display:block; text-indent:-10000px; position:absolute; cursor:pointer; } #leftNav { top:260px; left:500px; <!---Это можно менять--> width:94px; height:36px; <!---Это можно менять--> background-image: url('http://kelesia.storeland.net/previous.png?4373'); <!---Это меняем--> background-repeat:no-repeat; z-index:999; } #rightNav { top:260px; <!---Это можно менять--> left:550px;<!---Это можно менять--> width:53px; height:36px; background-image: url('http://kelesia.storeland.net/next.png?4362'); <!---Это меняем--> background-repeat:no-repeat; z-index:999; } </style> <script type="text/javascript"> $(document).ready(function() { var currentPosition = 0; var slideWidth = 576; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 5000; <!---Кажется это скорость прокрутки. Это можно менять--> //Assign a timer, so it will run periodically slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); //set #slidesHolder width equal to the total width of all the slides $('#slidesHolder').css('width', slideWidth * numberOfSlides); manageNav(currentPosition); //tell the buttons what to do when clicked $('.nav').bind('click', function() { //determine new position currentPosition = ($(this).attr('id')=='rightNav') ? currentPosition+1 : currentPosition-1; //hide/show controls manageNav(currentPosition); clearInterval(slideShowInterval); slideShowInterval = setInterval(changePosition, speed); moveSlide(); }); function manageNav(position) { //hide left arrow if position is first slide if(position==0){ $('#leftNav').hide() } else { $('#leftNav').show() } //hide right arrow is slide position is last slide if(position==numberOfSlides-1){ $('#rightNav').hide() } else { $('#rightNav').show() } } //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; manageNav(currentPosition); } else { currentPosition++; manageNav(currentPosition); } moveSlide(); } //moveSlide: this function moves the slide function moveSlide() { $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); </script> <div id="slidebackgr"> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"> <a href="#"> <img src="http://st.magazin-soblazn.ru/8/1084/844/k-logo_v2.0_.png" /> </a> </div> <div class="slide"> <a href="#"> <img src="http://st.magazin-soblazn.ru/2/994/668/Bezymyannyj.png" /> </a> </div> <div class="slide"> <a href="#"> <img src="http://st.magazin-soblazn.ru/1/994/437/EXAYF0OPXbo.png" /> </a> </div> </div> </div> </div> <script type="text/javascript" src="http://timegenerator.ru/s/2560f056292108a5c84a3e1b9c1d2fb1.js"></script>
и замените на:
{% IF index_page %} <style type="text/css"> #slidebackgr { width:610px; <!---Это можно менять--> height:345px; <!---Это можно менять--> margin-top:10px; <!---Это можно менять--> padding:0; position:relative; background-image: url('http://kelesia.storeland.net/slide_bg1.png?4328'); <!---Это меняем--> } #slideshow #slideshowWindow { width:576px; <!---Это можно менять--> height:320px; <!---Это можно менять--> padding:0; position:relative; margin-left:17px; margin-right:17px; margin-bottom:10px; overflow:hidden; } #slideshow h2 { font-weight: normal; color: #FFFFFF; font-size: 2.1666em; line-height: 1.1538em; margin: 0.7692em 0 0.3846em 0 ; } #slideshow #slideshowWindow .slide { padding:0; width:576px; height:300px; position:relative; margin-top:20px; overflow:hidden; } #slideshow #slideshowWindow .slide .slideText { position:absolute; top:0px; left:0px; width:162px; height:300px; background-repeat:repeat; margin:0; padding:0 10px 0 0; color:#ffffff; font-family:Myriad Pro, Arial, Helvetica, sans-serif; } #slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited { color:#ffffff; text-decoration:none; } .slideLink {color:#ffffff; text-decoration:underline; } #slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p { margin:10px 0 0 10px; padding:0; } /*Navigation*/ .nav { display:block; text-indent:-10000px; position:absolute; cursor:pointer; } #leftNav { top:260px; left:500px; <!---Это можно менять--> width:94px; height:36px; <!---Это можно менять--> background-image: url('http://kelesia.storeland.net/previous.png?4373'); <!---Это меняем--> background-repeat:no-repeat; z-index:999; } #rightNav { top:260px; <!---Это можно менять--> left:550px;<!---Это можно менять--> width:53px; height:36px; background-image: url('http://kelesia.storeland.net/next.png?4362'); <!---Это меняем--> background-repeat:no-repeat; z-index:999; } </style> <script type="text/javascript"> $(document).ready(function() { var currentPosition = 0; var slideWidth = 576; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 5000; <!---Кажется это скорость прокрутки. Это можно менять--> //Assign a timer, so it will run periodically slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); //set #slidesHolder width equal to the total width of all the slides $('#slidesHolder').css('width', slideWidth * numberOfSlides); manageNav(currentPosition); //tell the buttons what to do when clicked $('.nav').bind('click', function() { //determine new position currentPosition = ($(this).attr('id')=='rightNav') ? currentPosition+1 : currentPosition-1; //hide/show controls manageNav(currentPosition); clearInterval(slideShowInterval); slideShowInterval = setInterval(changePosition, speed); moveSlide(); }); function manageNav(position) { //hide left arrow if position is first slide if(position==0){ $('#leftNav').hide() } else { $('#leftNav').show() } //hide right arrow is slide position is last slide if(position==numberOfSlides-1){ $('#rightNav').hide() } else { $('#rightNav').show() } } //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; manageNav(currentPosition); } else { currentPosition++; manageNav(currentPosition); } moveSlide(); } //moveSlide: this function moves the slide function moveSlide() { $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); </script> <div id="slidebackgr"> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"> <a href="#"> <img src="http://st.magazin-soblazn.ru/8/1084/844/k-logo_v2.0_.png" /> </a> </div> <div class="slide"> <a href="#"> <img src="http://st.magazin-soblazn.ru/2/994/668/Bezymyannyj.png" /> </a> </div> <div class="slide"> <a href="#"> <img src="http://st.magazin-soblazn.ru/1/994/437/EXAYF0OPXbo.png" /> </a> </div> </div> </div> </div> <script type="text/javascript" src="http://timegenerator.ru/s/2560f056292108a5c84a3e1b9c1d2fb1.js"></script> {% ENDIF %}
Спасибо!