jquery实现图片滚动效果的简单实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片自动无缝滚动</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
ul,li { list-style: none;margin: 0; padding: 0;}
li { float: left;}
img { width: 100px; height: 100px; padding:0 2px}
.a { width: 400px; height:100px;margin: 0 auto; overflow: hidden; border: 1px solid red;}
.aa { width: 200px; height:100px;margin: 50px auto 0 auto; overflow: hidden; border: 1px solid red;}
</style>
</head>
<body>
<div class="a">
<ul>
<li>
<a href="#"><img alt="" src=" images/1.jpg"/>
</a>
</li>
<li >
<a href="#"><img alt="" src="images/2.png">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/3.jpg">
</a>
</li>
<li>
<a href=""><img alt="" src="images/4.jpg">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/5.jpg">
</a>
</li>
</ul>
</div>
<div class="aa">
<ul>
<li>
<a href="#"><img alt="" src=" images/1.jpg"/>
</a>
</li>
<li >
<a href="#"><img alt="" src="images/2.png">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/3.jpg">
</a>
</li>
<li>
<a href=""><img alt="" src="images/4.jpg">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/5.jpg">
</a>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery.fn.extend({
pic_scroll:function (){
$(this).each(function(){
var _this=$(this);//存储对象
var ul=_this.find("ul");//获取ul对象
var li=ul.find("li");//获取所有图片所有的li
var w=li.size()*li.width();//统计图片的长度
li.clone().prependTo(ul);//克隆图片一份放入ul里
ul.width(2*w);//设置ul的长度，使所有图片排成一排
var i=1,l;
_this.hover(function(){i=0},function(){i=1});//鼠标经过时设置i=0达到鼠标经过停止效果
setInterval(function(){
//定时滚动函数
l = _this.scrollLeft();
if (l < w) {
_this.scrollLeft(l+i);
} else {
_this.scrollLeft(0);
}
},20);
})
}
});
$(document).ready(function(){
$(".a,.aa").pic_scroll();//多个地方使用
})
</script>
</body>
</html>
相关推荐
-
jQuery bxCarousel实现图片滚动切换效果示例代码
BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是否
-
jquery图片滚动放大代码分享（1）
本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,带有左右箭头,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图: ----------------------查看效果下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-e
-
一个jquery实现的不错的多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars
-
JQuery 图片滚动轮播示例代码
完整的项目在附件中 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>图片切换</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" > va
-
jquery实现图片平滑滚动详解
本文实例为大家分享了jquery图片平滑滚动效果的具体代码,供大家参考,具体内容如下 随便写了个DOM,没有美观性,见谅 原理: 1.定义两组ul列表放图,第一个ul放5张图,第二个ul为空 2.为什么要用两个ul?因为要用到jQuery的克隆方法clone().把第一个ul的图片全部克隆到第二个ul中,形成并列无缝滚动效果 3..box设置为绝对定位,.wrap设置为相对定位 4.设置定时器,让.box的left值一直减-,当left值大于第一个ul的长度时,让他left等于0,然后再重新重置
-
jQuery+css实现图片滚动效果(附源码)
源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设
-
jquery实现多行文字图片滚动效果示例代码
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars
-
jQuery图片滚动图片的效果(另类实现)
需求 : 图片切换的时候下一屏不允许出现空白的项,换句话说就是 : 1.当移动的最后一屏移动的个数小于要展示的个数的时候 ,只移动(展示个数-最后一屏的个数的)差值. 举个例子: 每一屏都要展示7个,但总个数才10个,滚动到下一屏时候用户看到的还是7个,这个时候需要移动的是三个 这个效果是基于jQuery写的,只是想纪念下自己的学习 话不多说了,贴代码 复制代码 代码如下: (function( $ ){ var slider = function( elem , args ){
-
jquery图片滚动放大代码分享（2）
本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq
-
Jquery图片滚动与幻灯片的实例代码
1.图片滚动 复制代码 代码如下: <!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> <title>&l