不是特别好的图片滚动效果

原创 于 2008-02-27 21:46:00 发布
· 727 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#scroll #function #div #border #html #stylesheet

三个不是特别好图片滚动效果

1. 点击图标 - - 向左和向右 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css+js控制图片展示</title>
<style>
body{  padding: 0px;  margin: 0px;  font: 70% verdana, geneva, arial, helvetica, sans-serif;  color: #000;  text-align: center  }
#outer{  padding: 0px;  margin: 0px;  width: 800px;  text-align: center  }
#focus{  border: #ccc 2px solid;  margin: 0px;  padding: 0px;  padding-top: 15px;  background: url(/images/tile.gif) #eee repeat-y left top;  width:694px;  position: relative;  height: 180px  }
#description{  width:594px;  height:150px;  overflow:hidden;  margin-right:15px; float:left;  }
.dis{ float:left; width:40px; text-align: center; padding-top:50px}
#description ul, #description li { float:left;display: inline;margin: 0;padding: 0;height:150px}
.content a:active,
.content a:visited,
.content a:link {display: inline;margin: 0;padding: 0;padding-left: 5;padding-right: 5;text-decoration: none;}
.content a:hover { color: #ffffff; display: inline; text-decoration: none;}
img {border:0px}
</STYLE>
</head>
<body>
<div id=outer>
   <div id=focus>
      <div class="dis">
          <img src="http://cozwoo.132.tofor.com/temp/btn_left.jpg" alt="向左滚动" onClick="doSlide(-1)" />
      </div>
      <div id=description>
        <div id="content0" style="border:0px solid red;height:150px;width:2376px">
        <ul id="content"  class=content>       
          <li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li><li><a href="#"><img
          src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"/></a></li></ul></div>
      </div>
      <div class="dis">
          <img src="http://cozwoo.132.tofor.com/temp/btn_right.gif" alt="向右滚动" onClick="doSlide(1)" />
      </div>
    </div>
</div>
<script>
  var ele=document.getElementById("description");
  var w=ele.clientWidth;
  var n=20,t=50;
  var timers=new Array(n);
  //document.getElementById("content0").style.width=document.getElementById("content").clientWidth;
  var k=0;doSlide(0);
  function doSlide(s){
   k+=s;
    var x=ele.scrollLeft;
    var d=k*w-x;
    for(var i=0;i<n;i++)(
     function(){
      if(timers[i]) clearTimeout(timers[i]);
      var j=i;
//      alert(x)
      timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
     }
    )();
}
</script>
</body>
</html>

2. 向右滚动

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff>
 <table align=left cellpadding=0 cellspace=0 border=0>
  <tr>
   <td id=demo1 valign=top>
   <img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg">
   <img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg">
   <img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg">
   <img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg">
   <img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg">
   </td>
   <td id=demo2 valign=top>
   </td>
  </tr>
 </table>
</div>
<script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
 function Marquee(){
  if(demo.scrollLeft<=0)
   demo.scrollLeft+=demo2.offsetWidth
   else{
   demo.scrollLeft--
  }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.οnmοuseοver=function() {clearInterval(MyMar)}
 demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

3. 向左     有图片提示

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过显示突出详细</title>
<link href="images/main.css" rel="stylesheet" type="text/css" />
<style>
<!--
body {font-family:Arial;color:#333;font-size:12px;background:url(http://www.mingblog.com/fm916/images/g_0116_01.gif);margin:0 auto;padding:0;}
.sqBorder {width:226px; height:140px; padding:5px; background:#ffffff;margin:0 auto;}
.scroll_div {width:224px; height:140px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:100px;height:134px;border: 0;margin: auto 8px; border:1px #efefef solid;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul,li{display:inline;}
#scroll_begin li span, #scroll_end li span {display:none;line-height:20px;}
#scroll_begin li a:hover, #scroll_end li a:hover{position:absolute;display:block;background-color:#000;border:1px solid #ccc;height:150px;width:100px;padding:5px;margin:0px;color:#fff;text-align:center;text-decoration:none;z-index:2000}
#scroll_begin li a:hover span, #scroll_end li a:hover span{display:block;color:#fff;}
/*设置ul和li横排*/
-->
</style>
</head>
<body>
<script language="javascript">
function ScrollImgLeft(){
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML+scroll_begin.innerHTML+scroll_begin.innerHTML
  function Marquee(){
    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
      scroll_div.scrollLeft-=scroll_begin.offsetWidth
    else
      scroll_div.scrollLeft++
  }
var MyMar=setInterval(Marquee,speed)
  scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
  scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
  <div class="sqBorder">
  <!--#####滚动区域#####-->
    <div id="scroll_div" class="scroll_div">
      <div id="scroll_begin">
        <ul>
   <li><a href="#" title="主持人：北佳" target="_blank"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg" /><span>主持人：北佳<br />
主持节目：青春在线</span></a></li>
   <li><a href="#" title="主持人：常蕾" target="_blank"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg" /><span>主持人：常蕾<br />
主持节目：青春在线</span></a></li>
   <li><a href="#" title="主持人：崔晓红" target="_blank"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg" /><span>主持人：崔晓红<br />
主持节目：青春在线</span></a></li>
        </ul>
      </div>
      <div id="scroll_end"></div>
    </div>
  <!--#####滚动区域#####-->
  </div>
  <script type="text/javascript">ScrollImgLeft();</script>
<!--//向左滚动代码结束-->
</body>
</html>

wangdingjun0
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值