css+js简单应用
趁着周末，有时间也有心情，再次发表个网上已经有过很多例子的js控制左右图片滚动的代码，还是那句话，为了大家用之方便也为自己拿之方便。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html dir="ltr" lang="it" 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(http://www.soojs.com/t/images/tile.gif) #eee repeat-y left top;
width:694px;
position: relative;
height: 180px
}
#description{
width:450px;/*=188*3+15*2 */
height:150px;
overflow:hidden;
margin-right:0px;
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" alt="向左滚动" onclick="doSlide(-1)" src="../images/left.gif" />
</div>
<div id="description">
<div id="content0" style="border: 0px solid red; height: 42px; width:900px">
<!--(#description.width=594px)*4-->
<ul id="content" class="content">
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
<li><a href="#">
<img height="42" src="../images/sample1.jpg" width="65"></a></li>
</ul>
</div>
</div>
<div class="dis">
<img id="img_r" alt="向右滚动" onclick="doSlide(1)" src="../images/right.gif" />
</div>
</div>
</div>
<script>
var ok_obj=document.getElementById("content").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/6)-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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述