JS＋CSS控制图片滚动方向

最新推荐文章于 2022-07-31 16:28:13 发布

panqingbiao

最新推荐文章于 2022-07-31 16:28:13 发布

阅读量1.4k

点赞数

分类专栏： CSS技术文章标签： css scroll class div function border

本文链接：https://blog.csdn.net/panqingbiao/article/details/1748532

版权

CSS技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
<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:490px;
position: relative;
height: 153px
}
#description,
#description2{
width:391px;/*=188*2+15*1 */
height:148px;
overflow:hidden;
margin-right:15px;
float:left;
}
.dis{
float:left;
width:40px;
text-align: center;
padding-top:50px
}
#description ul, #description li ,
#description2 ul, #description2 li {
float:left;
display: inline;
margin: 0;
padding: 0;
height:150px
}
#description li a,
#description2 li a{
display:block; border:1px solid #CCC; background-color:#FFFFFF; width:188px; height:148px;}
.content a:active,
.content a:visited,
.content a:link {
display: inline;
text-decoration: none;
width:188px;
height:145px;
}
.content a:hover {
width:188px;
height:145px;
color: #ffffff;
display: inline;
text-decoration: none;
}
img {border:0px}
</STYLE>
</head>
<body>
<div id=outer>
   <div id=focus>

      <div class="dis"><button onClick="doSlide(-1)">向左</button></div>
<div id=description class=description>
        <div id="content0">
        <ul id="content" class=content>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
        </ul>
        </div>
      </div>
      <div class="dis"><button onClick="doSlide(1)" >向右</button></div>
</div>
    
      <div id=focus>
      <div class="dis"><button onClick="doSlide(-1)">向左</button> </div>
      <div id=description2 class=description>
        <div id="content02">
        <ul id="content" class=content>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
        </ul>
        </div>
      </div>
      <div class="dis"><button onClick="doSlide(1)">向左</button></div>
    </div>
</div>
<script>
var img_pad=5//图片间隔
var img_w=188//图片宽
var img_n=2//每窗图片数
document.write ("<style>.content a {padding: 0 "+ img_pad+" 0 0;}</style>")
var win_w=img_w*img_n+(img_pad*2)*(img_n-1)
document.getElementById("description").style.width=win_w
document.getElementById("description2").style.width=win_w
document.getElementById("content0").innerHTML+=document.getElementById("content0").innerHTML
document.getElementById("content02").innerHTML+=document.getElementById("content02").innerHTML
var ok_obj=document.getElementById("content0").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/2)-1;
document.getElementById("content0").style.width=(ok+1)*win_w
document.getElementById("content02").style.width=(ok+1)*win_w
var ele=document.getElementById("description");
var ele2=document.getElementById("description2");
var w=ele.clientWidth;
var n=20,t=50;
var timers=new Array(n);
var k=0;doSlide(0);

var ss=1,t2
function doSlide(s){
clearTimeout(t2);
ss=s;
if (k>=ok &&s>0){ele.scrollLeft=w;k=1;
     ele2.scrollLeft=w;
  };
if (k<1 &&s<0){ele.scrollLeft=(ok-1)*w;k=ok-1
     ele.scrollLeft=(ok-1)*w;
  };
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)));
       ele2.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));
       },(i+1)*t);
    }
    )(); t2=setTimeout ("auto_scroll()",3000)
}
function auto_scroll(){
doSlide(ss)
//var t2=setTimeout ("auto_scroll()",3600)
}
setTimeout ("auto_scroll()",2000)
</script>
</body>
</html>

panqingbiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS＋CSS控制图片滚动方向

http://www.w3.org/1999/xhtml">css+js控制图片展示body{ padding: 0px; margin: 0px; font: 70% verdana, geneva, arial, helvetica, sans-serif; color: #000; text-align: center }#outer{ padding: 0px; margi
复制链接

扫一扫