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下function声明一些小结
Dec 28 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue实现图书管理系统
Dec 29 Vue.js
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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
python定时执行指定函数的方法
2015/05/27 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
详解python里的命名规范
2018/07/16 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Yahoo的PHP面试题
2014/05/26 面试题
数学检讨书1000字
2014/02/24 职场文书
服务行业演讲稿
2014/09/02 职场文书
2015年中秋节主持词
2015/07/30 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
python获取字符串中的email
2022/03/31 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android