Слайдер для сайта с уникальным эффектом
 | |
| Простой слайдер с уникальным на нем эффектом появление изображение, который прост в установке и появляется в оригинальном по дизайн окне. Когда будет перелистывать картинки, то красивый эффект произойдет. А это сворачивание одного изображение и потом разворачивание следующего. Сделан по стилистике красиво и имеет тени, что можно сказать, он строился под светлый сайт или фон. У него некоторые углы сильно закругленные с одной стороны, вот с другой также повторяется, но только уже с углами. Но здесь идут с ним стили, что каждый веб мастер может в этом плане редактировать как ему нужно. Плюс к тому, что они еще все подписаны, это какой класс или стиль за те или иные функции будет отвечать и здесь редактировать будет проще. Что по тематическому направлению, то точно нельзя сказать куда этот слайдер может подойти. Если брать его по умолчанию, то здесь можно поставить на тему кухня или продажа на интернет магазины. Идет с ним код и в нем прописан скрипт, то что будет выводить. Но также по центру в самом вверх будет светло прозрачное окно и в нем будет прописано название. Что каждая картинка еще и под ссылкой, что по клику пользователь или гость будет переходить по той ссылке, которую вы пропишите в слайдере в основном скрипте. Здесь установлено 3 материала и значит два изображения на его. Вы просто копируете и ставите ниже, чтоб было больше. Также потом аналогично нужно проделать под название и под ссылку. И только после этого вы прибавите переходы и сам материал, что можно сделать несколько десятков. Но думаю это слишком много будет и здесь в самый раз подойдет от 5 до 7, но каждому виднее. Это 2 изображение, которые будут представлены в DEMO, что одно будет суживаться и сразу появляется следующее. 1)  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]="/Aben/ABGEA/S3yumP7p.png" imgurl[1]="/Aben/ABGEA/ERGAtxCp.png" Ставим по нумерация название, что будет вверх отображаться в своем окне. message[0]="ZORNET.RU" message[1]="САЙТ ZORNET" Но а это ссылки, как видим также под номерами, что если добавляем картинки, то уже будет №2, хотя по сути третья, чтоб не путаться. thislink[0]="http://zornet.ru" thislink[1]="http://zornet.ru" Давайте посмотрим как работает этот слайдер, что под него демонстрация была создана. PS - здесь не чего не нужно загружать файловый менеджер, все сделано на стилях. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
