jQuery使用数组编写图片无缝向左滚动_jquery

jQuery编程实现一组由8幅图组成的图片,进入网页初始时显示前面4张,然后自动向左滚动,直到屏幕显示的是后4张时停止滚动。
下面是jQuery代码:

复制代码 代码如下:

$(document).ready(function() {
var $images = $('#images img');
var imgs = $images.length;
var next_img;
for(var i=0;i<imgs;i++) {
next_img=$images.eq(i);
scroll(next_img);
}
});
//创建一个滚动的函数,使用animate函数自定义动画
function scroll(image) {
image.animate({'left':-485},5000);
};
</script>

时间: 2024-09-20 17:31:25

jQuery使用数组编写图片无缝向左滚动_jquery的相关文章

js图片无缝向左滚动代码

搜索吧a 搜索吧b

jQuery动画效果实现图片无缝连续滚动_jquery

本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

JS图片无缝、平滑滚动代码

 这篇文章主要介绍了JS图片无缝.平滑滚动的实现,需要的朋友可以参考下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用.   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

js图片连续向左滚动代码

提示:您可以先修改部分代码再运行 js图片连续向左滚动代码 说明一 说明二 说明三 说明四 说明五 提示:您可以先修改部分代码再运行

jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery

原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右

jQuery实现鼠标经过图片变亮其他变暗效果_jquery

以下是完整源代码: <!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=&quo

使用jquery.form.js实现图片上传的方法_jquery

本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

jQuery实现宽屏图片轮播实例教程_jquery

本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 构建html整个代码分为三部分: 1.加载部分loadding : 2.图片部分,这里图片只能是4张,有心的朋友再改良下吧: 3.TAB按钮部分,当然这里也只能是4个按钮,也需要改

jQuery文字提示与图片提示效果实现方法_jquery

本文实例讲述了jQuery文字提示与图片提示效果实现方法.分享给大家供大家参考,具体如下: 1.效果如图: 2.文字提示代码: <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = &q