Scroll div horizontal (ing)

ByOnur58 · 10 Şub 2015

Kod:

<head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Mr J | http://www.huntingground.net/ */

scrollStep=1

timerLeft=""
timerRight=""

function toLeft(id){
  ********.getElementById(id).scrollLeft=0
}

function scrollDivLeft(id){
  clearTimeout(timerRight) 
  ********.getElementById(id).scrollLeft+=scrollStep
  timerRight=setTimeout("scrollDivLeft('"+id+"')",10)
}

function scrollDivRight(id){
  clearTimeout(timerLeft)
  ********.getElementById(id).scrollLeft-=scrollStep
  timerLeft=setTimeout("scrollDivRight('"+id+"')",10)
}

function toRight(id){
  ********.getElementById(id).scrollLeft=********.getElementById(id).scrollWidth
}

function stopMe(){
  clearTimeout(timerRight) 
  clearTimeout(timerLeft)
}
</script>

*********
#container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #EFEFEF;
}

#scroller {
  width: 928px; /* = width + margin left + margin right + padding*2 + border*2  from the content rule */
}

.content {
  width: 200px;
  height: 200px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #EFEFEF;
  font-size: .8em;
}

.scrollNav, .scrollNav a:link, .scrollNav a:visited  {
  font-size: .8em;
  color:#00009C;
  font-weight: bold;
}

<!--[if IE]>
<style type="text/css">

#scroller{
  width: 882px; /* = width + margin left + margin right from the content rule + border*2 from the container rule*/
}

</style>
<! [endif]-->
</head>

<body>

<span class="scrollNav">
<a href="#null" onclick="toLeft('container')">« first</a> | 
<a href="#null" onmouseover="scrollDivLeft('container')" onmouseout="stopMe()">scroll left</a> | 
<a href="#null" onmouseover="scrollDivRight('container')" onmouseout="stopMe()">scroll right</a> | 
<a href="#null" onclick="toRight('container')">last »</a>
</span>

<br><br>

<div id="container">

<div id="scroller">

<div class="content" style="background-color:#8ECF8E;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris orci. Suspendisse aliquam, quam eu convallis pellentesque, felis velit blandit augue, vitae semper pede metus non nulla. Etiam eu eros in ligula euismod vestibulum. Aenean porttitor adipiscing metus.</div>

<div class="content" style="background-color:#FFFF00;">Phasellus tellus nisi, viverra non, fringilla eget, tristique sit amet,<img src="pic1.gif" style="width:40px;height:58px;float:left;margin:4px 5px 0px 0px"> felis. Vestibulum iaculis mauris non lectus. Suspendisse libero arcu, fermentum at, eleifend<img src="pic2.gif" style="width:40px;height:58px;float:right;margin:4px 0px 0px 10px"> non, fringilla eu, lectus. Mauris sit amet tortor. Proin accumsan mauris sit amet mauris.<br style="clear:both"></div>

<div class="content">Lorem ipsum dolor<p><img src="pic3.gif" width="200" height="150"></div>

<div class="content" style="background-color:#FFD700;">Sed vitae risus. Vivamus vitae augue et est aliquet malesuada. Vivamus sit amet dolor ac arcu posuere ullamcorper. Praesent faucibus augue sit amet quam. Integer viverra laoreet dui. Vestibulum semper odio auctor libero. Maecenas consectetuer, elit nec ornare luctus, diam odio feugiat felis, ut nonummy dolor sapien sed orci.</div>

<br style="clear:both">
</div>
</div>
</body>

Scroll div horizontal (ing)

ByOnur58