Jquery的动态切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#imgContainer
{
width: 990px;
height: 540px;
border: 1px solid red;
/*设置绝对定位,子元素的绝对定位是相对于父元素的*/
position : absolute;
left:10px;
top:10px;
}
#imgContainer img
{
width: 990px;
height: 540px;
position: absolute;
left: 0px;
top: 0px;
}
#imgContainer div
{
position: absolute;
}
#imgContainer .imgTip
{
border: 1px solid blue;
background-color: green;
color:white;
padding: 3px;
width: 10px;
cursor: pointer;
z-index: 100;
bottom: 10px;
}
</style>
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
var changeImgId;//自动轮换图片的编号
//定义一个图片集合,指定图片的路径信息
var list = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
$(function () {
$.each(list, function (index) {
//根据数组生成所有的img图片
$('<img src="' + this + '"/>')
.appendTo('#imgContainer');
//根据图片生成数字提示
$('<div class="imgTip">' + (index + 1) + '</div>')
.css('right', (4 - index) * 20 + 'px')
.appendTo('#imgContainer');
});
//设置低1张图片显示
$('#imgContainer>img:gt(0)').hide();
//设置提示数字的事件
$('#imgContainer>.imgTip').hover(function () {
//指向数字
//根据索引找到图片对象
$('#imgContainer>img').eq(parseInt($(this).text()) - 1)
//将指向索引的对应的图片以动画的形式展示出来,
.slideDown(1000)
//将其他图片以动画的形式隐藏
.siblings('img')
.fadeOut(1000);
//设置指向div的背景色
$(this).css('background-color', 'blue')
.siblings('.imgTip').css('background-color', 'green');
//清除自动播放的计时器
clearInterval(changeImgId);
//更改图片索引
imgIndex = parseInt($(this).text()) - 1;
}, function () {
//移开数字
changeImgId = setInterval(changeImg, 2000);
});
//完成自动切换图片功能
changeImgId = setInterval(changeImg, 2000);
//默认让第一个数字背景为蓝色
$('#imgContainer>.imgTip:eq(0)').css('background-color', 'blue');
});
var imgIndex = 0;
//切换图片的代码
function changeImg() {
imgIndex++;
if (imgIndex >= list.length) {
imgIndex = 0;//若果是最后一张,就变成第一张
}
$('#imgContainer>img').eq(imgIndex)
//将指向索引的对应的图片以动画的形式展示出来,
.slideDown(1000)
//将其他图片以动画的形式隐藏
.siblings('img')
.fadeOut(1000);
//将指定的数字索引的div设置背景色
$('#imgContainer>.imgTip').eq(imgIndex)
.css('background-color', 'blue')
.siblings('.imgTip').css('background-color', 'green');
};
</script>
</head>
<body>
<div id="imgContainer"></div>
</body>
</html>
Jquery的动态切换图片的更多相关文章
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)
前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...
- 新闻动态切换图片html(flash)
效果图: 代码: <table id="table_zi"> <tr> <td class="width330"> < ...
- 给img添加类名可以动态切换图片
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- js动态切换图片
<script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...
- Jquery点击数字切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery箭头切换图片 - 学习笔记
jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标移 ...
- 原生js点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
随机推荐
- 20145338 《网络对抗》逆向及Bof基础实验
逆向及Bof基础实验 实践目标 ·本次实践的对象是一个名为pwn1的linux可执行文件. ·该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. ·该程序同时包含 ...
- raft共识算法
raft共识算法 分布式一致性问题 如果说,服务器只有一个节点,那么,要保证一致性,没有任何问题,因为所有读写都在一个节点上发生.那如果server端有2个.3个甚至更多节点,要怎么达成一致性呢?下面 ...
- COM/DCOM简述
这些组件对象可以互相通讯与交互,而与它们的语言.分布及原始平台无关.COM规程包括一套标准API.一个标准的接口集以及COM用于支持分布式计算的网络协议.而DCOM模型则是一套用于分布式环境中的COM ...
- phpstrom mac 快捷键
对应键 ⌘——Command ⌃ ——Control ⌥——Option/Alt ⇧——Shift ⇪——Caps Lock fn——功能键就是fn 编辑 Command+alt+T 用 (if..e ...
- ng-model-options 时延
ng-model-options="{updateOn: 'blur'}" 失去焦点时生效 ng-model-options="{debounce:500}" ...
- 第一个jQuery
第一个jQuery <script src = "jquery.js"> $(document).ready(function){ alert("Hello ...
- participation remain wide
Equal access to universities stagnates Image copyright Getty Images The most advantaged teens have t ...
- 马凯军201771010116《面向对象与程序设计Java》第十周学习总结
一.理论知识学习部分 泛型类的约束与局限性: 不能用基本类型实例化类型参数 运行时类型查询只适用于原始类型 不能抛出也不能捕获泛型类实例 参数化类型的数组不合法 不能实例化类型变量 泛型类的 ...
- 2017年5月11日17:43:06 rabbitmq 消费者队列
从昨天开始发现个问题,一个接口在本地调用时大部分正常,一旦在生成者打一个断点调试,并且在promotion也打断点的时候会出现没有返回channel的异常,然后消费者就再也消费不了了 16:57:45 ...
- ajax成功返回结果字符串,对比不成功的解决办法
这是很久之前遇到的问题了,今天不小心又遇到了,总结了一下以前处理的办法. 废话不说,上代码: $.ajax({ url:"exit.do", data:{account:accou ...