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对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
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.MVC的模板标签系统(五)
2006/09/05 PHP
PHP生成静态页面详解
2006/12/05 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP5.3新特性小结
2016/02/14 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Fabric 应用案例
2016/08/28 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
SQL Server数据库笔试题和答案
2016/02/04 面试题
高级Java程序员面试题
2016/06/23 面试题
2014庆六一活动方案
2014/03/02 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
法定代表人资格证明书
2014/09/11 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
学校教代会开幕词
2016/03/04 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
react 路由Link配置详解
2021/11/11 Javascript
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python