jquery trigger horizontal scroll of fluid dynamic width div, stop end/beginning, get width window
Question
I suppose this is essentially a jquery slider I am after, but none of the one's I have tried ( caroufredsel, elastislide, smoothdivscroll ) do exactly what I want and most offer too many extra features that I don't need. All I really want to do is trigger the browser's horizontal scrolling via jquery so I can hide the scrollbar and use a button to trigger the scroll.
-A horizontally scrolling div with a 100% width so no matter the browser's window size, the images fill from the left to right edges. ( done, see link below )
-The width of the images vary
-Trigger the left or right scrolling via clicking on external control like <div id="scroll-left">scroll left</div> by a one page at a time.
-Use easing
-Stop scrolling at beginning or end of div (just like a browser's scroll acts)
What I believe has to happen is for jquery to get the current width of the div or the browser window to be able to know how far to scroll, then needs to know when to stop.
Perhaps it's simpler than that.
I have a basic mockup of the horizontally scrolling div pre jquery: HERE
1 answers
solution1
1 2012-03-30 02:18:03
This is a "quick-n-dirty" example that I came up with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var curPage = 0;
$(document).ready(function(){
var div = $("#scrolldiv");
div.scrollLeft(0);
$("#scroll-right").click(function(){
var curPos = div.scrollLeft();
var curImage = div.find("img:eq("+curPage+")");
if (curImage) {
width = curImage.width();
div.animate({scrollLeft: curPos+width}, 'slow');
}
curPage = curPage + 1;
});
$("#scroll-left").click(function(){
var curPos = div.scrollLeft();
curPage = curPage - 1;
var curImage = div.find("img:eq("+curPage+")");
if (curImage) {
width = curImage.width();
div.animate({scrollLeft: curPos-width}, 'slow');
}
});
});
</script>
</head>
<body>
<div id="scrolldiv" style="width:100%;height:490px;float:left;display:inline;white-space: nowrap;overflow:hidden">
<img src="ukvogue2.jpg" width="693" heigh="458" />
<img src="ukvogue2.jpg" width="193" heigh="458" />
<img src="ukvogue2.jpg" width="693" heigh="458" />
<img src="ukvogue2.jpg" width="493" heigh="458" />
<img src="ukvogue2.jpg" width="593" heigh="458" />
<img src="ukvogue2.jpg" width="393" heigh="458" />
<img src="ukvogue2.jpg" width="293" heigh="458" />
</div>
<a href="#" id="scroll-left">Left</a> |
<a href="#" id="scroll-right">Right</a>
</body>
</html>
Hope this will point you to the right direction.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.