带有控制按钮的图片滚动

上一次写了一个图片自动滚动功能，没有左右按钮控制的功能。今天花了点时间，写了一个带有左右按钮控制的图片滚动效果。所谓自动滚动，原理就是周期性的执行一个效果。在js中，通常是用setInterval这个函数来执行的，setInterval(func,speed),func表示所要执行的函数，speed表示周期时间，通常用毫秒来表示。

先看一下效果图：

这里一共有5张图片，而现在为什么只显示4张呢？这里用了css的overflow属性控制一下，我们不可能把所有要滚动的图片都显示出来，那样滚动就毫无意义了，用户不要滚动，就可以看到所有的图片了，也影响页面图片的加载时间。所以要把一些图片隐藏起来。

overflow的作用就是子级的宽度超过了父级的宽度，那么子级超过的宽度为隐藏起来，当然内容也会隐藏起来。

.subBox {padding: 0;margin: 0 10px;width: 830px;overflow: hidden;
}.subBox ul {width: 100000px;
}

还有一点要做到无间隙的滚动，子级的宽度很宽，可显示区域如果滚动完了，就会出现空白，这里也考虑到了这一点，解决的方式是：向左滚动，就把最后一张图片放到最前面去，向右滚动就把第一张图片放到后面去。

obj.find("li:last").prependTo(obj);//向左滚动
obj.find("li:first").appendTo(obj);//向右滚动

因为是自动滚动的，当用户向鼠标移到图片上时让他停止，这里就用到了clearInterval功能，表示停止周期性滚动

clearInterval(moving);

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带有控制按钮的图片滚动</title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){var left = $("#left");var right = $("#right");var obj = $(".subBox ul");var w = obj.find("li").innerWidth();left.click(function(){obj.find("li:last").prependTo(obj);obj.css("margin-left",-w);obj.animate({"margin-left": 0});});right.click(function(){obj.animate({"margin-left": -w},function(){obj.find("li:first").appendTo(obj);obj.css("margin-left","0");});});var moving = setInterval(function(){left.click()},2000);obj.hover(function(){clearInterval(moving);},function(){moving = setInterval(function(){left.click()},2000);})});
</script>
<style type="text/css">
* {margin: 0;padding: 0;list-style: none;
}.box {margin: 10px auto;width: 880px;text-align: left;
}.floatL {padding-top: 45px;float: left;
}.subBox {padding: 0;margin: 0 10px;width: 830px;overflow: hidden;
}.subBox ul {width: 100000px;
}.subBox ul li {width: 210px;float: left;
}</style>
</head>
<body>
<div class="box"><div class="floatL" id="left"><img src="left.gif" alt="" /></div><div class="subBox floatL"><ul><li><img src="0.jpg" alt="" /></li><li><img src="1.jpg" alt="" /></li><li><img src="2.jpg" alt="" /></li><li><img src="3.jpg" alt="" /></li><li><img src="4.jpg" alt="" /></li></ul></div><div class="floatL" id="right"><img src="right.gif" alt="" /></div>
</div>
</body>
</html>

效果下载地址：demo下载

如有不足之处，还请大家提出宝贵意见，谢谢

转载于:https://www.cnblogs.com/gaoyubao/archive/2012/06/21/2557502.html

带有控制按钮的图片滚动相关推荐

Android高级图片滚动控件，编写3D版的图片轮播器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...
Android图片滚动，加入自动播放功能，使用自定义属性实现，霸气十足！
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8796877 大家好,记得上次我带着大家一起实现了一个类似与淘宝客户端中带有的图片滚 ...
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
jquery实现多行文字图片滚动效果
基于jquery的实现多行文字图片滚动的效果代码,如果我们在论坛公告等等这些实例了,下面我来给各位朋友介绍介绍. 1 <div id="scrollDiv"> 2 &l ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
jQuery 图片滚动效果
2019独角兽企业重金招聘Python工程师标准>>> 使用了网上的一个JS插件,配置起来相当灵活好用,效果如下: 下面整理下使用的过程: 1.在插件网站http://www.gma ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
php图片左右滚动代码怎么写,css图片滚动代码怎么写？轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
div 图片滚动 / 文字滚动
今天研究了一下图片滚动,网上有很多可以使用的例子,所以先是找了一个用的是表格布局的,如下: <!DOCTYPE html> <html xmlns="http://www. ...

带有控制按钮的图片滚动

带有控制按钮的图片滚动相关推荐

最新文章

热门文章