горизонтальная прокрутка div с помощью javascript или jquery - PullRequest
Новая
       18

горизонтальная прокрутка div с помощью javascript или jquery

8 голосов
/ 26 июля 2011

Последние два дня я потратил на поиск простого кода javascript или jquery для этого.Я хочу включить элемент горизонтальной прокрутки, используя javascript или jquery для отображения изображений и описательного текста рабочей страницы моего веб-портфолио.

Он будет функционировать очень похоже на прокрутку по скользящему клику, показанную здесь: http://www.dyn -web.com / code / scroll / demos.php # horiz К сожалению, лицензия на код составляет $ 40,и я сломленный студент

При загрузке страницы будут показаны три изображения портфолио.Дополнения скрыты в переполнении справа.При щелчке левой стрелки (я могу создать), новый слайд изображения появляется справа.Щелчок правой стрелки отправляет его обратно в переполнение.Я не хочу полосы прокрутки, просто стрелки, управляющие слайдами.

Любая помощь очень ценится.Благодаря.

Ответы [ 4 ]

3 голосов
/ 26 июля 2011

Вы можете просто использовать код, подобный следующему: 

function FixMargin(left) {
    $(this).css("left", left);
}

$(document).ready(function () {

$('#rightbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));
});

$('#leftbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));
});

}

, где ваш HTML выглядит так: 

<div id="slideleft" class="slide">
    <div class="inner" id="bitToSlide" style="width:1842px">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr valign="top">
                <td id="page1" style="width: 614px">
                </td>

                <td id="page2" style="width: 614px">
                </td>
            </tr>
        </table>
    </div>
</div>

и ваш CSS выглядит следующим образом: 

.slide
{
position:relative;
overflow:hidden;
height:365px;
width:597px;
margin:1em 0;
background-color:#E9ECEF;
border:0px
}

.slide .inner
{
position:absolute;
left:0;
bottom:0;
height:365px;
padding:0px;
background-color:#E9ECEF;
color:#333
}

Я написал выше очень давно - так что вы, вероятно, захотите немного его обновить (например, замените таблицу на div), но она работает.

Очевидно, вам также нужны две кнопки там

2 голосов
/ 26 июля 2011

Существует множество плагинов jQuery, которые позволяют вам сделать это очень легко. Например: http://slidesjs.com/

Надеюсь, это поможет.

0 голосов
/ 27 июля 2011

Вы можете взглянуть на iscroll 4.

http://cubiq.org/iscroll-4

У вас есть метод scrollTo или метод scrollToElement ...

0 голосов
/ 26 июля 2011

Вы можете сделать что-то вроде этого. Не проверенный код, но просто подсказка. 

<div id="imageContainer">
  <div id="imageWrapper">
    <img />
    <img />
  </div>
  <span id="left">Left</span>
  <span id="right">right</span>
</div>

var imageWidth = 200;
$("#left").click(function(){
  $("#imageWrapper").animate({marginLeft:"-="+imageWidth}, 500);
  //Offcourse you need to handle the corner cases when there is not image to move left
});

$("#right").click(function(){
  $("#imageWrapper").animate({marginLeft:"+="+imageWidth}, 500);
});
...