《javaScript100例|03》自写javaScript+CSS轮显效果

目录

效果图

代码示例

源码地址:自写Js+CSS轮显效果.rar-互联网文档类资源-CSDN下载https://download.csdn.net/download/weixin_41937552/37380520


效果图

代码示例


<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS图片轮显切换</title>
<style type="text/css">
*{ margin:0; padding:0}
#wapper{ position:relative;height:280px; width:316px; overflow:hidden}
#slideshow{width:316px; height:300px; overflow:hidden; position:relative;}
#imglist{width:1264px; height:100%; float:left; padding:0; margin:0;position:absolute; left:0}
#imglist li{ width:25%;height:100%; float:left}
#nextlist{position:absolute; z-index:9}
#nextlist li{ float:left; display:inline; height:30px; padding:10px 0; width:79px;}
#nextlist li.current{background:#c00}
#bg{ position:absolute; z-index:1;background:#ff0;filter:alpha(opacity=20);opacity:0.2; height:50px; width:316px}
</style>
</head>
<body>
<div id="wapper">
<div id="slideshow">
<ul id="imglist">
<li style=" background:#f0c;">1</li>
<li style=" background:#cf0;">2</li>
<li style=" background:#09e;">3</li>
<li style=" background:#efc;">4</li>
</ul>
</div>
<div id="nextlist">
<ul>
<li class="current">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<div id="bg"></div>
</div>
<script type="text/javascript">
var num = 0;
function nextElement(eleObj,aa){
var obj = document.getElementById(eleObj);if (obj.movement) {clearTimeout(obj.movement);}if (!obj.style.bottom) {obj.style.bottom = "-50px";}var xpos = parseInt(obj.style.bottom);if (xpos == aa) {return false;}if (xpos > aa) {var dist = Math.ceil((xpos - aa)/5);xpos = xpos - dist;}if (xpos < aa) {var dist = Math.ceil((aa - xpos)/5);xpos = xpos + dist;}obj.style.bottom = xpos + "px";var repeat = "nextElement('"+eleObj+"','"+aa+"')";obj.movement = setTimeout(repeat,30);
}
function moveElement() {
var elem = document.getElementById("slideshow");
var nextElem = document.getElementById("nextlist");
var imgElem = document.getElementById("imglist");
var lis = elem.getElementsByTagName("li");
var nextLis = nextElem.getElementsByTagName("li");if (imgElem.movement) {clearTimeout(imgElem.movement);}if (!imgElem.style.left) {imgElem.style.left = "0";}var xpos = parseInt(imgElem.style.left);var naa = num * -316;if (xpos == naa) {if(num==(lis.length - 1) || num>lis.length){num=0;return false;}else{num++;return false;}}for(var i=0;i<nextLis.length;i++){nextLis[i].className="";nextLis[num].className="current";}if (xpos > naa) {var dist = Math.ceil((xpos - naa)/4);xpos = xpos - dist;}if (xpos < naa) {var dist = Math.ceil((naa - xpos)/4);xpos = xpos + dist;}imgElem.style.left = xpos + "px";var repeat = "moveElement()";imgElem.movement = setTimeout(repeat,30);}
function checkMove(){
var elem = document.getElementById("slideshow");
var nextElem = document.getElementById("nextlist");
var imgElem = document.getElementById("imglist");
var bgElem = document.getElementById("wapper");
var lis = elem.getElementsByTagName("li");
var nextLis = nextElem.getElementsByTagName("li");bgElem.onmouseover=function(){nextElement("nextlist",0);nextElement("bg",0);}bgElem.onmouseout=function(){nextElement("nextlist",-50);nextElement("bg",-50);}for(var i=0;i<nextLis.length;i++){nextLis[i].onmouseover=function(){clearInterval(changebox);thisMove(this);}nextLis[i].onmouseout=function(){startMove();}lis[i].onmouseover=function(){clearInterval(changebox);//thisStop(this);}lis[i].onmouseout=function(){startMove();}}function startMove(){changebox = setInterval("moveElement()",4000);}function thisMove(obj){for(var i=0;i<nextLis.length;i++){nextLis[i].className="";if(nextLis[i]==obj){nextLis[i].className="current";num=i;setTimeout("moveElement()",0);}else{nextLis[i].className="";}}}
}
changebox = setInterval("moveElement()",4000);
checkMove();
</script>
</body>
</html>

源码地址:自写Js+CSS轮显效果.rar-互联网文档类资源-CSDN下载https://download.csdn.net/download/weixin_41937552/37380520

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux shell 指令 诸如-d, -f, -e之类的判断表达式

文件比较运算符-e filename 如果 filename存在&#xff0c;则为真 [ -e /var/log/syslog ]-d filename 如果 filename为目录&#xff0c;则为真 [ -d /tmp/mydir ]-f filename 如果 filename为常规文件&#xff0c;则为真 [ -f /usr/bin/grep ]-L filename 如果 filenam…

《javaScript100例|04》自动播放——Js幻灯片缓冲效果

目录 效果图 示例 源码地址&#xff1a; 效果图 示例 <html> <head> <title>自动播放——幻灯片缓冲效果</title> <style> body,div,ul,li{margin:0;padding:0;} ul{list-style-type:none;} body{background:#000;text-align:center;font:12p…

每周必写

这周没有上课&#xff0c;阅读了《代码大全》第六章模块化设计 内聚性和耦合性 模块化设计的目标是使每个子程序都成为一个“黑盒子”&#xff0c;你知道进入盒子和从盒子里出来 的是什么&#xff0c;却不知道里边发生什么。它的接口非常简单&#xff0c;功能明确&#xff0c;对…

eclipse鼠标变十了_Eclipse在过去十年中的主要成就

eclipse鼠标变十了正如我所写的那样 &#xff0c;Eclipse在11月庆祝了10年来的开源和社区。 Eclipse社区已经形成了许多里程碑 &#xff0c;但是主要成就是什么&#xff1f; Eclipse为实际改变软件行业做了什么&#xff1f; 这是我认为Eclipse的一些关键成就。 1.主导的Java ID…

vue安装教程及简介

Vue.js 是一套构建用户界面的渐进式框架。只关注视图层, 采用自底向上增量开发的设计。 目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单。 目录 常用的vue.js版本及方法 学习vue之前需要掌握基础html+css+javaScript知识。 比如: …

Spring和Amazon Web Services

如今&#xff0c; Amazon Web Services &#xff08;或AWS&#xff09;是要使用和部署到的基础架构和硬件提供商的最常见选择之一。 许多Spring应用程序已经解决了集成应用程序基础结构和底层的挑战。 这些内部解决方案在设计和实际功能方面在复杂性和复杂程度方面有所不同。 这…

学习进度条15

第十五周 所花时间&#xff08;包括上课&#xff09; 周一上午 8&#xff1a;00-9&#xff1a;50 上课 周一下午 13&#xff1a;00-14&#xff1a;00阅读人月神话 周五下午 15&#xff1a;30-17&#xff1a;30 整理本月期的所有作业 周六上午10&#xff1a;00-12&#xff1a;…

vue目录结构及简单的开发介绍

熟悉vue项目的目录结构,在一定程度上能提高我的开发效率及查找文件的速度。 这里比较推荐使用VS code编译器,HBuild-x,webstorm等编译器相比之下逊色不少,用过的就知道有多香。 目录 Vue.js 目录结构 目录说明 VUE入门基本操作 Vue.js 模板语法

PHP+jquery 树状菜单

本项目开发过程中涉及树状菜单&#xff0c;于是做如下分享菜单实现 不足之处请大牛指点并见谅&#xff08;如图&#xff09; 1&#xff1a;数据表涉及字段 id int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 系统菜单ID, pid int(10) DEFAULT NULL COMMENT 父级ID, name va…

vue条件语句与循环语句的基本使用

目录 Vue.js 条件语句 Vue.js 循环语句 Vue.js 条件语句 条件判断使用 v-if 指令 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 孙叫兽的博客</title> <script src="https://cdn.s…

javaone_虚拟化Java应用程序:最佳实践(JavaOne 2011)

javaone贾斯汀穆雷&#xff08;Justin Murray&#xff09;早五分钟就开始了他的演讲[“虚拟化Java应用程序&#xff1a;最佳实践”&#xff08;21860&#xff09;]&#xff0c;并说虚拟化已经到了人们不再需要担心利用虚拟化的地步。 他说他的演讲大约有一年的历史了&#xff0…

vue计算属性computed与监听属性watch的基本使用

目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 反转字符串的示例 <!DOCTYPE html> <html> <he

连接(交叉连接、内连接、外连接、自连接)

本文非原创 可分为&#xff1a;交叉连接、内连接、外连接、自连接 1.使用交叉连接&#xff1a; 它是非限制连接&#xff0c;就是将两个表格不加任何条件的组合在一起&#xff0c; 即第一个表格的所有记录分别和第二个表格的每一条记录相连接 组合成新的记录&#xff0c;连接后结…

vue样式绑定与事件处理器的基本使用

目录 Vue.js 样式绑定 Vue.js 事件处理器 事件修饰符 Vue.js 样式绑定

Finally 与 return

网上有很多人探讨Java中异常捕获机制try...catch...finally块中的finally语句是不是一定会被执行&#xff1f;很多人都说不是&#xff0c;当然他们的回答是正确的&#xff0c;经过我试验&#xff0c;至少有两种情况下finally语句是不会被执行的&#xff1a; &#xff08;1&…

vue表单的基本使用

Vue.js 表单 介绍 一下Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 input 和 textarea 元素中使用 v-model 实现双向数据绑定: <!DOCTYPE html> <html> <head…

fold函数_Java中使用Map and Fold进行函数式编程

fold函数在函数式编程中&#xff0c;Map和Fold是两个非常有用的运算符&#xff0c;它们属于每种函数式语言。 如果Map和Fold运算符是如此强大且必不可少&#xff0c;那么您如何解释说即使Java编程语言缺少这两个运算符&#xff0c;我们也可以使用Java来完成工作&#xff1f; 事…

NVIC优先级分组

挂起&#xff0c;解挂&#xff0c;使能&#xff0c;失能 转载于:https://www.cnblogs.com/alantechnique/p/5598374.html

Vue组件及自定义事件

目录 Vue.js 组件 动态 Prop Prop 验证 Vue.js 组件 - 自定义事件 data 必须是一个函数

高级Lucene查询示例

本文是我们名为“ Apache Lucene基础知识 ”的学院课程的一部分。 在本课程中&#xff0c;您将了解Lucene。 您将了解为什么这样的库很重要&#xff0c;然后了解Lucene中搜索的工作方式。 此外&#xff0c;您将学习如何将Lucene Search集成到您自己的应用程序中&#xff0c;以…