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

最新推荐文章于 2024-11-08 16:09:18 发布

xjwolaile

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量127

点赞数 1

分类专栏：前端技术文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xjwolaile/article/details/84442542

版权

前端技术专栏收录该内容

188 篇文章 0 订阅

订阅专栏

今天的学习

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方法开始进入