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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
微信小程序实现左滑删除效果
Nov 18 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实现简单的随机抽奖小程序
2016/01/05 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue根据值给予不同class的实例
2018/09/29 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
python自动安装pip
2014/04/24 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python格式化输出%s和%d
2018/05/07 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
django实现用户注册实例讲解
2019/10/30 Python
详解Python3中的 input() 函数
2020/03/18 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
什么是URL
2015/12/13 面试题
国企干部对照检查材料
2014/08/22 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年班组工作总结
2015/04/20 职场文书
创卫工作总结2015
2015/04/22 职场文书