» »

Слайдер для сайта с уникальным эффектом

Слайдер для сайта с уникальным эффектом

Простой слайдер с уникальным на нем эффектом появление изображение, который прост в установке и появляется в оригинальном по дизайн окне. Когда будет перелистывать картинки, то красивый эффект произойдет. А это сворачивание одного изображение и потом разворачивание следующего. Сделан по стилистике красиво и имеет тени, что можно сказать, он строился под светлый сайт или фон. У него некоторые углы сильно закругленные с одной стороны, вот с другой также повторяется, но только уже с углами. Но здесь идут с ним стили, что каждый веб мастер может в этом плане редактировать как ему нужно. Плюс к тому, что они еще все подписаны, это какой класс или стиль за те или иные функции будет отвечать и здесь редактировать будет проще.

Что по тематическому направлению, то точно нельзя сказать куда этот слайдер может подойти. Если брать его по умолчанию, то здесь можно поставить на тему кухня или продажа на интернет магазины. Идет с ним код и в нем прописан скрипт, то что будет выводить. Но также по центру в самом вверх будет светло прозрачное окно и в нем будет прописано название. Что каждая картинка еще и под ссылкой, что по клику пользователь или гость будет переходить по той ссылке, которую вы пропишите в слайдере в основном скрипте. Здесь установлено 3 материала и значит два изображения на его. Вы просто копируете и ставите ниже, чтоб было больше. Также потом аналогично нужно проделать под название и под ссылку. И только после этого вы прибавите переходы и сам материал, что можно сделать несколько десятков. Но думаю это слишком много будет и здесь в самый раз подойдет от 5 до 7, но каждому виднее.

Это 2 изображение, которые будут представлены в DEMO, что одно будет суживаться и сразу появляется следующее.

1)

Красивый слайдер для сайта uCoz

2)

Поставить слайдер на сайт

Переходим к установке:

Это стили в CSS или можно сразу под кодом, где установили заключить их в style здесь стиль /style что также будет работать.

Код
.textboxstyle {  
font-family:Arial;  
font-size:16pt;  
color:black;  
text-align:center;  
vertical-align:top;  
}  

.textboxbackgroundstyle {  
background-color:white;  
padding:5px;  

/* rounded corners for Firefox */  
-moz-border-radius-topleft: 15px;  
-moz-border-radius-bottomright: 15px;  

/* Закругленные углы для Safari и Chrome */  
-webkit-border-top-left-radius: 15px;  
-webkit-border-bottom-right-radius: 15px;  

/* Закругленные углы для Opera */  
border-top-left-radius: 15px;  
border-bottom-right-radius: 15px;  
}  

.curveandshadowstyle {  

/* Тени и закругленные углы для Firefox */  
-moz-box-shadow: 5px 5px 8px #818181;  
-moz-border-radius-topleft: 25px;  
-moz-border-radius-bottomright: 25px;  

/* Тени и закругленные углы для Safari и Chrome */  
-webkit-box-shadow: 5px 5px 8px #818181;  
-webkit-border-top-left-radius: 25px;  
-webkit-border-bottom-right-radius: 25px;  

/* Тени и закругленные углы для Opera */  
box-shadow: 5px 5px 5px #818181;  
border-top-left-radius: 25px;  
border-bottom-right-radius: 25px;  

/* Тень для Internet Explorer */  
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');  

border-style:solid;  
border-width:1px;  
border-color:white;  
}


Теперь основа кода, там где хотите видеть, в нем также выставляем размер.

Код
<div id="links" style="display:none;">  
  </div>  
<script>  
var imgurl= new Array()  
var message= new Array()  
var thislink= new Array()  

// set the url (or path) of your images. Add as many images as you like  
imgurl[0]="http://zornet.ru/Aben/ABGEA/S3yumP7p.png"  
imgurl[1]="http://zornet.ru/Aben/ABGEA/ERGAtxCp.png"  

// set the messages corresponding to the images above (no more no less than the images above)  
message[0]="ZORNET.RU"  
message[1]="САЙТ ZORNET"  

// set the links corresponding to the images above (no more no less than the images above)  
// If you dont want to add a link enter a #"instead of http://umasters.ucoz.ru, see smaple below  
thislink[0]="http://zornet.ru"  
thislink[1]="http://zornet.ru"  

// width of pictures (pixel)  
var imgwidth=530  

// width of pictures (pixel)  
var imgheight=250

// set stillstand of picture (seconds)  
var stillstand=2.5  

// set opacity-strength (transparency-effect). Values may range from 1 to 100  
var opacitystrength=60  

/////////////////////////////////////////////////  
// INTERNET PORTAL ZORNET.RU  
/////////////////////////////////////////////////  

// Не редактируйте ниже этой строки  
var tmr  
var step=10  
var i=imgwidth  
var i_imgurl=0  
stillstand*=1000  

var preloadedimages=new Array()  
for (iii=0;iii<imgurl.length;iii++){  
  preloadedimages[iii]=new Image()  
  preloadedimages[iii].src=imgurl[iii]  
}  

function shrinkpic() {  
  document.getElementById("textbox").innerHTML=""  
  if (i>0) {  
  i-=step  
  document.getElementById("picdiv").style.width=i+"px"  
  document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"  
  document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"  
  document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"  
  tmr=setTimeout("shrinkpic()",20)  
  }  
  else {  
  i_imgurl++  
  if (i_imgurl>=imgurl.length) {  
  i_imgurl=0  
  }  
  document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"  
  i=1  
  tmr=setTimeout("enlargepic()",20)  
  }  
}  

function enlargepic() {  
  if (i<=imgwidth) {  
  i+=step  
  document.getElementById("picdiv").style.width=i+"px"  
  document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"  
  document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"  
  document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"  
  tmr=setTimeout("enlargepic()",20)  
  }  
  else {  
  i=imgwidth  
  showmessage()  
  }  
}  

function showmessage() {  
  document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'  
  tmr=setTimeout("shrinkpic()",stillstand)  
}  

function gotothislink(){  
  document.location.href=thislink[i_imgurl]  

}  

document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')  
document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')  

document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')  

document.write('</div>')  

window.onload=shrinkpic  
</script>

Давайте разберем, где что нужно прописать и что отвечает за функционал.

Здесь нужно выставить изображение, желательно под один размер. Как заметили, все начинается с нуля "0" что отвечает за номер один, и идет первая по умолчанию.

imgurl[0]="http://zornet.ru/Aben/ABGEA/S3yumP7p.png"
imgurl[1]="http://zornet.ru/Aben/ABGEA/ERGAtxCp.png"

Ставим по нумерация название, что будет вверх отображаться в своем окне.

message[0]="ZORNET.RU"
message[1]="САЙТ ZORNET"

Но а это ссылки, как видим также под номерами, что если добавляем картинки, то уже будет №2, хотя по сути третья, чтоб не путаться.

thislink[0]="http://zornet.ru"
thislink[1]="http://zornet.ru"

Давайте посмотрим как работает этот слайдер, что под него демонстрация была создана.

PS - здесь не чего не нужно загружать файловый менеджер, все сделано на стилях.
04.08.2017 Просмотров: 520 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
Critic©
Critic© 06.08.2017 14:061
+1
Этот слайдер хорошо вывести на отдельную страницу и поставить на ссылку, но если делать на главную, но нужно форму менять, просто такая форма мало подойдет на многие сайты. А так вообще хорошо придумано, и не каких кнопок нет и все автоматически идет. Проверил его, что можно быстро его переделать по дизайн и убрать углы и сделать более стандартным.
Kosten
Kosten 06.08.2017 15:472
0
Он сильно отличается о стандартного слайдера, если даже можно его назвать так. Просто по своим функциям, что одно изображение исчезает и автоматом появляется второе и все на красивом эффекте.
Critic©
Critic© 10.08.2017 01:593
0
Но если на нем нет адаптивности, то и на страницу выводить нельзя или как раз можно на ее вывести, так как она не относится к шаблону или все же найти того, кто мог его под мобильные сделать.
Kosten
Kosten 10.08.2017 02:114
0
Все правильно, если на отдельную страницу сделать, то к шаблону не будет имеет не какого дела, но если шаблон адаптивный.
avatar