- 浏览: 107183 次
文章分类
最新评论
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>Jquery图片滚动与幻灯片_http://www.jbxue.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的div的class值这里就行---------------------
});
function Xhun(_box) {
var box_frame = _box + " div ul";
var box_div = _box + " div";
$(_box).find("ul").wrap("<div></div>"); //添加一个div,来控制偏移量
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中,为了实现无缝循环
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中,为了实现无缝循环
var li_size = $(_box).find("li").size(); //获取li的个数
var li_width = $(box_frame).children("li").width(); //获取li的宽度
var box_div_width = $(box_div).width(li_size * li_width * 5); //设置div的宽度
$(box_frame).css("float", "left");
var dd = setInterval(gd, 30);
function gd() {
var position = $(_box).scrollLeft(); //scrollLeft()是获取对象的水平偏移量
$(_box).scrollLeft(position + 1);
if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); } //判断位移是否大于ul的总长度
}
$(_box).mouseleave(function () {
dd = setInterval(gd, 30);
}).mouseenter(function () {
clearInterval(dd);
});
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style: none; }
li { float: left; margin-left: 10px; width: 100px; }
img { width: 100px; height: 100px; }
.a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }
</style>
</head>
<body>
<div class="a">
<ul>
<li><a href="#">
<img src="Wife1.jpg" alt="img" title="img" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" alt="img" title="img" /></a></li>
</ul>
</div>
</body>
</html>
2、幻灯片
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片切换_http://www.jbxue.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
slide(".frame"); //----------------------只需要修改 ”.frame" (就是最大的div的class值这里就行---------------------
});
function slide(cls) {
$(cls).find("ul").wrap("<div></div>");
$(cls+" div").attr("class","iframe");
var li = $(cls).find("li").size();//统计多少张图片
var li_width = $(cls).find("li").width(); //获取li的宽度
$(cls + " div").children("ul").width(li_width * li);//设置宽度,使图片排成一排
var s = "<ul class='button'>";//生成li的按钮
for (var i = 0; i < li; i++) {
s += "<li>" + (i + 1) + "</li>";
}
s += "</ul>";
$(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面
var _i = 0;//当前的编号
$(cls).find(".button li").each(function (i) {
//生成按钮点击事件
$(this).click(function () {
_i = i;
$(this).attr("class", "on").siblings().removeAttr("class");//设置class,没必要再多加一个off
$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动
});
}).eq(0).click();
function tt() {//定时器函数
_i++;
_i = _i % li;
$(cls).find(".button li").eq(_i).click();//自动点击切换图片
}
var t = setInterval(tt, 3000);//定时器
$(cls).hover(function () {
clearInterval(t);//鼠标经过清除定时器,离开时又触发
}, function () {
t = setInterval(tt, 3000);
})
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
li, ul { list-style: none; margin: 0; padding: 0; }
.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这里需要修改最大div的宽度和高度*/
.iframe { overflow: hidden; width: 280px; height: 280px; } /*这里需要修改该div的宽度和高度*/
.iframe ul li { float: left; width: 280px; } /*这里需要修改li的宽度*/
.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
.button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
.button .on { color: #000; background: #fff; }
</style>
</head>
<body>
<!-- 这里要按照这样的格式来写 -->
<div class="frame">
<ul>
<li><a href="#">
<img src="Wife1.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife3.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife4.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife5.jpg" width="280" height="280" alt="img" /></a></li>
</ul>
</div>
</body>
</html>
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>Jquery图片滚动与幻灯片_http://www.jbxue.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的div的class值这里就行---------------------
});
function Xhun(_box) {
var box_frame = _box + " div ul";
var box_div = _box + " div";
$(_box).find("ul").wrap("<div></div>"); //添加一个div,来控制偏移量
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中,为了实现无缝循环
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中,为了实现无缝循环
var li_size = $(_box).find("li").size(); //获取li的个数
var li_width = $(box_frame).children("li").width(); //获取li的宽度
var box_div_width = $(box_div).width(li_size * li_width * 5); //设置div的宽度
$(box_frame).css("float", "left");
var dd = setInterval(gd, 30);
function gd() {
var position = $(_box).scrollLeft(); //scrollLeft()是获取对象的水平偏移量
$(_box).scrollLeft(position + 1);
if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); } //判断位移是否大于ul的总长度
}
$(_box).mouseleave(function () {
dd = setInterval(gd, 30);
}).mouseenter(function () {
clearInterval(dd);
});
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style: none; }
li { float: left; margin-left: 10px; width: 100px; }
img { width: 100px; height: 100px; }
.a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }
</style>
</head>
<body>
<div class="a">
<ul>
<li><a href="#">
<img src="Wife1.jpg" alt="img" title="img" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" alt="img" title="img" /></a></li>
</ul>
</div>
</body>
</html>
2、幻灯片
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片切换_http://www.jbxue.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
slide(".frame"); //----------------------只需要修改 ”.frame" (就是最大的div的class值这里就行---------------------
});
function slide(cls) {
$(cls).find("ul").wrap("<div></div>");
$(cls+" div").attr("class","iframe");
var li = $(cls).find("li").size();//统计多少张图片
var li_width = $(cls).find("li").width(); //获取li的宽度
$(cls + " div").children("ul").width(li_width * li);//设置宽度,使图片排成一排
var s = "<ul class='button'>";//生成li的按钮
for (var i = 0; i < li; i++) {
s += "<li>" + (i + 1) + "</li>";
}
s += "</ul>";
$(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面
var _i = 0;//当前的编号
$(cls).find(".button li").each(function (i) {
//生成按钮点击事件
$(this).click(function () {
_i = i;
$(this).attr("class", "on").siblings().removeAttr("class");//设置class,没必要再多加一个off
$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动
});
}).eq(0).click();
function tt() {//定时器函数
_i++;
_i = _i % li;
$(cls).find(".button li").eq(_i).click();//自动点击切换图片
}
var t = setInterval(tt, 3000);//定时器
$(cls).hover(function () {
clearInterval(t);//鼠标经过清除定时器,离开时又触发
}, function () {
t = setInterval(tt, 3000);
})
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
li, ul { list-style: none; margin: 0; padding: 0; }
.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这里需要修改最大div的宽度和高度*/
.iframe { overflow: hidden; width: 280px; height: 280px; } /*这里需要修改该div的宽度和高度*/
.iframe ul li { float: left; width: 280px; } /*这里需要修改li的宽度*/
.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
.button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
.button .on { color: #000; background: #fff; }
</style>
</head>
<body>
<!-- 这里要按照这样的格式来写 -->
<div class="frame">
<ul>
<li><a href="#">
<img src="Wife1.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife3.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife4.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife5.jpg" width="280" height="280" alt="img" /></a></li>
</ul>
</div>
</body>
</html>
发表评论
-
js中递归函数的使用方法例子
2014-08-25 16:54 843转自:http://blog.csdn.net/jbxue1 ... -
js刷新页面方法大全(收藏)
2014-03-22 17:53 477收藏一些js刷新当前页面的方法,这个在编程中经常用得到,正在 ... -
CHECKBOX 的全选、取消及跨页保存的实现方法
2013-10-16 23:36 629CHECKBOX的操作在页面中很常见,比如全选、取消、跨页保存 ... -
jquery右下角弹出提示框的实现代码
2013-10-08 21:16 1227右下角弹出提示框想必大家都有见到过吧,其实有实现方法有很多,本 ... -
javascript实现复选框只能选择一项
2013-10-08 21:13 628分享下javascript实现复选框只能选择一项的方法。 ... -
javascript 函数声明与函数表达式的区别介绍
2013-10-06 23:13 452javascript中的函数声明与函数表达式使用比较频 ... -
javascript自启动函数的问题探讨
2013-10-06 23:11 570javascript的自启动函数。 两段代码: ... -
iframe自适应高度的多种方法方法
2013-09-27 11:14 740不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情 ... -
分享三个iframe自适应高度的例子
2013-09-27 11:10 442iframe自适应高度 本文介绍下,iframe自适应高度的例 ... -
jquery刷新页面的方法
2013-09-27 10:47 787局部刷新: 常见的有以 ... -
jquery根据ID填充文本框的代码示例
2013-07-03 16:54 763根据ID填充文本框的小例子。 需要引入外部jquery框架。 ... -
js实现禁止刷新与回退的代码
2013-05-10 22:59 919禁止页面刷新,用javascript代码即可轻松实现,来看本文 ... -
Js动态添加复选框Checkbox的方法
2013-04-08 22:14 2205Js动态添加复选框Checkbox的实例方法!!! 首先,使 ...
相关推荐
jQuery左右滚动式图片幻灯片特效下载,看上去非常大气的幻灯片,下边的小圆点有两个作用,1、指示当前图片的位置,2、控制切换图片,当然除了手动控制,本幻灯片还支持自动播放,打开后就自动循环切换图片,以左右...
jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 jquery实现图片可拖动展示的实例下载 jQuery实现拖动滚动条的缩略图排列插件下载 jQuery实现焦点图片Flash自动平滑渐变效果 jQuery实现鼠标移到链接提示...
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
jquery仿flash的图片幻灯片播放特效实例完整版.rar
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
在网站上常用到的 导航菜单 幻灯片 焦点图 公告跑马灯 图片滚动 内容切换等 只需要一个cjslip js即可轻松解决 使用无门槛 无需懂得js代码编写也一样轻松使用 ">这是一个重量轻但功能强大的jQuery插件 更多实例效果...
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
一款流畅度像播放视频那样的jquery幻灯片特效插件,附用法源码,其实也就是大家常见的图片切换,不过它在切换完成后并没有静止图像,而是在慢慢变换图像区域,来回滚动,将整个图像按区域分别展示完成,也就是一边滚...
Java二进制IO类与文件复制操作实例,好像是一本书的例子,源代码有的是独立运行的,与同目录下的其它代码文件互不联系,这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...
jquery Slicebox 3D图片展示,用到了jquery.easing.1.3.js、jquery.slicebox.min.js、jquery.slicebox.js等文件,展示了各个方向上的图片滚动切换以及过渡效果,自带的实例非常丰富,兼容IE8以下浏览器,及火狐和...
13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 ...
Java二进制IO类与文件复制操作实例,好像是一本书的例子,源代码有的是独立运行的,与同目录下的其它代码文件互不联系,这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...
左右滚动风格的淘宝双11图片焦点图轮播特效,同样...左下角显示控制按钮,那些数字就是控制幻灯片手动播放的,右侧显示缩略图,不过缩略图没有添加动作,并不能控制大图片切换,我是在Chrome中测试的,或许在IE中可以。
而JQuery的一款插件fullpage.js,可以实现全屏滚动,非常流行的效果,兼容性IE8+兼容性不错,能够兼容多种浏览器。 主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个会调函数 支持手机、平板触摸事件 支持CSS...