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的不规则矩形的排列实现代码
Apr 16 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
Vuejs 单文件组件实例详解
Feb 09 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
vuex存储token示例
Nov 11 Javascript
原生js+css实现tab切换功能
Sep 17 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学习教程之第2天
2008/06/15 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
公务员政审个人鉴定
2014/02/25 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
数据保密承诺书
2014/06/03 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
python_tkinter事件类型详情
2022/03/20 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
MySQL transaction事务安全示例讲解
2022/06/21 MySQL