js实现非常简单的焦点图切换特效实例_javascript技巧
本文实例讲述了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="/static/imghw/default1.png" data-src="images/1317279971_77011100.jpg" class="lazy" style="max-width:90%" / alt="js实现非常简单的焦点图切换特效实例_javascript技巧" >
</li>
<li id="two">
<img src="/static/imghw/default1.png" data-src="images/1317279972_01691900.jpg" class="lazy" style="max-width:90%" / alt="js实现非常简单的焦点图切换特效实例_javascript技巧" >
</li>
<li id="three">
<img src="/static/imghw/default1.png" data-src="images/1317279973_69082200.jpg" class="lazy" style="max-width:90%" / alt="js实现非常简单的焦点图切换特效实例_javascript技巧" >
</li>
<li id="four">
<img src="/static/imghw/default1.png" data-src="images/1317281054_38572100.jpg" class="lazy" style="max-width:90%" / alt="js实现非常简单的焦点图切换特效实例_javascript技巧" >
</li>
<li id="five">
<img src="/static/imghw/default1.png" data-src="images/1317281056_61630800.jpg" class="lazy" style="max-width:90%" / alt="js实现非常简单的焦点图切换特效实例_javascript技巧" >
</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程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
小米14Ultra如何切换4g和5g？
Feb 23, 2024 am 11:49 AM
小米14Ultra是今年小米中非常火热的机型之一，小米14Ultra不仅仅升级了处理器以及各种配置，而且还为用户们带来了很多新的功能应用，从小米14Ultra销量就可以看出来手机的火爆程度，不过有一些常用的功能可能你还没了解。那么小米14Ultra如何切换4g和5g呢？下面小编就为大家介绍一下具体的内容吧！小米14Ultra怎么切换4g和5g？1、打开手机的设置菜单。2、设置菜单中查找并选择“网络”、“移动网络”的选项。3、移动网络设置中，会看到“首选网络类型”选项。4、点击或选择该选项，会看到
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
win11家庭版切换专业版操作教程_win11家庭版切换专业版操作教程
Mar 20, 2024 pm 01:58 PM
Win11家庭版怎么转换成Win11专业版?在Win11系统中，分为了家庭版、专业版、企业版等，而大部分Win11笔记本都是预装Win11家庭版系统。而今天小编就给大家带来win11家庭版切换专业版操作步骤!1、首先在win11桌面此电脑上右键属性。2、点击更改产品密钥或升级windows。3、然后进入后点击更改产品密钥。4、再输入激活密钥：8G7XN-V7YWC-W8RPC-V73KB-YWRDB，选择下一步。5、接着就会提示成功，这样就可以将win11家庭版升级win11专业版了。
Win10系统如何实现双系统切换
Jan 03, 2024 pm 05:41 PM
很多朋友刚接触win系统的时候可能用不习惯，电脑中存着双系统，这个时候其实是可以双系统切换的，下面就一起来看看两个系统切换的详细步骤吧。win10系统如何两个系统切换方法一、快捷键切换1、按下“win”+“R”键打开运行2、在运行框中输入“msconfig”点击“确定”3、在打开的“系统配置”界面中选择自己需要的系统点击“设为默认值”，完成后“重新启动”即可完成切换方法二、开机时选择切换1、拥有双系统时开机会出现一个选择操作界面，可以使用键盘“上下”键进行选择系统
切换苹果电脑双系统启动方式
Feb 19, 2024 pm 06:50 PM
苹果双系统开机怎么切换苹果电脑作为一款功能强大的设备，除了搭载自家的macOS操作系统外，也可以选择安装其他操作系统，比如Windows，从而实现双系统的切换。那么在开机时，我们如何切换这两个系统呢？本文就来为大家介绍一下在苹果电脑上如何实现双系统的切换。首先，在安装双系统之前，我们需要确认自己的苹果电脑是否支持双系统切换。一般来说，苹果电脑都是基于
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
