Problem creating a div container with pictures scrollable_问答_开发者

Problem creating a div container with pictures scrollable

开发者 https://www.devze.com 2023-02-16 12:55 出处：网络

i created a div made it scrollable with <p>text</p> as seen below: the code has 2 scrollable buttons that change color once they scrolled all the way to the end.

i created a div made it scrollable with <p>text</p> as seen below:

the code has 2 scrollable buttons that change color once they scrolled all the way to the end.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style rel="stylesheet" type="text/css">
#scroller
{
border: 1px solid black;
height: 80px;
width: 400px;
overflow-y: hidden;
overflow-x: hidden;
}
a
{
display:block;
padding:10px;
background-color:red;
width:25px;
position:relative;
top:20px;
}
div
{
float:left;
}
#type
{
position:absolute;
top: 100px;
left: 250px
}
#left
{
background-color:blue;
}
</style>
<script type="text/javascript">
var PixelPerInterval = 1;
var stop = false;
var t;
var scroll_width;
function scroll_left()
{
document.getElementById('right').style.backgroundColor='red';
document.getElementById('scroller').scrollLeft-=PixelPerInterval;
if(!stop)
t = setTimeout("scroll_left()",10);
else
stop = false;
scrX = document.getElementById('scroller').scrollLeft;
divwidth=document.getElementById('s开发者_如何学Gocroller').clientWidth;
pwidth=document.getElementById('cont').clientWidth;
type.innerHTML = scrX;
if ((scrX) <= 0)
//type.innerHTML = scrX + ' left';
document.getElementById('left').style.backgroundColor='blue';
}
function scroll_right()
{
document.getElementById('left').style.backgroundColor='red';
document.getElementById('scroller').scrollLeft+=PixelPerInterval;
if(!stop)
t = setTimeout("scroll_right()",10);
else
stop = false;
scrX = document.getElementById('scroller').scrollLeft;
divwidth=document.getElementById('scroller').clientWidth;
pwidth=document.getElementById('cont').clientWidth;
type.innerHTML = scrX;
if ((divwidth+scrX) >= pwidth)
//type.innerHTML = scrX + ' right';
document.getElementById('right').style.backgroundColor='blue';
}
function stop_scroll() {
stop = true;
}
</script>
</head>
<body>
<div><a id="left" onmouseover="scroll_left();" onmouseout="stop_scroll();" href="#">Left</a></div>
<div id="scroller">
<p id="cont" style="width:700px;">
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
</p>
</div>
<div><a id="right" onmouseover="scroll_right();" onmouseout="stop_scroll();" href="#">Right</a></div>
<p id="type">asd</p>
</body>

when adding pictures they won't overflow to the right and only down. thanks alot for the help.

This is an answer related to your comment of doing it purely in CSS, it's NOT CSS 3, just CSS 2.1 Here you go:

HTML:

<div id="wrapper">
    <div id="container">
        <img src="http://whatscookingmexico.com/wp-content/uploads/2007/09/pear1.jpg" alt="" />
        <img src="http://whatscookingmexico.com/wp-content/uploads/2007/09/pear1.jpg" alt="" />
        <img src="http://whatscookingmexico.com/wp-content/uploads/2007/09/pear1.jpg" alt="" />
    </div>
</div>

CSS:

#wrapper {
    width: 200px;
    border: 1px solid #333;
    overflow: auto;
}

#container {
    white-space: nowrap;
}

Working example: http://jsfiddle.net/pdJ6r/2/

Problem creating a div container with pictures scrollable

精彩评论

关注公众号

热门标签

图文推荐

Problem creating a div container with pictures scrollable

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：