js图片滑动切换效果？js点击两张图片切换
大家好，js图片滑动切换效果相信很多的网友都不是很明白，包括js点击两张图片切换也是一样，不过没有关系，接下来就来为大家分享关于js图片滑动切换效果和js点击两张图片切换的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
JS如何实现图片滑动
<!doctypehtml>
<html>
<head>
<metacharset=utf-8"/>
<title>js图片滑动案例</title>
<styletype="text/css">
*{padding:0;margin:0;list-style:none;border:0;}
.all{
width:500px;
height:200px;
padding:7px;
border:1pxsolid#ccc;
margin:100pxauto;
position:relative;
}
.screen{
width:500px;
height:200px;
overflow:hidden;
position:relative;
}
.screenli{width:500px;height:200px;overflow:hidden;float:left;}
.screenul{position:absolute;left:0;top:0px;width:3000px;}
.allol{position:absolute;right:10px;bottom:10px;line-height:20px;text-align:center;}
.allolli{float:left;width:20px;height:20px;background:#fff;border:1pxsolid#ccc;margin-left:10px;cursor:pointer;}
.allolli.current{background:yellow;}
</style>
<scripttype="text/javascript">
functionanimate(obj,target){
clearInterval(obj.timer);//先清除定时器
varspeed=obj.offsetLeft<target?15:-15;//用来判断应该+还是-
obj.timer=setInterval(function(){
varresult=target-obj.offsetLeft;//因为他们的差值不会超过5
obj.style.left=obj.offsetLeft+speed+"px";
if(Math.abs(result)<=15)//如果差值不小于5说明到位置了
{
clearInterval(obj.timer);
obj.style.left=target+"px";//有5像素差距我们直接跳转目标位置
}
},10)
}
window.onload=function(){
//获取元素
varbox=document.getElementById("all");//大盒子
varul=document.getElementById("ul");
varulLis=ul.children;
//操作元素
//因为我们要做无缝滚动，所以要克隆第一张，放到最后一张后面去
//a.appendchild(b)把b放到a的最后面
//1.克隆完毕
ul.appendChild(ul.children[0].cloneNode(true));
//2.创建ol和小li
console.log(ulLis.length);
varol=document.createElement("ol");//生成的是ol
box.appendChild(ol);//把ol追加到box里面
for(vari=0;i<ulLis.length-1;i++)
{
varli=document.createElement("li");
li.innerHTML=i+1;//给里面小的li文字12345
ol.appendChild(li);//添加到ol里面
}
ol.children[0].className="current";
//3.开始动画部分
varolLis=ol.children;
for(vari=0;i<olLis.length;i++)
{
olLis[i].index=i;//获得当前第几个小li的索引号
olLis[i].onmouseover=function(){
for(varj=0;j<olLis.length;j++)
{
olLis[j].className="";//所有的都要清空
}
this.className="current";
animate(ul,-this.index*500)
//调用动画函数第一个参数谁动画第二个走多少
square=key=this.index;//当前的索引号为主
}
}
//4.添加定时器
vartimer=null;//轮播图的定时器
varkey=0;//控制播放张数
varsquare=0;//控制小方块
timer=setInterval(autoplay,1000);//开始轮播图定时器
functionautoplay(){
key++;//先++
if(key>ulLis.length-1)//后判断
{
ul.style.left=0;//迅速调回
key=1;//因为第6张就是第一张第6张播放下次播放第2张
}
animate(ul,-key*500);//再执行
//小方块
square++;
if(square>olLis.length-1)
{
square=0;
}
for(vari=0;i<olLis.length;i++)//先清除所有的
{
olLis[i].className="";
}
olLis[square].className="current";//留下当前的
}
//last最后鼠标经过大盒子要停止定时器
box.onmouseover=function(){
clearInterval(timer);
}
box.onmouseout=function(){
timer=setInterval(autoplay,1000);//开始轮播图定时器
}
}
</script>
</head>
<body>
<divclass="all"id='all'>
<divclass="screen">
<ulid="ul">
<li><imgsrc="images/1.jpg"width="500"height="200"/></li>
<li><imgsrc="images/2.jpg"width="500"height="200"/></li>
<li><imgsrc="images/3.jpg"width="500"height="200"/></li>
<li><imgsrc="images/4.jpg"width="500"height="200"/></li>
<li><imgsrc="images/5.jpg"width="500"height="200"/></li>
</ul>
</div>
</div>
</body>
</html>以上是刚刚用原生js写的，希望对你有所帮助，用插件（如jquery等）写的话更简单
如果还有不懂的地方，可加我，直接联系我
要马上看一下效果的话，直接替换代码最下面的那些图片路径即可！
望采纳！
js实现图片自动的滚动效果
自动滚动，主要思路是用js自带的setInterval方法。
定义和用法
setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval()方法会不停地调用函数，直到 clearInterval()被调用或窗口被关闭。由 setInterval()返回的 ID值可用作 clearInterval()方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数
code必需。要调用的函数或要执行的代码串。
millisec必须。周期性执行或调用 code之间的时间间隔，以毫秒计。
返回值
一个可以传递给 Window.clearInterval()从而取消对 code的周期性执行的值。
简单的例子，仅供参考：
<style>
*{margin:0;padding:0;list-style:none;}
#box{width:840px;border:1pxsolid#000;height:210px;margin:30pxauto;position:relative;overflow:hidden;}
#boxul{position:absolute;left:0;top:0;}
#boxulli{width:200px;height:200px;float:left;padding:5px;}
</style>
<script>
window.onload=function(){
varoBox=document.getElementById('box');
varoUl=oBox.children[0];
varaLi=oUl.children;
//复制一份内容
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
setInterval(function(){
varl=oUl.offsetLeft+10;
if(l>=0){
l=-oUl.offsetWidth/2;
}
oUl.style.left=l+'px';
},30);
};
</script>
</head>
<body>
<divid="box">
<ul>
<li><imgsrc="img/1.jpg"width="200"></li>
<li><imgsrc="img/2.jpg"width="200"></li>
<li><imgsrc="img/3.jpg"width="200"></li>
<li><imgsrc="img/4.jpg"width="200"></li>
</ul>
</div>
</body>
好了，文章到此结束，希望可以帮助到大家。