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

xjwolaile

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

最近访客更多访客>>

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
浏览 1014
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

最近访客更多访客>>