前台jQuery实现图片轮播
jsp页面
需要注意的是,轮播的图片顺序跟命名有关,
<div class="slider"><a href=""><img border="0px" id="slider_img" src="img/slider-1.jpeg"/></a><ul><li id="1"></li><li id="2"></li><li id="3"></li><li id="4"></li><li id="5"></li></ul></div>
css代码
.slider{width: 600px;height: 300px;margin-bottom: 10px;
}
.slider ul{position: relative;margin-top: -50px;margin-left: 240px;width: 200px;height: 100px;
}
.slider ul li{width: 15px;height: 15px;float: left;margin-left:10px;list-style: none;border-radius: 20px;background: white;
}
js代码
//图片轮播
var i = 1;
//如果scroll为true,轮播,否则停止轮播
var scroll = true;
//动画事件,在2000ms内完成function
setInterval(function() {if (scroll) {if (i == 5) {i = 0;}$(".slider ul li:eq(" + i + ")").css("background", "gray");//让小圆点变灰色$(".slider ul li:eq(" + i + ")").siblings().css("background", "white");//同级的小圆点变白色i++;$("#slider_img").attr("src", "img/slider-" + i + ".jpeg");//这里可以看出和图片的命名有关}
}, 2000);
$(function(){
// 图片轮播$(".slider ul li:eq(0)").css("background", "gray");$(".slider ul li:eq(0)").siblings().css("background", "white");$("#slider_img").attr("src", "img/slider-1.jpeg");$(".slider ul li").hover(function() {//当鼠标移到圆点上scroll = false;//停止轮播$a = $(this).attr("id");$("#slider_img").attr("src", "img/slider-" + $a + ".jpeg");i = $a;//从当前图片开始轮播$(this).css("cursor", "pointer").css("background", "gray");$(this).siblings().css("background", "white");}, function() {scroll = true;});
)}
前台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.然后是一个图片组(可以 ...
最新文章
- 请问,关闭子窗口提示错误,大家遇到这样的问题吗?
- 线程池的一个BUG,被我发现了
- Repeater 操作HeaderTemplat或FooterTemplat模板中控件
- 行政编码json_基于FME国内县级及以上网络公开行政区划边界的获取
- 智能实验室-全能优化(Guardio) 4.0.0.670 beta 8
- 博客索引-pyhui-第二版
- OpenCV3学习(12.5) opencv实现粒子滤波目标跟踪
- 贪婪模式与非贪婪模式
- php pg_fetch_row,pg_fetch_row
- scala运算符_Scala运算符–算术,关系,逻辑,按位,赋值
- openstack热添加磁盘
- 【优化布局】基于matlab遗传算法求解配电变电站布局优化问题【含Matlab源码 1317期】
- ID与Class的区别(#与。的区别)CSS
- android 自定义进度条颜色,进度条背景颜色
- yeta机器人_Yeta智能语音电话机器人开放平台接入指南(2)
- oracle基础|什么是数据字典|数据字典的作用
- 2022-2028年中国全屋定制行业发展动态及投资前景分析报告
- 现在的 Linux 内核和 Linux 2.6 的内核有多大区别?
- Anaconda安装并配置
- DOS、Mac 和 Unix 文件格式
热门文章
- pdf转成jpg或png的方法
- android微信qq分享,android 一键分享 QQ 微信
- 印象笔记html标签删除吗,我用了9年印象笔记,打算彻底放弃,直到……
- 数据库的锁机制理解和运用
- MarkdownPad2 使用教程
- OSI体系结构——数据链路层详解
- 科拉茨猜想c语言编写,辽宁省沈阳市第一七O中学2019-2020学年高二数学上学期阶段性测试试题(2)文...
- WZOI-261疯狂吃鸡腿2
- 脑与认知神经科学Matlab Psytoolbox认知科学实验设计——视错觉
- 如何用计算机求特征值特征向量,利用QR算法求解矩阵的特征值和特征向量