博客
关于我
jQuery实现无动画轮播图(含完整源码)
阅读量:183 次
发布时间:2019-02-28

本文共 3824 字,大约阅读时间需要 12 分钟。

本博文源于jquery基础,旨在探讨如何实现无动画轮播图。

测试效果

在这里插入图片描述
自己会动,点击黄色按钮或者点击右下方按钮也可以自动跳转。
之前用原生态实现动画轮播图,也可以去看一下:

因为之前比较简单,只是考虑左右按钮点点动动,所以大家看完那个再看这个就感觉特别亲切了。下面开始一步步实现了

实验步骤

创建文件夹

目录结构如下
在这里插入图片描述
根据名字大家应该能理解

书写html代码

主要是这样子的,第一个div一波模拟图片,有一个当前显示的,如何标识呢,用信息量class,每次运动改变class就行了。
第二div就是几个按钮,这几个按钮也用信息量描述
第三个就是两个按钮左点点右点点

<div class="carousel" id="myCarouesl1">	<div class="carousel_images">		<ul>			<li style="display:none;" class="cur">				<a href="javascript:;"><img src="images/0.jpg" alt=""></a>			</li>			<li style="display:none;">				<a href="javascript:;"><img src="images/1.jpg" alt=""></a>			</li>			<li style="display:none;">				<a href="javascript:;"><img src="images/2.jpg" alt=""></a>			</li>			<li style="display:none;">				<a href="javascript:;"><img src="images/3.jpg" alt=""></a>			</li>			<li style="display:none;">				<a href="javascript:;"><img src="images/4.jpg" alt=""></a>			</li>		</ul>	</div>	<div class="carousel_nav">		<ol>			<li class="cur"></li>			<li></li>			<li></li>			<li></li>			<li></li>		</ol>	</div>	<div class="carousel_btns">		<a href="javascript:;" class="btn left"></a>		<a href="javascript:;" class="btn right"></a>	</div></div>

当大家写完html代码,没有写css代码时,效果应该是什么样子呢?
在这里插入图片描述‘空白一片,只有序号。那大家可能会想为什么会只有序号,因为图片高宽没有显示,display大家要弄懂。12345时ol的,不要搞错哟

书写css代码

*{   	margin: 0;	padding: 0;}.carousel{   	width:270px;	height:481px;	margin: 50px auto;	position: relative;}.carousel .carousel_images ul{   	list-style: none;}.carousel .carousel_images ul li{   	display: none;}.carousel .carousel_images ul li.cur{   	display: block !important;}.carousel .carousel_images ul li img{   	width:270px;	height:481px;}.carousel .carousel_nav{   	position: absolute;	bottom:0;	right:0;	width: 123px;	height: 24px;}.carousel .carousel_nav ol{   	list-style: none;}.carousel .carousel_nav ol li{   	float: left;	width:16px;	height: 16px;	margin-right: 6px;	border-radius: 50%;	background-color: #eee;	opacity: 0.6;}.carousel .carousel_nav ol li.cur{   	background:darkred;}.carousel .carousel_btns .btn{   	position: absolute;	width:40px;	height:40px;	border-radius: 20%;	background-color: #ffd70085;}.carousel .carousel_btns .btn.left{   	top:50%;	left:0;	margin-top: -20px;	margin-left: -20px;}.carousel .carousel_btns .btn.right{   	top:50%;	right:0;	margin-top: -20px;	margin-right: -20px;}

写完css代码怎么样子的,摸样齐全就差能动
在这里插入图片描述

书写jquery代码

jquery代码主要控制三个地方,一个是右下角按钮,一个式黄色左右按钮,一个是图片自动动!

<script type="text/javascript" src="jslib/jquery-3.3.1.min.js"></script>	<script type="text/javascript">		//得到最大盒子		var $carousel = $("#myCarouesl1");		//得到内部元素		var $left_btn = $("#myCarouesl1 .carousel_btns .left");		var $right_btn = $("#myCarouesl1 .carousel_btns .right");		var $carousel_images_lis = $("#myCarouesl1 .carousel_images li");		var $carousel_nav_lis = $("#myCarouesl1 .carousel_nav li");		//信号量		var idx = 0;		//图片总数		var picAmount = $carousel_images_lis.length;		//定时器		var timer = setInterval(right_btn_handler , 1000);		//触碰大盒子、离开大盒子的监听,需要停止、再设置定时器		$carousel.mouseover(function(){   			clearInterval(timer);		}).mouseout(function(){   			timer = setInterval(right_btn_handler , 1000);		});		//右按钮的监听		$right_btn.click(right_btn_handler);		//右按钮的事件处理函数		function right_btn_handler(){   			idx++;			if(idx > picAmount - 1){   				idx = 0;			}			showPicAndSetCircles();		}		//左按钮的监听		$left_btn.click(function(){   			idx--;			if(idx < 0){   				idx = picAmount - 1;			} 			showPicAndSetCircles();		});		//小圆点的监听		$carousel_nav_lis.mouseover(function(){   			//让信号量变为触碰的那个小圆点的下标			idx = $(this).index();			showPicAndSetCircles()		});		//显示图片并且设置小圆点		function showPicAndSetCircles(){   			//li加cur去cur。第信号量那个加cur,其他去cur			$carousel_images_lis.eq(idx).addClass("cur").siblings().removeClass("cur");			//小圆点cur去cur。第信号量那个加cur,其他去cur			$carousel_nav_lis.eq(idx).addClass("cur").siblings().removeClass("cur");		}</script>

最后提示

图片大家也要有
请添加图片描述
在这里插入图片描述
请添加图片描述请添加图片描述请添加图片描述
jquery路径,图片路径,各种路径注意,然后运行起来,收获喜悦。

转载地址:http://uard.baihongyu.com/

你可能感兴趣的文章
mysql 往字段后面加字符串
查看>>
mysql 快照读 幻读_innodb当前读 与 快照读 and rr级别是否真正避免了幻读
查看>>
MySQL 快速创建千万级测试数据
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
MySql 手动执行主从备份
查看>>
Mysql 批量修改四种方式效率对比(一)
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>