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的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
随机推荐
- Linux(Debian)上安装Redis教程
-- 第一步下载文件到该目录 cd /usr/local/src wget http:.tar.gz 解压 tar xzf redis.tar.gz -- 第二步编译安装 make make all ...
- Jquery练手之-贪吃蛇
记得以前刚出来工作的时候,什么都不懂.老板让用Jquery写一个功能,我不会写,然后跟老板说,我就是个.net程序员,为什么要写Jquery...后面我们老大给我写了!现在我才知道net程序员要会多少 ...
- get_magic_quotes_gpc() 内置函数
get_magic_quotes_gpc()函数 在PHP中是内置的函数,这个函数的作用就是得到php.ini设置中magic_quotes_gpc选项的值. 当magic_quotes_gpc=On ...
- mysql的sql优化案例
前言 mysql的sql优化器比较弱,选择执行计划貌似很随机. 案例 一.表结构说明mysql> show create table table_order\G***************** ...
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
- postgres常用操作
1. 创建一张表主键自增 create table region( id serial PRIMARY KEY, name ), value ); #会自动创建 region_seq_id表,drop ...
- PPT2010中设置音乐播放停止位置
ppt不仅只是制作幻灯片的效果,而且在制作幻灯片过程中,由于内容很多,每个版块想要呈现的效果是不同的,那么配乐的风格自然也是不同.如何让我们插入的音乐在合适的内容的时候播放和停止呢,下面就来教大家具体 ...
- iOS常用动画-b
CoreAnimationEffect.h // CoreAnimationEffect // // Created by VincentXue on 13-1-19. // Copyright ...
- Solr4.8.0源码分析(6)之非排序查询
Solr4.8.0源码分析(6)之非排序查询 上篇文章简单介绍了Solr的查询流程,本文开始将详细介绍下查询的细节.查询主要分为排序查询和非排序查询,由于两者走的是两个分支,所以本文先介绍下非排序的查 ...
- 获取上海地区AQI质量数据Python脚本
一个获取上海地区AQI质量的Python脚本 https://github.com/yanyueoo7/Raspberrypi/blob/master/GetPmData_Shanghai.py #! ...