jQuery手动点击实现图片轮播特效


Posted in Javascript onApril 20, 2020

本文写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等。

下面来看看最终做的手动点击轮播效果:

 jQuery手动点击实现图片轮播特效

一、原理说明

(1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮

(2)对最外边的大div设置的宽度为图片的宽度,超出大div宽度的都需要隐藏,但是对于盛放图片的小div设置宽度为2000px,大一点方便四张图左浮动布局

(3)当数字按钮点击时,获取按钮的索引值,这样就可以知道每张图片左移多少宽度

jQuery手动点击实现图片轮播特效

从上面的图可以看出,四张图片是浮动起来横着的布局,当数字按钮被点击时,图片就要按照数字按钮的索引值引动N个图片的宽度到达父框架里面展示,因为父框架外面的图片都会被隐藏掉~~~~~如果你还看不懂原理的话,我只能吐血了~~~~

二、下面来看主体程序

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>轮播图①(手动点击轮播)</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <div class="slideShow">
 <!--图片布局开始-->
 <ul>
 <li><a href="#"><img src="img/picture01.jpg" /></a></li>
 <li><a href="#"><img src="img/picture02.jpg" /></a></li>
 <li><a href="#"><img src="img/picture03.jpg" /></a></li>
 <li><a href="#"><img src="img/picture04.jpg" /></a></li>
 </ul>
 <!--图片布局结束-->
 
 <!--按钮布局开始-->
 <div class="showNav">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <!--按钮布局结束-->
 </div>
 <script src="js/jquery-1.11.3.js"></script>
 <script src="js/layout.js"></script>
 </body>
</html>

上面布局我已经在原理中说明了,感兴趣的自己看原理~~~~

三、CSS样式

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px; /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
}
.slideShow ul li{
 float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

上面样式我已经备注出来很重要的地方了,相信有基础的很容易看懂,刚开始我在.slideShow ul样式里面忘了写position: relative;导致后面的jquery程序图片一直无法移动,耽误了很长时间才找出这个错误,希望大家可以注意这个地方~~~~~~~

四、jQuery程序

$(document).ready(function(){
 var slideShow=$(".slideShow"), //获取最外层框架的名称
 ul=slideShow.find("ul"), 
 showNumber=slideShow.find(".showNav span"),//获取按钮
 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
 
 showNumber.on("click",function(){ //为每个按钮绑定一个点击事件 
 $(this).addClass("active").siblings().removeClass("active"); //按钮被点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
 var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值
 ul.animate({
 "left":-oneWidth*index, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值index确定
 })
 })
})

是不是觉得很简单,也是几句话就搞定了手动点击的轮播效果,上面程序需要注意的是left属性是左移动,所以为负值~~~~~~~

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

下次文章就为大家分享自动轮播特效,希望大家不要错过。

Javascript 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
js继承的实现代码
Aug 05 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JS函数本身的作用域实例分析
Mar 16 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 #Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 #Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 #Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 #Javascript
js实现新年倒计时效果
Dec 10 #Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 #Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 #Javascript
You might like
PHP读取MySQL数据代码
2008/06/05 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
mouse_on_title.js
2006/08/25 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
js实现文字截断功能
2016/09/14 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
tornado 多进程模式解析
2018/01/15 Python
Python OpenCV实现视频分帧
2019/06/01 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
请介绍一下Ant
2016/07/22 面试题
Java平台和其他软件平台有什么不同
2015/06/05 面试题
五五普法心得体会
2014/09/04 职场文书
生活小常识广播稿
2014/09/16 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers