- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Для тех кто знает JS, вопрос думаю не трудный. Хотя чтобы ответить на него, надо будет потратить минут 10.
итак имеем вот такой html
и соответственно код JS
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.slider=function(){
function slide(n,p){this.n=n; this.init(p)}
slide.prototype.init=function(p){
var s=this.x=T$(p.id), u=this.u=T$$('ul',s)[0], c=this.m=T$$('li',u), l=c.length, i=this.l=this.c=0; this.b=1;
if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
this.a=p.auto||0; this.p=p.resume||0; this.r=p.rewind||0; this.e=p.elastic||false; this.v=p.vertical||0; s.style.overflow='hidden';
for(i;i<l;i++){if(c.parentNode==u){this.l++}}
if(this.v){;
u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
}else{
u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
}
this.nav(p.position||0);
if(p.position){this.pos(p.position||0,this.a?1:0,1)}else if(this.a){this.auto()}
if(p.left){this.sel(p.left)}
if(p.right){this.sel(p.right)}
},
slide.prototype.auto=function(){
this.x.ai=setInterval(new Function(this.n+'.move(1,1,1)'),this.a*1000)
},
slide.prototype.move=function(d,a){
var n=this.c+d;
if(this.r){n=d==1?n==this.l?0:n:n<0?this.l-1:n}
this.pos(n,a,1)
},
slide.prototype.pos=function(p,a,m){
var v=p; clearInterval(this.x.ai); clearInterval(this.x.si);
if(!this.r){
if(m){
if(p==-1||(p!=0&&Math.abs(p)%this.l==0)){
this.b++;
for(var i=0;i<this.l;i++){this.u.appendChild(this.m.cloneNode(1))}
this.v?this.u.style.height=(this.l*this.h*this.b)+'px':this.u.style.width=(this.l*this.w*this.b)+'px';
}
if(p==-1||(p<0&&Math.abs(p)%this.l==0)){
this.v?this.u.style.top=(this.l*this.h*-1)+'px':this.u.style.left=(this.l*this.w*-1)+'px'; v=this.l-1
}
}else if(this.c>this.l&&this.b>1){
v=(this.l*(this.b-1))+p; p=v
}
}
var t=this.v?v*this.h*-1:v*this.w*-1, d=p<this.c?-1:1; this.c=v; var n=this.c%this.l; this.nav(n);
if(this.e){t=t-(8*d)}
this.x.si=setInterval(new Function(this.n+'.slide('+t+','+d+',1,'+a+')'),10)
},
slide.prototype.nav=function(n){
if(this.g){for(var i=0;i<this.l;i++){this.g.className=i==n?this.s:''}}
},
slide.prototype.slide=function(t,d,i,a){
var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
if(o==t){
clearInterval(this.x.si);
if(this.e&&i<3){
this.x.si=setInterval(new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')'),10)
}else{
if(a||(this.a&&this.p)){this.auto()}
if(this.b>1&&this.c%this.l==0){this.clear()}
}
}else{
var v=o-Math.ceil(Math.abs(t-o)*.1)*d+'px';
this.v?this.u.style.top=v:this.u.style.left=v
}
},
slide.prototype.clear=function(){
var c=T$$('li',this.u), t=i=c.length; this.v?this.u.style.top=0:this.u.style.left=0; this.b=1; this.c=0;
for(i;i>0;i--){
var e=c[i-1];
if(t>this.l&&e.parentNode==this.u){this.u.removeChild(e); t--}
}
},
slide.prototype.sel=function(i){
var e=T$(i); e.onselectstart=e.onmousedown=function(){return false}
}
return{slide:slide}
}();
Возможно вы скажите, что проще будет расмотреть другие готовые плагины, где можно конфигурировать количестов слайдеров на странице, но так как мои познания в JS скудны, то я пока только смог адаптироваться под данный код. и он меня полностью удовлетворяет при показе 1 слайдера. Я пытался ковыряться в коде, но в слепую настроить его под мои нужды у меня так и не получилось.
Буду очень благодарен, если кто то потратит своё время чтобы помочь.
А css забыли?
А если просто поменять айдишники для второго слайдера? Вот так:
я подумал что CSS не понадобиться. Есть связка html / JS . У меня этот скрипт работал при разных стилях
---------- Добавлено 01.06.2013 в 01:30 ----------
А css забыли?
Я подумал что CSS здесь не важен . Мне показалось , что главное здесь связка html/JS , так как у меня этот скрипт работает при разных стилях
.
---------- Добавлено 01.06.2013 в 01:34 ----------
А если просто поменять айдишники для второго слайдера? Вот так:
Пробовал я такой метод, при чем еще лез непосредственно менял значения в скрипте. Но так как менял я сам толком не зная чего , то в результате ничего не вышло.
Но вот чего я не делал, так это не менял значение у var slideshow2=new TINY.slider.slide ... И попробавть не могу, так как на рабочем компе полетело видеокарта. Надеюсь, что завтра мне удасться проверить, и этот простой способ заработает
Я пытался запустить этот скрипт - он не работал, видимо вы не все скопировали сюда.
Попробуйте добавить 2 к id всех этих элементов: wrapper, container, pagination.
спасибо Andrej_in_ua, его идея сработала )
вот рабочий код
и добавляю CSS, я не стал его редактировать, он здесь такой, какой стоит у меня на странице
#container {position:relative;
background:#fff;
padding:32px;
height:235px;
border:1px solid #ccc;
border-radius: 15px;
}
#container2 {
position:relative;
background:#fff;
padding:32px;
height:235px;
border:1px solid #ccc;
border-radius: 15px;
}
.sliderbutton {
cursor:pointer;
opacity:0.5;
}
#slideleft {
display:block;
width:43px;
height:42px;
position:absolute;
left:35px;
top:159px;
z-index:10;
background:url(images/icons.gif) -50px -265px no-repeat
}
#slideleft:hover {
background-position:-0 -265px
}
#slideright {
background:url(images/icons.gif) 0 90px no-repeat
}
#slideright:hover {
background-position:-50px 90px
}
#slider {
float:left;
position:relative;
overflow:auto;
width:558px;
height:235px
}
#slider2 {
float:left;
position:relative;
overflow:auto;
width:558px;
height:235px
}
#slider ul {
position:absolute;
list-style:none;
top:0;
left:0
}
#slider2 ul {
position:absolute;
list-style:none;
top:0;
left:0
}
#slider li {
float:left;
width:558px;
height:235px
}
#slider2 li {
float:left;
width:558px;
height:235px
}
.pagination {
position:absolute;
top:40px;
right:61px;
list-style:none;
height:25px
}
.pagination li {
float:left;
cursor:pointer;
height:8px;
width:8px;
background:#ccc;
margin:0 4px 0 0;
border:1px solid #fff
}
.pagination li:hover, li.current {
background:#fff
}