javascript - jQuery: horizontal scroll to div - Stack Overflow

admin管理员组

文章数量:1393050

What I'm aiming to achieve in the end in something similar to the bbc site: with a side scroll from section to section. Here's my code and I'll explain the problem I'm facing:
jsFiddle: /
HTML:

<div class="wrapper">
    <div class="container">
        <div class="contentContainer red"></div>
        <div class="contentContainer blue"></div>
        <div class="contentContainer orange"></div>
    </div>
</div>

<div class="left">LEFT</div>
<div class="right">RIGHT</div>

jQuery:

$(document).ready(function () {
    $('.right').click(function () {
        $('.container').animate({
            'left': '-100%'
        });
    });
    $('.left').click(function () {
        $('.container').animate({
            'left': '0%'
        });
    });    
});

Firstly I don't know if it's possible to stack the .contentContainer divs next to each other without having to set a 300% width on the .container div. As the site is going to be CMS I don't want to keep changing the width of the .container div to suit. There will only ever be one .contentContainer div in view at one time too, thus I've set the overflow to hidden.
I can't seem to figure out a nice scroll function too, the one I have currently only scrolls the .container div once by 100%, ideally I'd want this to work more like a slideshow, i.e. on a loop, if possible. Any suggestions would be greatly appreciated!

What I'm aiming to achieve in the end in something similar to the bbc site: http://www.bbc.co.uk with a side scroll from section to section. Here's my code and I'll explain the problem I'm facing:
jsFiddle: http://jsfiddle/neal_fletcher/kzQFQ/2/
HTML:

<div class="wrapper">
    <div class="container">
        <div class="contentContainer red"></div>
        <div class="contentContainer blue"></div>
        <div class="contentContainer orange"></div>
    </div>
</div>

<div class="left">LEFT</div>
<div class="right">RIGHT</div>

jQuery:

$(document).ready(function () {
    $('.right').click(function () {
        $('.container').animate({
            'left': '-100%'
        });
    });
    $('.left').click(function () {
        $('.container').animate({
            'left': '0%'
        });
    });    
});

Firstly I don't know if it's possible to stack the .contentContainer divs next to each other without having to set a 300% width on the .container div. As the site is going to be CMS I don't want to keep changing the width of the .container div to suit. There will only ever be one .contentContainer div in view at one time too, thus I've set the overflow to hidden.
I can't seem to figure out a nice scroll function too, the one I have currently only scrolls the .container div once by 100%, ideally I'd want this to work more like a slideshow, i.e. on a loop, if possible. Any suggestions would be greatly appreciated!

• javascript
• jquery
• css
• html

Share Improve this question Follow asked Sep 29, 2013 at 22:43 user1374796user1374796 1,5821313 gold badges4646 silver badges7676 bronze badges 2

• Why don't you use a slider plugin? You can even write your own. – Terry Commented Sep 29, 2013 at 22:46
• 1 I answered something similar here: stackoverflow./a/18966254/1937302 – Ben Jackson Commented Sep 29, 2013 at 23:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I have updated your JSFiddle . With the code below you can count how many elements you got inside your slider and thereafter set the % width automatically.

var length = $('div .container').children('div .contentContainer').length;
$(".container").width(length*100 +'%');

本文标签： javascriptjQuery horizontal scroll to divStack Overflow