Welcome, Old Sport!

带Loading效果的幻灯片

by ilikecss ON 2011/10/18 7966

幻灯片效果有各式各样,带加载的比较少,今天要给大家介绍这款加载效果幻灯片,功能方面还有文字渐隐浮出;如果你有什么看法请发表留言。

Step1. 创建HTML

<li class="active">
    <div class="visual">
        <div class="img-center">
            <div class="img-width">
                <img src="images/img01.jpg" alt="image description" width="750" height="210" >
            </div>
        </div>
    </div>
    <div class="area">
        <hgroup class="txt"><h2 class="title"><span>Hello,</span><span>WelCome To</span><span>Sunflowa Media</span></h2></hgroup>
        <span class="small-txt">Wel Come to Sunflowa Media</span>
    </div>
</li>

Step2. 创建CSS

.gallery-section{
	width: 750px;
	height: 210px;
	overflow:hidden;
	position:relative;
}
.gallery-section .gallery{
	position:relative;
	width:100%;
	overflow:hidden;
	height: 210px;
}
.gallery-section .gallery .active{z-index:10;}
.gallery-section .gallery li{
	position: absolute;
	z-index:1;
	width: 100%;
	height: 210px;
	text-align:center;
}
.gallery-section .area{
	width: 750px;
	position: relative;
	height: 210px;
}
.gallery-section .txt{
	position: relative;
	float:left;
	padding: 10px 0 0 21px;
	text-align:left;
	font:57px/60px 'DaxRegular', Arial, Helvetica, sans-serif;
}
.gallery-section .small-txt{
	position:absolute;
	bottom:23px;
	left:155px;
	z-index:10;
	color:#30ACDC;
	text-shadow: 0px 1px 1pxpx #444;
	margin-bottom:-1px;
	font: 11px/12px 'HelveticaNeueItalic', bold, Arial, Helvetica, sans-serif;
}
.gallery-section .txt-right{
	float:right;
	text-align:right;
	padding:129px 19px 0 21px;
	font:45px/52px 'DaxRegular', Arial, Helvetica, sans-serif;
}
.gallery-section .txt-right2{
	float:right;
	text-align:right;
	padding:129px 19px 0 21px;
	font:40px/47px 'DaxRegular', Arial, Helvetica, sans-serif;
}

.gallery-section .txt h2 span{
	margin:-6px 0 0;
	display:block;
}
.gallery-section .txt .title {font: 25px/35px 'DaxRegular', Arial, Helvetica, sans-serif;}
.gallery-section .txt .title span{margin:0;}
.gallery-section .txt-small{
	padding: 148px 0 0 33px;
	text-shadow:1px 0 3px #000;
}
.gallery-section .txt-small h2 {font: 25px/35px 'HelveticaNeueLight', Arial, Helvetica, sans-serif;}
.gallery-section .holder{
	width: 100%;
	overflow:hidden;
	height:210px;
	position:relative;
}
.img-center{
	width: 750px;
	margin: 0 auto;
}
.img-center img{
	width:100%;
	height:auto;
}
.gallery-section .visual{
	position:absolute;
	top:0;
	width:100%;
	left:0;
	text-align:center;
	height:210px;
	overflow: hidden;
}
.max-width .img-center{width:100%;}
.max-width .img-width{margin:0;}
.switcher-holder{
	position:absolute;
	bottom:0;
	left:0;
	height:33px;
	z-index:10;
}
.switcher{
	margin:0 8px 0 26px;
	float:left;
}
.switcher li{
	float:left;
	width:26px;
	position:relative;
	margin:0 4px 0 0;
	height:8px;
	overflow:hidden;
	background:url(../images/bg-switch.png) no-repeat;
}
.switcher a{
	display:block;
	height:100%;
	text-indent:-9999px;
	overflow:hidden;
}
.switcher span{
	position:absolute;
	height:8px;
	top:0;
	left:-4px;
	background:url(../images/bg-switch.png) no-repeat 100% -10px;
	width:6px;
}
.switcher .l{
	background-position:0 -21px;
	z-index:10;
	left:-3px;
	width:3px;
}
.load-done span{
	left:2px;
	width:100%;
}
.load-done .l{
	left:0;
	width:3px;
}
.switcher li:hover span{
	width:100% !important;
	top:0;
	left:0 !important;
}
.switcher li:hover span.mask{left:2px !important;}
.switcher-holder .text{
	float:left;
	margin:-2px 0 0;
	color:#fff;
	text-shadow:1px 0 3px #000;
	font:10px/13px 'HelveticaNeueItalic', Arial, Helvetica, sans-serif;
}

Step3. 插入脚本

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
7条评论
  1. #1

    bluestar说道:

    真羡慕,我是个网页开发初学者!

    • 哈哈,这边也没什么特别技术的东西,还是针对初学者和中间的人群看的。

  2. #2

    bluestar说道:

    图片视觉效果真好!! 你有教程吗?想学习一下 颜色理论

  3. #3

    test说道:

    请问这个样式怎么不能下载了,能给我一份么。
    260337861@qq.com,谢谢!

    • ilikecss说道:

      你好,东西已经发你了,很早的文章了。
      由于github移除了网盘所以很多文件都无法访问了。

  4. #4

    nexusfai说道:

    这个我也下不了啊~可以再发一个给我吗?谢谢~^^

  5. #5

    ply说道:

    我也是不能下载下来,自己按照代码弄的没有这种效果,可不可以发一份给我呀,O(∩_∩)O谢谢




TOP