Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 372 3 темы, 22 сообщения, 8 баллов репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография bor10811
    #10

    bor10811
    Очков активности: 15 2 темы, 4 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 19.08.2018
Топ 5 участников по репутации


Слайдер на JavaScript

#1 eboooka

eboooka
  • Неактивные
  • 2 сообщений
  • Репутация: 0
0

Отправлено 01 February 2013 - 15:30

Доброго времени суток.
Столкнулся с такой проблемой. На сайте, где был пример слайдера взял код. Скопировал все это дело в notepad, подкорректировал стили, подстроив под свои изображения, код javascript не трогал, но отобразив страницу ничего не работало, ползунок на месте остается вне зависимости от того какие шаманские методы с курсором применять.
Собственно, от Вас прошу либо помочь с уже имеющимся кодом, либо написать свой вариант. Буду крайне благодарен, заранее спасибо.

Вот код с этого сайта:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="lib.js"></script>
  <style>
    .slider {
	  border-radius: 5px;
	  background: #E0E0E0;
	  background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
	  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
	  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
	  width: 310px;
	  height: 15px;
	  margin: 5px;
    }
    .thumb {
	  width: 10px;
	  height: 25px;
	  border-radius: 3px;
	  position: relative;
	  left: 10px;
	  top: -5px;
	  background: blue;
	  cursor: pointer;
    }
  </style>
</head>
<body>
<div id="slider" class="slider">
  <div class="thumb"></div>
</div>
<script>
var sliderElem = document.getElementById('slider');
var thumbElem = sliderElem.children[0];
thumbElem.ondragstart = function() { return false; };
thumbElem.onmousedown = function(e) {
  e = fixEvent(e);
  var thumbCoords = getCoords(thumbElem);
  var shiftX = e.pageX - thumbCoords.left;
  var shiftY = e.pageY - thumbCoords.top;
  var sliderCoords = getCoords(sliderElem);
  document.onmousemove = function(e) {
    e = fixEvent(e);
    //  вычесть координату родителя, т.к. position: relative
    var newLeft = e.pageX - shiftX - sliderCoords.left;
    // курсор ушёл вне слайдера
    if (newLeft < 0) {
	  newLeft = 0;
    }
    var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
    if (newLeft > rightEdge) {
	  newLeft = rightEdge;
    }
    thumbElem.style.left = newLeft + 'px';
  }
  document.onmouseup = function() {
    document.onmousemove = document.onmouseup = null;
  };
  return false; // disable selection start (cursor change)
};
</script>
</body>
</html>

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Не получается вставить слайдер в content
  2. Как отредактировать скрипт слайдера под себя
  3. 2 слайдера на одной странице
  4. Как установить слайдер на сайт
  5. Автоматическое листание слайдера

#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 01 February 2013 - 17:45

eboooka,
файл lib.js положите в ту же папку, где ваша страничка.

function fixEvent(e) {
  e = e || window.event;
  if (!e.target) e.target = e.srcElement;
  if (e.pageX == null && e.clientX != null ) { // если нет pageX..
    var html = document.documentElement;
    var body = document.body;
    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
    e.pageX -= html.clientLeft || 0;
    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
    e.pageY -= html.clientTop || 0;
  }
  if (!e.which && e.button) {
    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
  }
  return e;
}
function getCoords(elem) {
    var box = elem.getBoundingClientRect();
    var body = document.body;
    var docElem = document.documentElement;
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;
    return { top: Math.round(top), left: Math.round(left) };
}

  • 0

#3 eboooka

eboooka
    Topic Starter
  • Неактивные
  • 2 сообщений
  • Репутация: 0

Отправлено 01 February 2013 - 22:00

Спасибо за помощь, все получилось :)
  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru