jQuery实现简单的图片轮播（二）-增加左右（或上下）翻页功能

落日映苍穹つ 2022-08-06 10:17 161阅读 0赞

## 1. 需求 ##

上一篇文章《jQuery实现简单的图片轮播》实现的效果中，图片只能从右边出现，不能从左右都出现，所以本文将实现图片从左右（或上下）都可以出现的功能。

为避免与上一篇文章过多重复，本文中实现了图片上下翻页出现的功能。

## 2. 思路： ##

首先通过jQuery的选择器找到之前选中的li元素在li元素集合中的索引位置，然后同样通过jQuery的选择器找到当前选中的li元素在li元素集合中的索引位置，最后对两者进行比较。

如果当前索引位置 = 之前索引位置，则什么都不做；

如果当前索引位置 > 之前索引位置，则向上翻页；

如果当前索引位置 < 之前索引位置，则向下翻页。

## 3. 实现代码    ##

### 3.1 文件结构 ###

![Center][]

![Image 1][]

![Image 1][]

### 3.2 html代码 ###

<span style="white-space:pre">	</span><h1 style="text-align:center;">轮播图Demo</h1>
    	<div class="box">
    		<ul class="pic-box">
    				<li><img width="550px" height="230px" src="images/marriage1.jpg"></li>
    				<li><img width="550px" height="230px" src="images/marriage2.jpg"></li>
    				<li><img width="550px" height="230px" src="images/marriage3.jpg"></li>
    				<li><img width="550px" height="230px" src="images/marriage4.jpg"></li>
    				<li><img width="550px" height="230px" src="images/marriage5.jpg"></li>
    				<li><img width="550px" height="230px" src="images/marriage6.jpg"></li>
    				<li><img width="550px" height="230px" src="images/marriage7.jpg"></li>
    		</ul>
    		<ul class="num-box">
    			<li><a href="#">1</a></li>
    			<li><a href="#">2</a></li>
    			<li><a href="#">3</a></li>
    			<li><a href="#">4</a></li>
    			<li><a href="#">5</a></li>
    			<li><a href="#">6</a></li>
    			<li><a href="#">7</a></li>
    		</ul>
    	</div>

### 3.3 css代码 ###

<style type="text/css">
    	*{margin:0;padding:0;}
    	body{font-size:14px;font-family:Helvetica,sans-serif;}
    	ul li{list-style:none;}
    	a{text-decoration:none;}
    	.box{position:relative;width:550px;height:230px;border:3px solid #F90;padding:10px;margin:0 auto;z-index:1;}
    	.pic-box{position:relative;width:550px;height:230px;z-index:2;overflow:hidden;}
    	.pic-box li{position:absolute;left:0;top:0;}
    	.num-box{position:absolute;width:200px;height:30px;right:10px;bottom:10px;z-index:9999;}
    	.num-box li{float:left;margin-right:8px;background:#666;}
    	.num-box li a{display:block;width:20px;height:20px;line-height:20px;text-align:center;color:#FFF;}
    	.num-box li.active{background:#f90;}
    </style>

### 3.4 js代码 ###

注意不要忘记导入jquery.js。

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    	$(function(){
    		var num = 2;
    		$(".num-box").children("li").mouseover(function(){
    			// 获取之前选中li元素在所有li元素中的索引位置
    			var previousIndex = $(".num-box").children("li").index($(".active"));
    			
    			// 设置选中css样式
    			$(this).addClass("active");
    			$(this).siblings().removeClass("active");
    			
    			// 获取当前选中li元素在所有li元素中的索引位置
    			var currentIndex = $(".num-box").children("li").index($(this));
    			
    			/**
    			 * 如果当前索引位置 = 之前索引位置，则什么都不做。
    			 * 如果当前索引位置 > 之前索引位置，则向上翻页。
    			 * 如果当前索引位置 < 之前索引位置，则向下翻页。
    			 */
    			if(currentIndex == previousIndex){
    				return false;
    			} else if(currentIndex > previousIndex){
    				$(".pic-box").children("li").eq(currentIndex).css("top",230);
    				$(".pic-box").children("li").eq(currentIndex).css("z-index",num++);
    				$(".pic-box").children("li").eq(currentIndex).stop().animate({"top":"0"},250);
    			} else {
    				$(".pic-box").children("li").eq(currentIndex).css("top",-230);
    				$(".pic-box").children("li").eq(currentIndex).css("z-index",num++);
    				$(".pic-box").children("li").eq(currentIndex).stop().animate({"top":"0"},250);
    			}
    		});
    	})
    </script>

## 4. 实现效果 ##

![Center 1][]

[Center]: /images/20220806/1a65c5b79bc74a80ac5352825b0de60b.png
[Image 1]: 
[Center 1]: /images/20220806/1a35416c4c554f2ca10c9c9cd3ea281e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。 ps：功能比较简单，整个框并不能根据图片的大小自动调节，

客官°小女子只卖身不卖艺/ 2022年10月10日 11:21/ 0 赞/ 232 阅读

相关 html实现图片轮播切换箭头,最简单jquery实现带左右箭头和数字焦点的图片轮播...

直接上代码(请自行引入jquery)：轮播 body\{font-family:Arial, Helvetica, sans-serif;font-size:12px;f

分手后的思念是犯贱/ 2022年10月06日 10:53/ 0 赞/ 169 阅读

相关 jquery实现简单图片轮播效果

[下载地址][Link 1]jquery实现简单图片轮播效果，按钮控制上下图片翻转效果。 ![1631561661.png][] dd: [Link 1]: https

柔情只为你懂/ 2022年09月11日 11:10/ 0 赞/ 291 阅读

相关数据轮播图翻页封装（左右点击）

效果图： ![在这里插入图片描述][9a3f1f02747f4afdacca0d5517479f12.png] <template> <div cl

你的名字/ 2022年08月28日 04:58/ 0 赞/ 165 阅读

相关 jQuery实现简单的图片轮播（二）-增加左右（或上下）翻页功能

1. 需求上一篇文章《jQuery实现简单的图片轮播》实现的效果中，图片只能从右边出现，不能从左右都出现，所以本文将实现图片从左右（或上下）都可以出现的功能。为避免

落日映苍穹つ/ 2022年08月06日 10:17/ 0 赞/ 162 阅读

相关 jQuery实现简单的图片轮播

最近学习了一下前端技术jQuery，现学现用，今天就使用它实现一个简单的图片轮播，下面直接上代码。 1. html部分 <!doctype html> <h

你的名字/ 2022年08月06日 04:21/ 0 赞/ 259 阅读

相关 js实现图片上下轮播效果（二）

这个轮播图的效果是上下切换的 ![20170619174529166][] 首先还是html代码 ![20170619174709325][] 然后是css

快来打我*/ 2022年06月14日 11:41/ 0 赞/ 475 阅读

相关 JQuery实现简单图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

系统管理员/ 2022年05月23日 05:13/ 0 赞/ 290 阅读

相关 jQuery如何实现简单的图片轮播

$(function(){ function onImgChange(){ //初始化变量 var

逃离我推掉我的手/ 2022年05月16日 01:12/ 0 赞/ 230 阅读

相关 js图片轮播（翻页切换）

> 前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡

傷城~/ 2022年04月23日 01:26/ 0 赞/ 276 阅读