JS如何实现图片滑动

一、JS如何实现图片滑动

<title>js图片滑动案例</title>

*{padding:0;margin:0;list-style:none;border:0;}

.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;}

<scripttype="text/javascript">

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说明到位置了

obj.style.left=target+"px";//有5像素差距我们直接跳转目标位置

varbox=document.getElementById("all");//大盒子

varul=document.getElementById("ul");

//因为我们要做无缝滚动，所以要克隆第一张，放到最后一张后面去

//a.appendchild(b)把b放到a的最后面

ul.appendChild(ul.children[0].cloneNode(true));

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";

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="";//所有的都要清空

//调用动画函数第一个参数谁动画第二个走多少

square=key=this.index;//当前的索引号为主

vartimer=null;//轮播图的定时器

timer=setInterval(autoplay,1000);//开始轮播图定时器

if(key>ulLis.length-1)//后判断

key=1;//因为第6张就是第一张第6张播放下次播放第2张

for(vari=0;i<olLis.length;i++)//先清除所有的

olLis[square].className="current";//留下当前的

//last最后鼠标经过大盒子要停止定时器

timer=setInterval(autoplay,1000);//开始轮播图定时器

<divclass="all"id='all'>

<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>

</html>

以上是刚刚用原生js写的，希望对你有所帮助，用插件（如jquery等）写的话更简单

以上是刚刚用原生js写的，希望对你有所帮助，用插件（如jquery等）写的话更简单

如果还有不懂的地方，可加我，直接联系我

要马上看一下效果的话，直接替换代码最下面的那些图片路径即可！

二、js实现上下滑动轮播

1、在本文中，我们分享了使用JavaScript实现上下滑动轮播的具体代码。整个过程可以分为四个步骤。首先，我们需要遍历所有的元素，使得鼠标点击右侧小图时，图片变亮并且根据偏移值加上红框。点击右边的小图左边会出现对应的图片。其次，利用循环计时器，将ul里面的第一个元素克隆并添加到ulItem之中，实现连续循环滑动。当鼠标进入时，循环滑动停止；当鼠标离开时，继续滑动。最后，设置上下按钮，当第一张图片的offsetTop值为0时，下面按钮出现；当到达底部最后一个元素时，上面按钮出现，下面按钮消失；当在整个元素中间时，上下按钮都出现。每点击一次按钮，移动一个格子，左边图片也相应改变。

2、具体实现代码中，我们首先定义了一些变量，例如righttBtnList、Line、ulItem、Item等。接着，通过window.onload函数获取这些元素，并设置默认的样式。然后，遍历所有的li元素，为它们添加事件。当鼠标进入Item时，清除计时器；当鼠标离开时，重新启动计时器。设置topBtn和bottomBtn的点击事件，当点击上面按钮时，offsetTop增加110，改变Line和itemtabinfo的样式；当点击下面按钮时，offsetTop减少110，同样改变Line和itemtabinfo的样式。ItemMenu的onmouseenter事件会调用checkBtnShow函数，根据offsetTop的值来显示或隐藏按钮。此外，还定义了一些辅助函数，如checkClass和addWhite，用于检查元素是否具有特定的类名，以及为其他li添加相应的类名。

3、最后，我们通过Animate函数实现轮播效果。这个函数首先设置一个计时器，每隔一定时间（speed）执行一次，每次执行时，根据count的值调整ulItem的transform属性，实现图片的滑动效果。当count达到ulItem.children.length-1时，重置count为0，继续循环。

4、以上就是本文的全部内容，希望能对大家学习JavaScript轮播图有所帮助。

三、js实现左右滑动无线加载

题主是否想询问“js怎么实现左右滑动无线加载”。

1、首先，需要在HTML中添加一个容器元素，用于显示滑动加载的内容。可以使用CSS设置容器元素的宽度和高度，并设置overflow属性为hidden，这样可以隐藏容器元素之外的内容。

2、接下来，需要使用JavaScript编写代码，实现滑动加载的功能。可以使用jQuery或其他JavaScript库实现，也可以使用原生JavaScript编写。

3、在JavaScript中，需要监听用户的滑动事件。当用户在容器元素上滑动时，可以使用JavaScript获取滑动的距离和方向，并根据需要加载新的内容，加载新的内容可以通过Ajax请求实现，将获取到的内容添加到容器元素的末尾或开头。

4、为了实现无限加载，需要在加载新内容之前判断容器元素中已有的内容是否已经全部加载完毕。