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的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
随机推荐
- asp.net实现 EXCEL数据导入到数据库功能
在项目中经常要用EXCEL导入数据到数据库,提高工作效率. 注意:EXCEL中的第一行不能导入. 下面是源码: IntoExcel.aspx: [csharp] <%@ Page Languag ...
- oracle通过query导出指定条件的数据
通过下面的方式oracle可以导出指定了条件的数据: exp mixcoaldb/mixcoaldb@server tables=(shengcssjk) query=\"where to_ ...
- Jquery中$.post()与$.get()区别
1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结 ...
- JavaScript 学习-变量的作用域和块级作用域
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Spark笔记-treeReduce、reduce、reduceByKey
参考资料: http://stackoverflow.com/questions/32281417/understadning-treereduce-in-spark http://stackover ...
- Ant快速入门(二)-----使用Ant工具
使用Ant非常简单,当正确安装Ant后,只要输入ant或ant.bat即可. 如果运行ant命令时没有指定任何参数,Ant会在当前目录下搜索build.xml文件.如果找到了就以该文件作为生成文件,并 ...
- C++进阶阅读
推荐的阅读顺序:level 1从<<essential c++>>开始,短小精悍,可以对c++能进一步了解其特性以<<c++ primer>>作字典和课 ...
- SCLButton
import UIKit let kSuccessTitle = "Congratulations" let kErrorTitle = "Connection erro ...
- Longest Ordered Subsequence
http://poj.org/problem?id=2533 #include<cstdio> #include<iostream> #include<cstring&g ...
- 无聊时，可以去HASKELL里找点感觉
可以和C,JAVA,PYTHON作任意的比较,感觉越来越晰一些计算机语言里深层的东东... doubleMe x = x + x doubleUs x y = x * + y * doubleSmal ...