jquery实现图片切换和js实现图片切换
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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function(){
var num2=6;//用于设置当前选中ol li的z-index值
$('ol li').mouseover(function(e){
$(this).attr('class','current');
$(this).siblings().attr('class','');
num2++;
var num=$(this).index();//存ol li的序列号
$('ul li').eq(num).css('z-index',num2);
$('ul li').eq(num).css('left','600px');//修改ul li对应的序列号的样式,先把它的位置绝对定位到div外面 //$('ul li').eq(num).css('left','0');这句是静态css,下一句是动态css
$('ul li').eq(num).animate({left:'0'},50);//然后把它的位置又重新绝对定位到父元素上面 这样就实现了一个动画的效果
}); });
</script>
<style>
*{
padding:0;margin:0;border:0;
}
.all{/*div的宽高设置成和五张图片的宽高一样*/
width:600px;
height:300px;
margin:100px auto;/*div居中*/
position:relative;/*相对定位，便于子元素使用绝对定位*/
overflow:hidden;/*隐藏超出部分的图片*/
}
.all ul{
position:relative;
z-index:1;
}
.all ul li{
position:absolute;
left:0;
top:0;
}
.all ol{
position:absolute;
z-index:2;/*显示在ul上面*/
right:10px;
bottom:10px;
}
.all ol li{
width:20px;
height:20px;
background:#333;
border:1px solid #ccc;
font-weight:bold;
text-align:center;/*左右居中*/
line-height:20px;/*文本上下居中*/
float:left;
list-style:none;
margin-left:10px;
color:#ccc;
margin-top:10px;/*让放大的li和没有放大的li下边框对其*/
}
.all ol .current{
width:30px;
height:30px;
line-height:30px;
border:1px solid #f60;
color:#f60;
margin-top:0;/*让放大的li和没有放大的li下边框对其*/
cursor:pointer;/*增强用户体验 变小手*/
}
</style>
</head> <body>
<div class="all">
<ul>
<li><img src="01.jpg" width="600" height="300"/></li>
<li><img src="02.jpg" width="600" height="300"/></li>
<li><img src="03.jpg" width="600" height="300"/></li>
<li><img src="04.jpg" width="600" height="300"/></li>
<li><img src="05.jpg" width="600" height="300"/></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="current">5</li>
</ol>
</div>
</body>
</html>
javascript实现图片切换：
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.all{
width:600px;
height:350px;
position:relative;
overflow:hidden;
margin:100px auto;
}
.all ul{
z-index:1;
position:relative;
}
.all ul li{
position:absolute;
top:0;
left:0;
}
.all ol{
position:absolute;
right:10px;
bottom:10px;
z-index:2;
}
.all ol li{
width:20px;
height:20px;
border:1px solid #fff;
background-color:#333;
float:left;
overflow:hidden;
margin-right:10px;
text-align:center;
line-height:20px;
color:#fff;
margin-top:10px;
font-weight:bold;
}
.all ol .current{
width:30px;
height:30px;
border:1px solid #f60;
color:#f60;
line-height:30px;
margin-top:0;
cursor:pointer;
}
</style> <script>
//通过id值获得元素的函数
function $(id){
return document.getElementById(id);
} //初始化函数
function initial(){
olLi=document.getElementsByTagName('ol')[0].getElementsByTagName('li');//获取ol下的li
ol=$('tab');//获取ol元素
theImg=$('theImg');
//五张图片的地址
addressPic=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg']; //遍历ol下的li
for(var i=0;i<olLi.length;i++){
//依次给每个li绑定mouseover事件,该事件执行切换图片的函数
olLi[i].addEventListener('mouseover',changePicture,false);
olLi[i].index=i;//设置ol li的index序列号
}
} //切换图片
function changePicture(e){
e.target.className="current";//将选中的ol下的li的class属性设置为current,e.target代表选中的li //清除ol里的空白节点
cleanWhitespace(ol); //删除除当前选中的li外其他li的class属性值
nextNode=e.target.nextSibling;//当前节点的下一个节点
lastNode=e.target.previousSibling;//当前节点的前一个节点
while(nextNode){//将当前节点后所有的兄弟节点的class属性清除
nextNode.setAttribute('class','');
nextNode=nextNode.nextSibling;
}
while(lastNode){//将当前节点前面所有的兄弟节点的class属性清除
lastNode.className='';
lastNode=lastNode.previousSibling;
} //实现切换图片的功能
theImg.src=addressPic[this.index];
} //清除ol下的空白节点
function cleanWhitespace(oElement)
{
for(var i=0;i<oElement.childNodes.length;i++){
var node=oElement.childNodes[i];
if(node.nodeType==3 && !/\S/.test(node.nodeValue)){
node.parentNode.removeChild(node)
}
}
} //给窗体绑定load事件，执行初始化函数initial()
window.addEventListener('load',initial,false);
</script>
</head> <body>
<div class="all">
<ul>
<li><img id="theImg" src="01.jpg" width="600px" height="350px"/></li>
</ul>
<ol id="tab">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="current">5</li>
</ol>
</div>
</body>
</html>
jquery实现图片切换和js实现图片切换的更多相关文章
- jquery插件lazyload.js延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 前端设计——js实现图片切换的淡入淡出
1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- chromedriver禁用图片，禁用js，切换UA
selenium 模拟chrome浏览器,此时就是一个真实的浏览器,一个浏览器该加载的该渲染的它都加载都渲染,所以爬取网页的速度很慢.如果可以不加载图片等操作,网页加载速度就会快不少,代码中列出了了禁 ...
- JQuery缓冲加载图片插件lazyload.js的使用方法
lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
随机推荐
- MySql数据库索引优化注意事项
设计好MySql的索引可以让你的数据库飞起来,大大的提高数据库效率.设计MySql索引的时候有一下几点注意: 1,创建索引 对于查询占主要的应用来说,索引显得尤为重要.很多时候性能问题很简单的就是因为 ...
- java web 学习(1)
java web 应用的核心技术包括以下几个方面: jsp:进行输入和输出的基本手段 javabean:完成功能的处理 servlet:对应用的流程进行控制 jdbc:是与数据库进行交互不可缺少的技术 ...
- LXPanel自定义添加应用程序到快速启动栏
LXPanel是Linux下LXDE项目的一个桌面面板软件.我一开始接触的时候,对于自己自定义的程序到快速启动栏绕了很多弯路,这里记录下,防止以后自己忘了.还有一点就是很多时候,panel下的应用程序 ...
- JavaScript-学习一获取表单的值
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>he ...
- 解决spring mvc 上传报错，Field [] isn't an enum value，Failed to convert value of type 'java.lang.String[]' to required type '
没有选择附件,但是点击上传按钮的时候会报错. 之前不选择文件,直接上传空文件是可以的,后来不知道改了什么就不行了. 错误信息: -- :: [http--] TRACE org.springframe ...
- windows计划任务执行SQLserver脚本
2016年3月1号,北京出差,documentbrowser系统改善上线. 其中有一个数据库表需要每天进行同步,原计划使用SQLServer的作业来执行又方便又快捷,但是客户的数据库是05的expre ...
- 3d touch 应用 2 -备用
一.引言 在iphone6s问世之后,很多果粉都争先要体验3D Touch给用户带来的额外维度上的交互,这个设计之所以叫做3D Touch,其原理上是增加了一个压力的感触,通过区分轻按和重按来进行不同 ...
- allegro 的光绘层概念
TOP层: board geometry/outline manufacturing/photoplot_outline etch/top ...
- POJ2479 Maximum sum(dp)
题目链接. 分析: 用 d1[i] 表示左向右从0到i的最大连续和,d2[i] 表示从右向左, 即从n-1到i 的最大连续和. ans = max(ans, d1[i]+d2[i+1]), i=0,1 ...
- POJ2485 Highways(最小生成树)
题目链接. 分析: 比POJ2253要简单些. AC代码: #include <iostream> #include <cstdio> #include <cstring ...