js实现非常简单的焦点图切换特效实例
本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下：
这是一个非常非常简单的焦点图（更像滑动门），可供初学者借鉴参考
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0;padding:0;}
ul, li {list-style:none;}
.mid {margin:0 auto;}
.area {
width:240px;height:270px;
overflow:hidden;background:#999;
margin-top:150px;position:relative;
}
#pic_list {
position:relative;
}
#pic_list li {
position:absolute;visibility:hidden;
}
#pic_list li.show {
visibility:visible;
}
#pic_list li img {
vertical-align:middle;
}
.button {
width:240px;height:20px;
line-height:20px;background:#ccc;
position:absolute;bottom:0px;
}
#button {
float:right;
}
#button li {
float:left;width:20px;height:20px;
text-align:center;margin:0 3px;
font-family:"Arial";font-size:12px;
color:#fff;background:#000;
}
#button li.current {
background:#f00;cursor:pointer;
}
</style>
</head>
<body>
<div class="area mid">
<div id="imgbox" class="bbbb">
<ul id="pic_list" class="aaaa">
<li class="show" id="one">
<img src="images/1317279971_77011100.jpg" width="240" />
</li>
<li id="two">
<img src="images/1317279972_01691900.jpg" width="240" />
</li>
<li id="three">
<img src="images/1317279973_69082200.jpg" width="240" />
</li>
<li id="four">
<img src="images/1317281054_38572100.jpg" width="240" />
</li>
<li id="five">
<img src="images/1317281056_61630800.jpg" width="240" />
</li>
</ul>
</div>
<div class="button" class="dddd">
<ul id="button" class="cccc">
<li class="current" id="but_one">1</li>
<li id="but_two">2</li>
<li id="but_three">3</li>
<li id="but_four">4</li>
<li id="but_five">5</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function(){
var imgbox = document.getElementById("imgbox");
var pic_list = document.getElementById("pic_list");
var pics = pic_list.getElementsByTagName("li");
var button = document.getElementById("button").getElementsByTagName("li");
var p;
var start;
function autoplay(start){for(i=start;i<button.length;i++){
//设置起始值为start参数.
(function(){
var p=i;
// 为p赋值i. i等于0,1,2,3,4;
button[i].onmouseover=function change(){
//button[0],button[1],button[2],button[3],button[4]
//onmouseover可以触发函数;
for(j=0;j<this.parentNode.childNodes.length;j++){
//以this(当前触发事件的元素)为起点,的父节点的所有子节点
//的length值为最高值,开始遍历. ;
this.parentNode.childNodes[j].className="";
//以this(当前触发事件的元素)为起点
//的父节点的所有子节点的className为空. 危险慎用.;
}
this.className="current";
//this. 即当前触发onmouseover的元素的className为"current";
for(m=0;m<pics.length;m++){
//以pics.length为最高值进行遍历.遍历pics.;
pics[m].className="";
//清空所有pics数组中所有元素的className;
if (m==p){
//当m==p (p==i) 所以m=i时,触发下列函数
pics[m].className="show";
//pics的第m个元素的className值为show; m在这里等于i;
}
}
}
})();
}
}
autoplay(0);
})();
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class="banner"> <ul id="list-banner" class="list-banner fn-clear" style="lef
-
JS焦点图,JS 多个页面放多个焦点图的实例
如下所示: <!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>js同一页面可多次调用的图片幻
-
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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
-
javascript轮播图算法
轮播图,是网站首页中常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了Jquery中的封装好的方法实现图片轮播,省事简单.所以我想介绍一下javascript纯代码实现的图片轮播. HTML <div id="content_img1"> <ul id="img1"> <li><img src="img/5.jpg"/></li> <li><img s
-
js原生之焦点图转换加定时器实例
在jQuery之焦点图转换-左右的基础上,将jQuery代码改成js原生,并添加定时器(setInterval()和clearInterval()) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图转换--原生和定时器</title> <link rel="stylesheet&qu
-
js仿土豆网带缩略图的焦点图片切换效果实现方法
本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/
-
JavaScript实现图片轮播组件代码示例
本文介绍了JavaScript实现图片轮播组件,废话不多说了直接看下面: 效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 对HTML.CSS的要求: <div class="carousel-box"> <div class="carousel"&g
-
JS仿京东移动端手指拨动切换轮播图效果
如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张
-
原生JS实现图片轮播切换效果
首先来分析一下轮播图效果的实现原理: 1.父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2.子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute; 3.一个li即一张图片的宽度为父元素的显示宽度 4.初始时,ul的left为0,这时第一张图片即第一个li显示 5.点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度 6.点击
-
原生js编写焦点图效果
自己用原生js写的简单焦点图,算是对原生js初步运用. html部分 <div class="focusPicture"> <section class="mPhoto" id="mPhoto"> <img src="images/20161021/b_5809b93b66d18.jpg"/> </section><!-- 主要的大图 --> <section
-
原生js图片轮播效果实现代码
现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播的原理. 老规矩,先上代码.至于代码中的图片,随便找三张即可,最核心的还是理解其思想. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="sty
-
javascript实现3D切换焦点图
做了一个用鼠标拖拽配合 CSS3 的小尝试,截图如下: 熟悉拖拽效果的朋友应该不会陌生鼠标按住以后,左右拖动的实现方式. 这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中, 当拖动图片时,显示出立体的感觉-- 直接代码如下: #list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;} #list li{height:40px;width:400px; positi
-
javascript+HTML5自定义元素播放焦点图动画
这是一款基于HTML5的焦点图动画,它和其他焦点图不同的地方在于,它播放的不仅仅是图片,而是可以自定义控制的网页元素.它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动.打散.重新组合等,这款HTML5动画图片播放器算得上是高端大气上档次. 效果图: HTML代码 <div class="parallax-bg" id="slider-wrap"> <div class="slider para