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 相关文章推荐
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JS排序之快速排序详解
Apr 08 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
用js+xml自动生成表格的东西
2006/12/21 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
jquery.pager.js实现分页效果
2019/07/29 jQuery
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python配置mysql的教程(推荐)
2017/10/13 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Python实现自动整理文件的脚本
2020/12/17 Python
大学应届生的自我评价
2014/03/06 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
教师聘用意向书
2015/05/11 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书