6月13号学习（轮播效果） -

xjwolaile

浏览: 344019 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

6月13号学习（轮播效果）

博客分类：

前端技术

今天的学习

1、轮播效果的html5

<!DOCTYPE html>
<head>
    <link href="css/slideshow.css" rel="stylesheet" />
    <script src="js/slideshow.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div class="comiis_wrapad" id="slideContainer">
        <div id="frameHlicAe" class="frame cl">
            <div class="block">
                <div class="cl">
                    <ul class="slideshow" id="slidesImgs">
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/1.jpg" width="960" height="230" alt="" /></a><span class="title">第1张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/2.jpg" width="960" height="230" alt="" /></a><span class="title">第2张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/3.jpg" width="960" height="230" alt="" /></a><span class="title">第3张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/4.jpg" width="960" height="230" alt="" /></a><span class="title">第4张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/5.jpg" width="960" height="230" alt="" /></a><span class="title">第5张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/6.jpg" width="960" height="230" alt="" /></a><span class="title">第6张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/7.jpg" width="960" height="230" alt="" /></a><span class="title">第7张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/8.jpg" width="960" height="230" alt="" /></a><span class="title">第8张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/9.jpg" width="960" height="230" alt="" /></a><span class="title">第9张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/10.jpg" width="960" height="230" alt="" /></a><span class="title">第10张图的描述信息</span></li>
                    </ul>
                </div>
                <div class="slidebar" id="slideBar">
                    <ul>
                        <li class="on">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        SlideShow(1000);
    </script>
</body>
</html>

在里面都是基础知识只有一点不大清楚就是 SlideShow(1000);它是一个什么效果，它是一个
计算时间的一个方法间隔多少毫秒里面的的毫秒数字越大间隔的时间就越久

下面是css

* { word-wrap: break-word; }
body { font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun'; color: #444; }
body, ul, li { margin: 0; padding: 0; }
    ul li { list-style: none; }
a { color: #000; text-decoration: none; }
    a:hover { text-decoration: underline; }
    a img { border: none; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }

.frame { margin-bottom: 10px; border: 1px solid #e1e1e1; background: #FFF; }
.title { padding: 0 10px; height: 32px; font-size: 14px; font-weight: 700; line-height: 32px; overflow: hidden; }

.block { margin: 10px 10px 0; }

.temp { margin: 1px; }

.slideshow { clear: both; }
    .slideshow li { position: relative; overflow: hidden; }
    .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); color: #FFF; overflow: hidden; }
.slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; }
    .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF); color: #000; font-weight: 700; }


ul, li { list-style: none; }
a:hover { text-decoration: underline; color: #a50001; }

.frame { background: none; border: 0px solid #fff; margin-bottom: 0px; }
.temp { margin: 0; }
.slidebar { position: absolute; top: 5px; left: 4px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #FFF; overflow: hidden; }
        .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #ff0; font-weight: 700; }

.slideshow SPAN.title { text-indent: 0px; }
.block { margin: 0;position: relative; }
#frameHlicAe { margin: 0px !important; border: 0px !important; }
.comiis_wrap960, .comiis_wrapad { margin: 0 auto; width: 960px; }
.comiis_wrapad { margin-top: 10px; }
.comiis_wrapad { overflow: hidden; }
    .comiis_wrapad img { float: left; margin-top: 0px; }

#slidesImgs li { width: 960px; height: 230px; display: none; }

css里面也没什么特殊的地方主要就是使用了伪类来hover { text-decoration: underline; color: #a50001; }来做一个鼠标触碰的效果

下面是javascript这才是整个效果和核心也是他的效果所在

function SlideShow(c) {
    var a = document.getElementById("slideContainer"), 
    	f = document.getElementById("slidesImgs").getElementsByTagName("li"), 
    	h = document.getElementById("slideBar"), 
    	n = h.getElementsByTagName("li"), 
    	d = f.length, 
    	e = lastI = 0, 
    	j, 
    	m;
    function b() {
        m = setInterval(function () {
            e = e + 1 >= d ? e + 1 - d : e + 1;
            g()
        }, c)
    }
    function k() {
        clearInterval(m)
    }
    function g() {
        f[lastI].style.display = "none";
        n[lastI].className = "";
        f[e].style.display = "block";
        n[e].className = "on";
        lastI = e
    }
    f[e].style.display = "block";
    a.onmouseover = k;
    a.onmouseout = b;
    h.onmouseover = function (i) {
        j = i ? i.target : window.event.srcElement;
        if (j.nodeName === "LI") {
            e = parseInt(j.innerHTML,10) - 1;
            g()
        }
    };
    b()
}
;

e = lastI = 0,e 是一个全部结束后返回

m = setInterval 获得每个间隔那么获得什么的每个间隔呢

e = e + 1 >= d ? e + 1 - d : e + 1;e+1就是从当轮播到9以后就是要结束了进一个位置1个就是到10那么2就是到11但是我们没有11就是1就是10 e+1-d 就是当到9以后要结束跳几个位置要是里面写2的话就会从9直接跳到1中就少了一个10这个根据个人需要来调整前面一个是到9后跳到多少2就跳到11以后在执行这一句这句是说到9以后返回多少2就直接返回到1最后一个e + 1就是从第一张图片开始跳中间跳几格1就是一格2就是两格所以第一个是结尾跳几格第二个是返回重新跳几格第三个是在从1到10之间每次跳几格

g()下面有等下说

c就是开始毫秒每次跳动要用要用多少毫秒我们里面是1000就是一个格子的跳动要花1000毫秒

function k() {
        clearInterval(m)
    }

这个很好里面就是让我们从第一张图片开始到第十张图片全部跳完了在从新放回到上面的m方法里面从新开始计算新的一轮的跳动

g()在这里g方法

f[lastI].style.display = "none";意思就是在每次更换图片以后把更换掉的图片进行隐藏

n[lastI].className = "";是说每次跳动一张图片以后上面的序号就是1到10的序号也会发生改变那么这个就是将失去相对应的序号取消掉一个css里面的背景颜色的改变要是没有这一段的话就是现在是1序号背景颜色里面是白色当跳到2序号的的图片时2序号的背景颜色是白色1序号的也是白色这个就是一个清楚失去焦点的效果当它还原

f[e].style.display = "block";就是将把要跳出现来的图片显示出来前面是把跳掉的图片隐藏掉那么这个就是把要出现的图片显示出来

n[e].className = "on";上面说到序号的背景颜色发生变化这个就是当跳到相对应的图片序号时当背景颜色发生改变前面是将跳过的序号的背景颜色更换为正常的

lastI = e就是将这个序号的效果和图片隐藏显示的效果放到上面的e方法里面进去当图片在不同跳动的时候序号和隐藏展示图片的效果跟随着跳动一起执行g方法里面只有效果但是没有要怎么执行那么lastI = e就是告诉它要怎么去执行

f[e].style.display = "block";这个是在打开页面的时候第一张图片总是保持显示的状态不会隐藏

a.onmouseover = k;是说当鼠标触屏到那个序号或者图片的的时候停止一切轮播的效果

a.onmouseout = b;当鼠标离开序号或者图片的时候轮播效果继续执行

h.onmouseover = function (i) {
        j = i ? i.target : window.event.srcElement;
        if (j.nodeName === "LI") {
            e = parseInt(j.innerHTML,10) - 1;

这一段是说当鼠标触及到序号的时候图片就会展示鼠标触及到的相对应序号的图片

g()方法就是说这几个序号的效果要在那里面进行执行

b()这个最后的b方法就是相当于发动机的要是开放发动机运动没有一切的效果都是空的所以的效果什么的从最下面的b方法开始进入

分享到：

6月14号学习jquery(选择器) | 6月12号学习jquery（noConflict() 方法、 ...

2013-06-14 00:47
浏览 1013
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

85个ppt动画大师案例打包下载.zip: 标题 "85个ppt动画大师案例打包下载.zip" 提供的是一个包含多个PPT动画示例的资源集合，这些示例是由不同的动画大师创作的，旨在帮助用户学习和理解如何在PowerPoint中创建动态效果。描述中提到这些案例仅供参考，...

建站之星v2.1最新商业破解版带1千多套模板: (2)用户可以选择八种banner轮播效果中的任意一种 (3)针对对图片banner可以对属性进行设置，如：图片标题、显示顺序、是否有链接以及链接打开方式。 4、添加网站用户角色管理 (1)用户的添加角色选择功能。 (2)...

最新建站之星2.1商业破解版带1千多套模板: (2)用户可以选择八种banner轮播效果中的任意一种 (3)针对对图片banner可以对属性进行设置，如：图片标题、显示顺序、是否有链接以及链接打开方式。 4、添加网站用户角色管理 (1)用户的添加角色选择功能。 (2)...

python入门到高级全栈工程师培训第3期附课件代码: python入门到高级全栈工程师培训视频学习资料；本资料仅用于学习，请查看后24小时之内删除。【课程内容】第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和...

vue3 访问通义千问聊天代码例子: vue3 访问通义千问聊天代码例子

基于Python的Flask-vue基于Hadoop的智慧校园数据共享平台实现源码-演示视频.zip: 基于Python的Flask-vue基于Hadoop的智慧校园数据共享平台实现源码-演示视频项目关键技术开发工具：Pycharm 编程语言: python 数据库: MySQL5.7+ 后端技术：Flask 前端技术：HTML 关键技术：HTML、MYSQL、Python 数据库工具：Navicat、SQLyog

C#调用Ni板卡进行实现采集任务(模拟量输入输出)示例1: 【实验1】：读取一次AI0通道数值【实验2】：一次读取AI0通道多个数值【实验3】：单次模拟量输出【实验4】：连续模拟量输出（输出一个正弦曲线）

无人船的Smith-PID跟踪控制方法研究及实现：融合传统与最优PID策略的LOS曲线跟踪资料,基于无人船Smith-PID改进: 无人船的Smith-PID跟踪控制方法研究及实现：融合传统与最优PID策略的LOS曲线跟踪资料,基于无人船Smith-PID改进跟踪控制技术及其LOS曲线跟踪方法研究资料,基于无人船的smith-pid跟踪控制资料。首先，针对pid进行了改进，有传统pid，最优pid和基于smith的pid三种控制方式。然后还在smithpid基础上设计了LOS的曲线跟踪方法。（有对应参考文献）。有意者可直接联系，参考学习资料。 python语言。 ,基于无人船的Smith-PID跟踪控制; PID改进(传统PID、最优PID、基于Smith的PID); Smith-PID曲线跟踪方法; 参考学习资料; Python语言。,基于无人船的Smith-PID优化跟踪控制资料

自研船舶电力推进系统MATLAB仿真报告：从柴油机+同步发电机到异步电机直接转矩控制的全面模拟与实践,船舶电力推进系统自搭MATLAB仿真报告：从柴油机同步发电机到异步电机直接转矩控制的完整过程与参: 自研船舶电力推进系统MATLAB仿真报告：从柴油机+同步发电机到异步电机直接转矩控制的全面模拟与实践,《船舶电力推进系统自搭MATLAB仿真报告：从柴油机同步发电机到异步电机直接转矩控制的完整过程与参数配置详解》,自己搭建的船舶电力推进系统（船舶电力推进自动控制）完全自搭MATLAB仿真，可适度，含对应27页正文的中文报告，稀缺资源，仿真包括船舶电站，变流系统和异步电机直接转矩控制，放心用吧。三个文件逐层递进柴油机+同步发电机（船舶电站）柴油机+同步发电机+不控整流全桥逆变柴油机+同步发电机+变流模块+异步电机直接转矩控制所有参数都是配好的，最大负载参考变流系统所带负载两倍，再大柴油机和同步发电机参数就不匹配了，有能力可以自己调 ,核心关键词：船舶电力推进系统; MATLAB仿真; 船舶电站; 变流系统; 异步电机直接转矩控制; 柴油机; 同步发电机; 不控整流全桥逆变; 参数配比。,《船舶电力推进系统MATLAB仿真报告》

西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参: 西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V 15大型自动化系统项目，包含多台服务器客户端项目，系统采用安全1516F -3PN DP 外挂多台精智面板，1200PLC ET200SP 变频器对整个工艺过程PID DCS 闭环过程控制，如何调整温度压力流量液位等参数，实用工程项目案例 ,西门子博图WinCC V 15; 大型自动化系统; 多台服务器客户端; 安全外挂; 精智面板; 1200PLC ET200SP; 变频器; PID DCS; 闭环过程控制; 温度压力流量液位调整; 工程项目案例,西门子博图WinCC V15大型项目：多服务器客户端的PID DCS闭环控制与实用参数调整

计算机网络资源全解析: 硬件、软件、协议及安全机制详解与应用: 内容概要：本文详尽介绍了计算机网络相关资源及其各方面构成要素，首先阐述了硬件层面的各种传输媒介和设备如双绞线、同轴电缆、光纤以及台式电脑、笔记本、大型计算机等设备，还包括网络互联所需的各类组件如网卡、交换机、路由器等。其次探讨了多种操作系统的特性和主要功能，以及各类通讯和支持应用程序的概述，涵盖浏览器、图像和视频编辑等常用软件。再深入讨论了多种常见网络协议如TCP、UDP、HTTP等的功能特性。最后还提到了确保网络安全运行的重要措施和工具如MIB、SNMP以及防火墙、入侵检测系统等。并且简要提到计算机网络在不同的应用环境，从局域网到移动网络。适合人群：所有对计算机网络技术感兴趣的初学者和希望深入了解各个组成成分的技术人员. 使用场景及目标：为用户提供计算机网络资源全面而系统的认识，帮助他们建立对于该领域的理论和技术的扎实认知基础，提高在实际环境中识别配置及维护计算机网络系统的能力.

【GPS北斗定位】基于matlab卡尔曼滤波KF北斗GPS单模和双模定位比较【含Matlab源码 10974期】.mp4: 海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

ABAQUS中隧道结构模型的无限元应用：超声激励源的施加方法、3D无限元吸收边界的添加技巧、模型结果精确性校核流程及教学视频与CAE、INP文件解析,ABAQUS隧道模型中3D无限元吸收边界的应用：超: ABAQUS中隧道结构模型的无限元应用：超声激励源的施加方法、3D无限元吸收边界的添加技巧、模型结果精确性校核流程及教学视频与CAE、INP文件解析,ABAQUS隧道模型中3D无限元吸收边界的应用：超声激励源的施加与模型结果精确性校核的实践教程,ABAQUS无限元吸收边界，abaqus隧道无限元，1.超声激励源施加;2.3D无限元吸收边界添加方法；3.模型结果精确性校核；4.提供教学视频，cae、inp文件。 ,ABAQUS无限元吸收边界；ABAQUS隧道无限元；超声激励源施加；3D无限元吸收边界添加；模型结果精确性校核；CAE和INP文件。,ABAQUS中超声激励下无限元吸收边界设置及模型精度验证教程

【SLAM】基于matlab扩展卡尔曼滤波器EKF同步定位与建图SLAM【含Matlab源码 10978期】复现.mp4: 海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

git自用lllllllllllllllllll: git自用lllllllllllllllllll

【Django小白项目】参照本，包含python、HTML、Django: 本资源与文章【Django小白项目】为一体，此为已成功项目，供给给Django初学者做参考，有不会的问题可以私信我噢~

C++矩阵运算库matrix: 使用一维数据表示向量和二维矩阵，支持常用运算。

基于STM32的宠物自动喂食器系统设计.pdf: 1、以上文章可用于参考，请勿直接抄袭，学习、当作参考文献可以，主张借鉴学习 2、资源本身不含对应项目代码，如需完整项目源码，请私信博主获取

基于多目标粒子群优化算法（MOPSO）的微电网多目标经济运行分析与优化策略考虑响应侧响应的协同调度策略,基于多目标粒子群优化算法（MOPSO）的微电网经济调度优化：含风光储荷一体化模型与需求侧响应策略: 基于多目标粒子群优化算法（MOPSO）的微电网多目标经济运行分析与优化策略考虑响应侧响应的协同调度策略,基于多目标粒子群优化算法（MOPSO）的微电网经济调度优化：含风光储荷一体化模型与需求侧响应策略,考虑需求侧响应的微电网多目标经济运行建立了含风光储荷的微电网模型，以发电侧成本(包括风光储以及电网的购电成本)和负荷侧成本最小为目标，考虑功率平衡以及储能SOC约束，建立了多目标优化模型，通过分时电价引导负荷需求侧响应，得到可削减负荷量，同时求解模型，得到风光储以及电网的运行计划。这段代码是一个使用多目标粒子群优化算法（MOPSO）解决问题的程序。下面我将对程序进行详细的分析和解释。首先，程序的目标是通过优化算法来解决一个多目标优化问题。程序中使用的优化算法是多目标粒子群优化算法（MOPSO），该算法通过迭代更新粒子的位置和速度来搜索最优解。程序的主要功能是对能源系统进行优化调度，包括光伏发电、风力发电、储能和电网供电。程序的目标是最小化能源系统的成本，并满足负荷需求。程序的主要思路是使用粒子群优化算法来搜索最优解。程序中定义了一个粒子类（Particle），每个粒子代

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

6月13号学习（轮播效果）

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

使用模版的基本尝试-20131209

最近访客更多访客>>