jQuery动画效果图片轮播实现（附代码）-js教程-PHP中文网

首页

web前端

js教程

jQuery动画效果图片轮播实现（附代码）

php中世界最好的语言

Apr 24, 2018 am 11:22 AM

jquery图片实现

这次给大家带来jQuery动画效果图片轮播实现（附代码），jQuery动画效果图片轮播实现的注意事项有哪些，下面就是实战案例，一起来看一下。一、需求分析

1. 提供很多尺寸相等的图片，一排紧挨着显示。

2. 左右有两个切换按钮，用来控制显示上一张还是下一张。

3. 右下方有指示器"小圈圈"，用来提示显示到第几个图片；也可以点击它，进行图片的切换。

4. 每隔一个固定的时间，图片会自动滚动。

5. 当鼠标放到图片上面的时候，会停止自动滚动；当鼠标离开后，再经过固定间隔时间后，又会自动播放。

二、代码剖析

1. 用html代码搭建框架

<body> 
 <p id="container"> 
  <ul id="content"> 
   <li><a href="#"><img src="images/0.jpg"/></a></li> 
   <li><a href="#"><img src="images/1.jpg"/></a></li> 
   <li><a href="#"><img src="images/2.jpg"/></a></li> 
   <li><a href="#"><img src="images/3.jpg"/></a></li> 
   <li><a href="#"><img src="images/4.jpg"/></a></li> 
  </ul> 
  <p id="btn"> 
   <p id="leftBtn"></p> 
   <p id="rightBtn"></p> 
  </p> 
  <ul id="indicator"> 
   <li class="current"></li> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li></li> 
  </ul> 
 </p> 
</body>

1> id为container的p，是整个轮播效果的容器。
2> id为content的ul，里面存放的内容就是界面上面显示的滚动的图片。

3> id为btn的p，里面的两个子元素就是用来切换上一张还是下一张的按钮。

4> id为indicator的ul，用来显示指示器。

2. CSS代码改变显示样式

1> 下面两句代码，清除掉浏览器默认的间隙。

*{margin: 0; padding: 0;}

2> 设置父容器的样式。

#container 
{ 
 width:560px; 
 height: 300px; 
 margin: 100px auto; 
 position: relative; 
 overflow: hidden; 
}

由于显示的图片大小就是 560 X 300, 所以这里的父容器的大小也设置这么大，这里设置的margin，就是让父容器水平居中，垂直距离顶部100px，overflow表示如果显示的子元素超出了container的范围，就隐藏掉(注：由于显示的图片是一排显示的，如果不加上overflow: hidden这个属性的话，就露馅了，去掉这个属性的话，效果如下：)。

也就是说，如果不加上overflow: hidden 这个属性的话，所有的图片就会一排全部显示出来了。

最后一个就是定位属性 position: relative; 由于container是父容器，所以应该设置为relative，而它的所有的子元素要进行绝对定位的话，他们的position应该设置为absolute。这就是所谓的 "子绝父相" 原则。在绝对定位中都这么使用。

3> 设置content的样式

#container #content 
{ 
 list-style: none; 
 width: 10000px; 
 position: absolute; 
 left:0; 
 top:0; 
} 
 
#container #content li 
{ 
 float:left; 
} 
 
#container #content li img 
{ 
 border: 0; 
}

注意到，content的width属性设置为了10000px，这是为了保证它能够存放足够多的图片。默认情况下，content中所有的li是块级元素，也就是他们会上下排列；所以加了一句float:left；让他们左右排列。而父级元素container设置了overflow: hidden, 所以这些左右排列的图片只能看到第一个。
4> 设置左右切换按钮的样式

#container #leftBtn 
{ 
 position: absolute; 
 width:45px; 
 height: 45px; 
 top:108px; 
 left: 20px; 
 background: url(images/icons.png) no-repeat 0 0; 
 cursor: pointer; 
} 
 
#container #rightBtn 
{ 
 position: absolute; 
 width:45px; 
 height: 45px; 
 top:108px; 
 right: 20px; 
 background: url(images/icons.png) no-repeat 0 -45px; 
 cursor: pointer; 
}

注意到，在获取左右按钮的时候，他们是取自同一张图片icons.png。只是图片截取的位置不一致，这就是所谓的"精灵"。就是为了减小图片占用大小，而把很多的小icon放置在一张图片上面，然后通过定位截取的办法，获取想要的部分。（注：关于怎样定位icon？ 1. 写代码慢慢调节；2. 用精灵裁切定位软件，如：CSS Sprites等）。图片设计大致如下：

这张图片中，不仅包含了左右切换按钮，指示器的按钮也一并给出了，所以在书写指示器按钮的css代码时候，同样也可以使用这张图片。

4> 设置指示器的样式

#container #indicator 
{ 
 position: absolute; 
 right: 50px; 
 list-style: none; 
 bottom: 12px; 
} 
 
#container #indicator li 
{ 
 float: left; 
 cursor: pointer; 
 margin-left: 20px; 
 width:14px; 
 height: 14px; 
 background: url(images/icons.png) no-repeat -23px -127px; 
} 
 
#container #indicator li.current 
{ 
 background-position: -9px -125px; 
}

代码中 #indicator li 设置的background的图片就是上图中空心的小圆圈，而 #indicator li.current 设置的background的图片就是上图中实心的大圆圈。所以刚开始的时候，默认选中第一个。
3. 用JQuery添加交互效果

1> 切换下一张(点击右边按钮)

$(function(){ 
 
 // 总的图片个数(用代码获取个数，扩展性比较强) 
 var totalCount = $("#container #content li").length; 
 // 当前处于第几个图片 
 var nowImage = 0; 
 $("#container #btn #rightBtn").click(rightBtnClick); 
<span style="white-space:pre"> </span>function rightBtnClick(){ 
  if(!$("#container #content").is(":animated")){ 
   if(nowImage == totalCount - 1){ 
   <span style="white-space:pre"> </span>nowImage = 0; 
<span style="white-space:pre">    </span>$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
<span style="white-space:pre">    </span>$("#container #content").animate({"left": -560 * (totalCount -1 )}, 1000, function(){ 
    $("#container #content").css("left",0); 
   }); 
  } else { 
   nowImage++; 
   changeImage(); 
  } 
 } 
} 
});

changeImage 函数

function changeImage(){ 
 if(!$("#container #content").is(":animated")){ 
 <span style="white-space:pre"> </span>$("#container #content").animate({"left": -560 * nowImage}, 1000); 
  $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
 } 
}

代码中，当DOM元素加载完毕，就执行了$('#container #btn #rightBtn').click(rightClick), 也就是立刻执行了切换图片操作。在rightBtnClick函数中，先进行了content是否正在进行动画的判断，这样做的目的：防止动画在执行的过程，用户又进行强制的执行其他动画，会产生干扰，最终导致动画效果混乱。

如果有的话，则将标志变量nowImage指向下一个图片，并且执行changeImage函数中的代码：1. 将content中的所有图片左移一个图片大小的宽度；2.将指示器的图片也移动到对应的位置。

如果没有的话，并且图片现在是显示到了最后一个，则先执行动画，执行完毕后，立刻将content中所有的图片内容拉回到第一个，但是这里任然会穿帮，因为当前图片显示为最后一个后，你继续执行动画，是没有任何效果的，所以在这个动画执行期间是没有任何反应的，当动画时间执行完毕后，会突然在界面上出现第一个图片。

设计思想：为了解决这个问题，解决方案就是在这些图片之后追加一个与第一张相同的图片；这就是传统轮播的主要设计思想。所以当图片滚动到倒数第二章的时候；首先执行滚动动画，也就是滚动到预先准备的与第一张一模一样的图片，看起来似乎是滚动到了第一张，其实不然。在动画执行完毕后，立刻将content中所有的图片拉回到第一张。流程图如下：

所以此刻修改一点代码，在代码的开头追加第一张图片

/*克隆轮播的第一个li追加到最后*/ 
$("#container #content li").first().clone().appendTo($("#container #content"));

在rightBtnClick代码中，将nowImage == totalCount - 1 修改为 nowImage == totalCount - 2。
2> 切换上一张(点击左边按钮)

代码与点击右边按钮类似

$("#container #btn #leftBtn").click(function(){ 
 if(!$("#container #content").is(":animated")){ 
  if(nowImage == 0){ 
   nowImage = totalCount - 2; 
   $("#container #content").css("left",-560 * (totalCount - 1)); 
 
   $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
 
   $("#container #content").animate({"left": -560 * nowImage}, 1000); 
  } else { 
   nowImage--; 
   changeImage(); 
  } 
 } 
});

3> 点击指示器按钮进行图片切换
它的设计思路，就是获取图片的索引，然后调用changeImage函数就可以了。

$("#container #indicator li").click(function(){ 
 nowImage = $(this).index(); 
 changeImage(); 
});

4> 添加定时执行动画的功能
也就是定时的调用点击右边按钮的代码；添加如下代码:

var timer = setInterval(rightBtnClick, 2000);

5> 鼠标悬停在图片上，停止滚动；鼠标离开图片后，继续滚动
也就是对定时器进行开启和关闭；添加如下代码:

$("#container").mouseenter(function(){ 
 clearInterval(timer); 
}).mouseleave(function(){ 
 timer = setInterval(rightBtnClick, 2000); 
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现图片轮播幻灯片效果

jquery拖拽效果实现方法

以上是jQuery动画效果图片轮播实现（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。

See all articles