css+js控制图片展示

最新推荐文章于 2025-07-22 00:16:16 发布

weixin_33907511

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量48

点赞数

文章标签： xhtml

本文介绍了一种使用CSS和JavaScript实现的图片滑动展示效果。通过自定义的HTML结构和样式设置，配合简单的JavaScript逻辑，实现了图片的平滑滚动切换。适用于网站轮播图等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=LayerMenu style="DISPLAY:none ; Z-INDEX: 1000; FILTER: alpha(opacity=0); POSITION: absolute; left:384px; top:69px; width:226px; height:27px;border:2px solid red;background:#ff0;padding:15px;font-size:20px"> 抱歉,已经到头了!
</DIV>
<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">
        <ul id="content" class=content>
          <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><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
document.getElementById("content0").style.width=(ok+1)*594;
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)MenuClick()
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>
<SCRIPT language=javascript>
var intDelay=30; //设置菜单显示速度，越大越慢
var intInterval=5;
function MenuClick(){
LayerMenu.filters.alpha.opacity=0;
LayerMenu.style.display="";
GradientShow();
}
function GradientShow()
{
LayerMenu.filters.alpha.opacity+=intInterval;
if (LayerMenu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay);
else setTimeout("GradientClose()",1500)
}
function GradientClose()
{
LayerMenu.filters.alpha.opacity-=intInterval;
if (LayerMenu.filters.alpha.opacity>0) {
setTimeout("GradientClose()",intDelay);
}
else {
LayerMenu.style.display="none";
}
}
GradientClose()
</SCRIPT>
</body>
</html>