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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
vue组件是如何解析及渲染的?
Jan 13 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
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python中函数的用法实例教程
2014/09/08 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
培训专员岗位职责
2014/02/26 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书