使用jQuery实现图片轮播
图片轮播的基本原理如下图
可以设置overflow:hidden来隐藏除了要显示的图片之外的图片(即其他三张图)
以下为实现代码
index.css文件放置css代码
*{margin: 0;padding: 0;
}.container{width: 100em;margin: 0 auto;
}
/* 所有图片div */
.myimage{position: absolute;width: 400%;
}
/* 单张图片 */
.myimage>img{width: 25%;height: 650px;float: left;
}
/* 显示图片div */
.carousel{width: 100em;height: 550px;overflow: hidden;position: relative;
}.carousel:hover .commons{display: block;
}/* 按钮共同样式 */
.commons{width: 50px;height: 150px;font-size: 3.4em;line-height:150px;text-align: center;background-color: rgba(161, 150, 150,0.3);display: none;
}
/* 左按钮 */
.btn-left{position: absolute;bottom: 43%;
}
/* 右按钮 */
.btn-right{position: absolute;bottom: 43%;left: 96.8%;
}.cycle{width: 100px;height: 10px;position: absolute;left: 49%;bottom: 10%;
}/* 圆点 */
.cycle>span{width: 10px;height: 10px;border: 1px solid black;border-radius: 50%;display: inline-block;
}
.on{background-color: rgb(41, 39, 39);
}
index.html
<div class="container"><!-- 图片轮播 --><div class="carousel"><div class="myimage"><img src="data:image/1.jpeg" alt="pic1"><img src="data:image/2.jpeg" alt="pic2"><img src="data:image/3.jpeg" alt="pic3"><img src="data:image/4.jpeg" alt="pic4"></div><div style="clear:both"></div><div class="btn-left commons"><</div><div class="btn-right commons">></div><div class="cycle"><span index="0" class="on"></span><span index="1"></span><span index="2"></span><span index="3"></span></div></div></div>
index.js
$(function () {// 全局变量初始值var index = 0;// 轮播图的宽度 carouselWidth = $(".carousel").width();// 左移按钮点击事件$(".btn-left").click(function () {slidepage(true);})// 右移按钮点击事件$(".btn-right").click(function () {slidepage(false);})// 翻页函数 true上一页 false下一页function slidepage(myBoolean) {var offsetLeft = 0; // 位移大小if (myBoolean) {if (index == 0) {index = 3;offsetLeft = -carouselWidth * index;}else {index--;offsetLeft = -carouselWidth * index;}}else {if (index == 3) {index = 0;offsetLeft = 0;}else {index++;offsetLeft = -carouselWidth * index;}}// 添加移动动画$(".myimage").animate({ left: offsetLeft + "px" }, 300);// 圆点跟随移动$(".cycle>span").eq(index).addClass("on").siblings().removeClass("on");}// 周期轮播setInterval(slidepage, 4000);// 点击圆点移动到相应图片$(".cycle>span").click(function () {// 相应圆点亮$(this).addClass("on").siblings().removeClass("on");//点击圆点赋予相应位移 赋值给全局变量index = $(this).attr("index");$(".myimage").animate({ left: -carouselWidth * index + "px" }, 200);});
使用jQuery实现图片轮播相关推荐
- PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
- jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- 利用jQuery实现图片轮播
利用jQuery实现图片轮播 需求 实现步骤 一.获取相关对象 二.设置切换按钮 三.设置图片首尾相接效果 四.随图片切换更新小圆点 五.点击小圆点切换图片 六.鼠标无操作时图片自动轮播 示例 需求 ...
- jquery:手风琴图片轮播
jquery:手风琴图片轮播 html部分: <!DOCTYPE html> <html> <head lang="en"><meta c ...
- html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- 使用jQuery实现图片轮播与切换功能
使用jQuery实现图片轮播与切换功能 文章目录 使用jQuery实现图片轮播与切换功能 效果图 一.body 二.jQuery 三.css 四.小结 效果图 一.body <body>& ...
- 小博老师演示常用JQuery效果 ——图片轮播
2019独角兽企业重金招聘Python工程师标准>>> [理论知识] 我们在实际开发应用程序的过程中,经常会遇到图片轮播的效果需求,本文小博老师就为大家演示一下,如何使用JQuery ...
- html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
- jQuery缩略图图片轮播插件
下载地址这个带缩略图的图片轮播例子使用jcarousel轮播插件制作的,基于jQuery代码构造的轮播图插件,样式很漂亮. dd:
最新文章
- js 创建一条通用链表
- Nginx+FastCGI
- 【PAT】1007. 素数对猜想 (20)
- UE4 C++与蓝图的继承问题
- 微信小程序出现【需要进行身份验证】弹框解决方法
- IOS web app一些实用的属性设置
- electron安装比较慢的方法
- 微信小程序码的生成(java)
- 高中信息怎样用计算机求和,高中信息技术excel数据求和课件.ppt
- 一文盘点目前免费的云服务器
- Ubuntu12.04软件安装指南
- 万字拆解伊利:84天从0到千万GMV,传统巨头在抖音电商的“快与慢”
- latex 中下括号 underbrace 如何对齐
- [NOIP2011] 观光公交解题报告
- Android根据语言适配货币符,ios – 使用NSLocale根据国家/地区代码或国家/地区名称获取货币符号...
- css案例2——黑白滤镜
- unraid应用_unraid 篇三:unraid docker之网页文件管理,强迫症的福音
- Hive常用函数(日期函数,取整函数,字符串操作函数,集合操作函数)
- 智源青年科学家袁洋:机器学习可靠性与算法优化的方法探索
- Linux触摸屏动效
热门文章
- riscv 启动流程分析
- 2020年算法汇总【150道】
- 回顾|Streaming Lakehouse Meetup · 北京站(附问题解答 PPT 下载)
- java 将jso 格式的字符串转换为ListMapString,String
- python面向对象编程72讲_2020-07-22 Python学习笔记27类和面向对象编程
- 985高校的毕业生年薪大概有多少?看完你还会不努力读书吗
- CentOS Linux release 7.8.2003 系统上部署KVM系统
- android逆向分析之smali语法
- 【全局路径规划】人工势场 Artificial Potential Field
- 盲盒APP想要做好需要具备什么呢?