java 定时轮播图 java轮播图代码

转载

mob64ca13fc5fb6 2023-09-26 11:07:02

文章标签 java 定时轮播图资源文件轮播图 css 文章分类 Java 后端开发

3.5.7 轮播图的基本实现

上一节中，轮播图已经做了一大半，我今天上午抽空把剩下的代码写完了。现在就大概说一下思路吧。

实现上一张和下一张的效果，基本上就是改变ul的margin-left值。为了保证无缝滚动，我们需要在5张图片的首部和尾部各加一张图片。像这样：

接下来，编写移动图片的方法，为了控制下一张和上一张，我们定义一个索引变量index就可以啦。

var index = 0;

获取图片的宽度的数量

var imgwidth = $('.banner .content ul li').width(); //获取轮播图片的宽度var len = $('.banner .content ul li').length - 2//获取总共的图片数量

移动图片的方法

function movePicture(){ $('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){ if(index == len){ $(this).css('masrgin-left',-imgwidth); index = 0; } if(index == -1){ $(this).css('margin-left',-imgwidth * len); index = len - 1; } });}

最后，给按钮绑定事件：

rightBtn.on('click',function(){ index ++; movePicture();});leftBtn.on('click',function(){ index --; movePicture();});

3.5.8 按钮的节流控制

接下来要做一个简单的前台节流，意思就是说，如果有用户闲得无聊，在那拼命的点击下一张的按钮，那么每一次点击都会触发movePicture函数，这个时候，你就会看到图片在那乱跳。

所以，为了避免这种用户的操作，我们需要用js来做一个节流，额，好像是叫节流。我记不太清了。意思就是说，比如你在一秒钟内连续点击了8次，那么我就认为这8次中只有1次是有效的，其他的点击都是误操作。

这样的话，无论你怎么狂点鼠标，我都只调用一次movePicture函数。

首先，我们定义一个空的定时器。

var timer = null;

思路为：

每当我触发按钮的点击事件，就把当前的定时器timer清零，然后又马上给他设置定时内容，比如500毫秒后才进行移动操作。也就是说，如果你狂点鼠标，那么定时器就会被马上清零，然后进入定时器的等待状态。必须要等你满了500毫秒，才进行下面的操作。

原理就是这么简单，这个方式也经常用于登陆按钮上。比如，当你网速很慢的时候，点击登陆，网页没有立即给你跳转页面。有些用户闲着无聊，就在那狂点鼠标，不知道你有没有这么做过呢？

如果没有做好节流，那么就会有大量的请求传递到服务器，会给服务器造成很大的压力。

差不多就是这个意思，上代码：

rightBtn.on('click',function(){ clearTimeout(timer); //定时器清零 timer = setTimeout(function(){ index ++; movePicture(); },500); });leftBtn.on('click',function(){ clearTimeout(timer); //定时器清零 timer = setTimeout(function(){ index --; movePicture(); },500);});

不论我鼠标怎么狂点，它每次都只移动一张图片。

好了，轮播图差不多就聊到这里吧，你可以自己去慢慢完善，时间关系我就不扩展太多了。剩下的就交给你自己去玩耍了，比如，我能不能做一个定时轮播呢，每个5秒钟就自动切换到下一张。

我就不写了。

3.5.9 整合资源文件

现在，我们把这个已经做好的banner区域搬到项目里。

在WebContent目录下新增一个static文件夹，这里存放各种静态资源文件。

java 定时轮播图 java轮播图代码_java 定时轮播图