学长给我们稍微将了一下jquery的 图片自动切换 幻灯片效果的原理，然后，在网上搜了一个案例，自己写了些，不错。
具体代码见下：
下载源码地址：
https://skydrive.live.com/redir.aspx?cid=7be31a2a98467d64&resid=7BE31A2A98467D64!103
<!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>picture</title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <!-自己添加jquery的文件->
<script type="text/javascript">
$(document).ready(function () {
var length = $("#banner_ul li").length;
//alert(length);
//alert($("#banner_ul li").eq(1).clone().find("img").attr("src"));
$("#test").html($("#banner_ul li").eq(0).clone());
var t = 0;
$("#test_list li").click(function () {
$(this).parent().children().removeClass("open");
$(this).addClass("open");
// console.log($(this).attr("value"));
var tt = $(this).attr("value") - 1;
if (tt != t) {
t = tt;
}
$("#test").find("img").filter(":visible").fadeOut(500).parent().html($("#banner_ul li").eq(t).clone().fadeIn(1000));
});
setInterval(function showAuto() {
t++;
if (t == length) {
t = 0;
console.log("从头做起");
}
$("#test_list li").eq(t).trigger('click');
//console.log($("#test_list li").eq(t));
//$("#test").find("img").filter(":visible").fadeOut(500).parent().html($("#banner_ul li").eq(t).clone().fadeIn(1000));
//$("#test").html($("#banner_ul li").eq(t).clone()).find("img").fadeIn(1000);
}, 5000);
})
function showAuto() {
}
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#banner
{
position: relative;
border: 1px solid gray;
margin: 200px 100px 200px 400px;
height: 286px;
width: 478px;
overflow: hidden;
}
#banner_ul
{
position: absolute;
list-style-type: none;
display: none;
}
#test
{
position: absolute;
height: 286px;
width: 478px;
overflow: hidden;
list-style-type: none;
z-index: 1000;
}
#test_bg
{
position: absolute;
width: 478px;
height: 30px;
z-index: 1001;
bottom: 0;
background: #000;
opacity: 0.1; /*FF,Chrome，safari,opera浏览器*/
filter: alpha(opacity=10); /*IE浏览器*/
}
#test_info
{
position: absolute;
height: 30px;
left: 5px;
z-index: 1002;
bottom: 0;
color:blue;
font-size:18px;
}
#test_list
{
position: absolute;
height: 30px;
right: 5px;
z-index: 1002;
bottom: 0px;
list-style-type: none;
}
#test_list li
{
float: left;
display: block;
color: Blue;
border: 1px solid white;
padding:0 8px;
cursor:pointer;
}
.open
{
background-color:Red;
}
</style>
</head>
<body>
<div id="banner">
<ul id="banner_ul"> <!--几张循环的图片-->
<li>
<img src="../images/imgs/p1.jpg" alt="1" /></li>
<li>
<img src="../images/imgs/p2.jpg" alt="2" /></li>
<li>
<img src="../images/imgs/p3.jpg" alt="3" /></li>
<li>
<img src="../images/imgs/p4.jpg" alt="4" /></li>
</ul>
<div id="test"> <!--显示图片的位置-->
</div>
<div id="test_bg"> <!--显示信息的背景图层-->
</div>
<div id="test_info"> <!--显示图片的一些信息-->
Welcome to Jquery Picture!
</div>
<ul id="test_list"> <!-- 图片的编号列表-->
<li class="open" value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
总的来说，"jQuery图片垂直切换幻灯片代码"是一个将jQuery的动态效果与Bootstrap的布局优势相结合的实例，它展示了如何通过JavaScript和前端框架实现创新的用户体验。对于开发者来说，理解并掌握这样的代码有助于...
使用jQuery的`.fadeIn()`和`.fadeOut()`方法来平滑地切换幻灯片，增强视觉效果。 在提供的压缩包文件中，"rhinoslider-1.05"可能是一个已经封装好的jQuery幻灯片插件。Rhino Slider是一个流行的jQuery幻灯片插件，...
3. **jQuery初始化**：在页面加载完成后，使用jQuery的选择器找到所有的幻灯片元素，然后设置初始状态，如隐藏或显示第一个幻灯片，设置定时器来自动切换幻灯片。 4. **动画效果**：jQuery的`.animate()`方法可以...
"jQuery简洁版图片叠加切换幻灯片效果"是一款专为此目的设计的JavaScript插件，它通过巧妙的图片叠加手法，为用户提供了一种独特且富有创意的图片切换体验。 首先，我们要理解jQuery的核心概念。jQuery是一个快速、...
在网页设计中，图片自动切换或幻灯片切换效果是一种常见的功能，用于展示一组图片，如产品展示、新闻轮播或者背景图像等。这个效果可以让用户在不进行任何操作的情况下，网页上的图片能够按照预设的时间间隔自动进行...
在网页设计中，图片轮播或幻灯片效果是...总的来说，实现JS图片自动切换幻灯片效果涉及到HTML布局、CSS样式以及JavaScript逻辑控制。通过理解这些基础知识并结合实践，你可以创建出功能丰富、交互性强的图片轮播组件。
在这个"jQuery图片交叉切换幻灯片代码"压缩包中，包含了一个使用jQuery实现的动态图片幻灯片展示功能。这个功能在网站上经常被用于产品展示、新闻轮播或任何需要连续切换图片的场景。 首先，我们要理解HTML5在这个...
本文将深入探讨“jQuery 3D响应式幻灯片带左右按钮的图片滑动切换效果”这一主题，包括其核心原理、实现方法以及如何利用jQuery和CSS3实现3D视觉效果。 首先，jQuery 3D幻灯片的核心在于通过模拟3D空间中的物体转换...
【jQuery带视差切换效果幻灯片代码】是一款利用JavaScript库jQuery实现的创新性滑动展示效果，尤其适用于网站的首页或产品展示区域，能够吸引用户的注意力并提供丰富的交互体验。这种视差切换效果是通过调整背景元素...
标题中的“jquery实现banner效果图切换幻灯片效果”是指使用jQuery库来创建一个网页上的轮播图（也称为焦点图）功能。这个功能通常用于网站的首页，展示多个广告、图片或信息，以吸引用户的注意力并提供交互体验。...
在网页设计中，jQuery图片幻灯片是一种常见且实用的元素，它能够为网站增添动态效果，提升用户体验。jQuery库的轻量级和强大的API使其成为实现这种功能的理想选择。本篇文章将深入探讨jQuery图片幻灯片的工作原理、...
`slideSwitch`函数负责切换幻灯片，而`slideUp`和`slideDown`方法则实现了图片的上滑和下滑效果。我们还添加了一个点击事件监听器，以便用户可以通过滑动鼠标滚轮手动切换幻灯片。 最后，我们设置了自动播放功能，...
3. **jQuery初始化**：在页面加载完成后，使用jQuery选择器选取所有幻灯片图片，并设置初始的显示图片。可以使用`.eq()`函数选取特定索引的元素，`.show()`函数显示图片。 4. **动画效果**：应用`.fadeIn()`和`....
为了实现这一效果，我们需要设置幻灯片容器的宽度为100%，并确保其子元素（如幻灯片图片）也能适应容器宽度。 ### 4. 无缝切换 无缝切换是指在幻灯片从一张图片过渡到下一张时，没有明显的停顿或跳跃感。这通常...
在创建自适应图片幻灯片时，jQuery提供了方便的API，如`slideUp()`, `slideDown()`, `fadeIn()`, `fadeOut()`等，用于实现平滑的图片切换效果。 2. 自适应设计：自适应网页设计（Responsive Web Design, RWD）是指...
本篇文章将详细讲解基于jQuery实现的淡入淡出幻灯片图片切换特效。 首先，我们需要了解jQuery的核心概念。jQuery通过一个简洁的语法封装了大量的JavaScript方法，使得开发者可以更高效地实现页面元素的选择、操作和...
【jQuery图片及文字幻灯片】是一种常见的网页动态效果，尤其适用于展示产品、新闻或介绍内容。jQuery，作为JavaScript的一个库，以其简洁的语法和丰富的功能，极大地简化了网页交互的实现。本教程将深入讲解如何利用...
3. **幻灯片切换**：幻灯片切换是一种常见的网页交互元素，用于展示一系列内容，如图片、文本或视频，通过定时自动切换或用户手动触发来呈现。它通常包含前进和后退按钮，以及指示当前幻灯片位置的小圆点。 4. **...