css+js控制图片展示

转载 2007年10月15日 21:51:00
<!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;/*=188*3+15*2 */
  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 id="img_l" 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"><!--(#description.width=594px)*4-->
        <ul id="content"  class=content>       
          <li><a href="#"><img _fcksavedurl=""#"><img" _fcksavedurl=""#"><img"
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li><li><a href="#">
   <img
          src="http://cozwoo.132.tofor.com/temp/rounded.gif"/></a></li></ul></div>
      </div>
      <div class="dis">
          <img id="img_r" src="http://cozwoo.132.tofor.com/temp/btn_right.gif" alt="向右滚动" onclick="doSlide(1)" />
      </div>
    </div>
</div>
<script>
var ok_obj=document.getElementById("content").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1
  var ele=document.getElementById("description");
  var w=ele.clientWidth;
  var n=20,t=50;
  var timers=new Array(n);
  var k=0;doSlide(0);
function doSlide(s){
  if (k>=ok &&s>0|| k<=0 &&s<0)alert("抱歉,已经到头了!")
  else{
  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>
 

CSS+JS实现图片集展示(二)

http://download.csdn.net/detail/gisshixisheng/8319327 1、详细图和缩略图的同步展示; 2、图片的自动播放; 3、显示图片的缩影图的焦点显示与别...
  • GISShiXiSheng
  • GISShiXiSheng
  • 2015年01月01日 19:24
  • 2293

CSS+JS实现图片集展示

CSS+JS实现图片集展示: 1、图片的展示与翻页; 2、点击图片放大图片。
  • GISShiXiSheng
  • GISShiXiSheng
  • 2014年12月31日 10:24
  • 1679

css3实现六边形照片展示

总是在匆忙中不知所措,总是还未做好准备,所有的事情就已经发生。对于大多数人努力程度之低,所以根本就不用拼天赋。每天学习一点点。 今天实现的是,用css3去实现多边形的照片显示。其核心是利用css3中...
  • u014703834
  • u014703834
  • 2015年01月15日 17:15
  • 3723

CSS+JS控制图片展示效果

xmlns="http://www.w3.org/1999/xhtml">CSS+JS控制图片展示效果BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PAD...
  • sandykwx
  • sandykwx
  • 2013年01月17日 09:50
  • 152

迅雷网div+css+js图片展示代....

  • 2009年10月27日 16:41
  • 244KB
  • 下载

非常唯美的JS+CSS组合图片展示效果

  • 2009年07月22日 21:20
  • 32KB
  • 下载

html+css实现3D旋转图片展示

MyHtml.html --> *{margin:0px ; padding:0px} body{background:url("imgs/bg.jp...
  • u012651389
  • u012651389
  • 2015年02月25日 17:12
  • 1369

html+css实现爱奇艺图片展示

MyHtml.html --> *{margin:0px ; padding:0px;} #big{width:100%;} .main...
  • u012651389
  • u012651389
  • 2015年02月25日 22:08
  • 504

纯CSS3实现图片展示特效

Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成。本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可...
  • px459
  • px459
  • 2016年07月17日 21:22
  • 255

html+css图片展示

MyHtml.html --> *{margin:0px;} #imgList{width:989px;height:370px;} #imgLi...
  • u012651389
  • u012651389
  • 2015年02月25日 22:39
  • 471
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css+js控制图片展示
举报原因:
原因补充:

(最多只允许输入30个字)