joy_xiaoboy
- 浏览: 112134 次
-
文章分类
最新评论
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 877转自：http://blog.csdn.net/jbxue1 ... -
js刷新页面方法大全(收藏)
2014-03-22 17:53 558收藏一些js刷新当前页面的方法，这个在编程中经常用得到，正在 ... -
CHECKBOX 的全选、取消及跨页保存的实现方法
2013-10-16 23:36 668CHECKBOX的操作在页面中很常见，比如全选、取消、跨页保存 ... -
jquery右下角弹出提示框的实现代码
2013-10-08 21:16 1260右下角弹出提示框想必大家都有见到过吧，其实有实现方法有很多，本 ... -
javascript实现复选框只能选择一项
2013-10-08 21:13 669分享下javascript实现复选框只能选择一项的方法。 ... -
javascript 函数声明与函数表达式的区别介绍
2013-10-06 23:13 490javascript中的函数声明与函数表达式使用比较频 ... -
javascript自启动函数的问题探讨
2013-10-06 23:11 652javascript的自启动函数。 两段代码： ... -
iframe自适应高度的多种方法方法
2013-09-27 11:14 774不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情 ... -
分享三个iframe自适应高度的例子
2013-09-27 11:10 488iframe自适应高度 本文介绍下，iframe自适应高度的例 ... -
jquery刷新页面的方法
2013-09-27 10:47 823局部刷新： 常见的有以 ... -
jquery根据ID填充文本框的代码示例
2013-07-03 16:54 798根据ID填充文本框的小例子。 需要引入外部jquery框架。 ... -
js实现禁止刷新与回退的代码
2013-05-10 22:59 985禁止页面刷新，用javascript代码即可轻松实现，来看本文 ... -
Js动态添加复选框Checkbox的方法
2013-04-08 22:14 2301Js动态添加复选框Checkbox的实例方法!!! 首先，使 ...
相关推荐
总之，这个jQuery幻灯片代码实例是一个完整的解决方案，包含了HTML结构、CSS样式和JavaScript逻辑，用于创建一个自动滚动的图片幻灯片组件。使用者可以根据自身需求调整CSS样式和JavaScript逻辑，以适应不同的网站...
"jQuery途牛首页定时幻灯片轮播效果"是一个典型的利用JavaScript库jQuery实现的动态展示功能，主要目标是模拟实际生活中幻灯片的切换，让用户在浏览网页时能享受到平滑、自动的图片或内容滚动体验。 首先，jQuery是...
2. **滚动幻灯片**： - 模仿淘宝首页slider效果，通常使用`slideUp()`和`slideDown()`方法实现。当一个幻灯片向上滑动隐藏时，下一个幻灯片会下滑显示。 - 为了实现自动轮播，可以设置定时器（`setInterval()`）...
jQuery左右滚动式图片幻灯片特效下载，看上去非常大气的幻灯片，下边的小圆点有两个作用，1、指示当前图片的位置，2、控制切换图片，当然除了手动控制，本幻灯片还支持自动播放，打开后就自动循环切换图片，以左右...
jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 jquery实现图片可拖动展示的实例下载 jQuery实现拖动滚动条的缩略图排列插件下载 jQuery实现焦点图片Flash自动平滑渐变效果 jQuery实现鼠标移到链接提示...
jQuery 幻灯片插件是网页设计中常用的一种动态效果工具，用于创建吸引人的滑动展示，例如图片轮播、内容滚动或者滑动导航。在本篇中，我们将深入探讨jQuery幻灯片的原理、常见插件以及如何利用它们来增强网站的用户...
总的来说，"jQuery带视觉差效果幻灯片代码"是一个将现代网页技术与创新设计相结合的实例，它展示了如何通过jQuery和Flickity实现动态、吸引人的幻灯片效果，为网页设计带来了新的可能性。无论你是初学者还是经验丰富...
总的来说，"jQuery实用幻灯片特效代码"是一个集成了前端核心技术的实例，展示了如何结合HTML、CSS和JavaScript/jQuery来创建互动且引人入胜的网页元素。开发者可以通过学习和修改这个代码，提升自己的前端技能，同时...
非常漂亮的jquery前端案例源代码（包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动）100个合集： jQuery+CSS实用图片收缩与放大效果插件 jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画...
本文将详细介绍如何使用jQuery来创建一个仿Flash的图片幻灯片播放特效实例。 一、jQuery基础 首先，我们需要了解jQuery的基本用法。jQuery库简化了JavaScript的DOM操作，使得开发者可以更方便地进行元素的选择、...
本实例将聚焦于使用jQuery来制作动态的幻灯片效果，这种效果通常用于展示产品、新闻或者任何需要连续滚动显示的内容。 首先，jQuery幻灯制作涉及到的关键知识点包括： 1. **jQuery选择器**：jQuery提供了丰富的...
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
1. **jQuery选择器**：选择页面上的元素，如滑动图片的容器、当前显示的图片、导航按钮等，是实现幻灯片的基础。例如，`$("#slideshow")`可以选取ID为"slideshow"的元素。 2. **CSS样式控制**：调整幻灯片的布局和...
《jQuery与swiper.js结合实现幻灯片图片视差滚动轮播特效详解》 在Web开发中，动态的、富有交互性的用户体验是提升网站吸引力的重要手段。"jQuery+swiper.js幻灯片图片视差滚动轮播特效.zip"这个压缩包提供了一个...
**jQuery图片幻灯片切换特效详解** 在网页设计中，图片幻灯片是一种常见的动态展示方式，能够吸引用户的注意力并优雅地展示信息。利用jQuery这一强大的JavaScript库，我们可以轻松实现各种丰富的图片轮换效果。本篇...
该压缩包文件“仿迅雷影音...综上所述，这个代码实例涵盖了网页开发中的多个关键知识点，包括jQuery的使用、幻灯片效果实现、全屏设计以及响应式布局等，对于学习和实践前端开发的人员来说，是一个有价值的参考资源。
该资源是一个前端开发的代码包，利用jQuery、CSS3和HTML5技术构建了一种炫酷的全屏垂直滚动切换的幻灯片效果。这个特效在网页设计中常常用于展示产品或服务，提升用户体验，吸引用户的注意力。下面我们将深入探讨这...
Swiper是一款广泛应用于移动设备和桌面浏览器的高性能滑动组件，尤其在前端开发领域中，它作为一款强大的jQuery插件，被广泛用于构建各种类型的滑动效果，如幻灯片、轮播图、画廊等。这个压缩包“jQuery移动手机端...