HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例

更新时间:2023-04-06 15:28:45 阅读：评论：0

哈，首先感谢下w3cfuns的老师，嗯~

好了，这次给发夹分享一个css3+javascript vcd包装盒个性幻灯片的一个案例。

效果图：

图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。

先看下html：

复制代码代码如下:

<!doctype html public “-//w3c//dtd html 4.01 transitional//en”

“/d/file/titlepic/loo.dtd& />
<html>

<head>

<title></title>

<meta content=”text/html;chart=utf-8″ http-equiv=”content-type”>

<link type=”text/css” href=”ret.css” rel=”stylesheet”>

<link type=”text/css” href=”main.css” rel=”stylesheet”>

<script type=”text/javascript” src=”../../jquery-1.8.3.js”></script>

<script type=”text/javascript” src=”vcd.js”></script>

<script type=”text/javascript”>

$(function ()

{

vcd.init();

vcd.autoplay();

});

</script>

</head>

<body>

<div id=”vcd”>

<i id=”cd”></i>

<ul>

<li class=”active”><a><img alt=”超人归来” src=”ad/1.jpg”/></a></li>

<li><a><img alt=”超凡蜘蛛侠” src=”ad/2.jpg”/></a></li>

<li><a><img alt=”黑暗骑士：蝙蝠侠” src=”ad/3.jpg”/></a></li>

<li><a><img alt=”美国队长” src=”ad/4.jpg”/></a></li>

<li><a><img alt=”雷神托儿” src=”ad/5.jpg”/></a></li>

<li><a><img alt=”金刚狼” src=”ad/6.jpg”/></a></li>

</ul>

<a id=”wrappager” title=”超人归来” target=”_blank”></a>

<div id=”indexbar”>

<a class=”active”>0</a>

<a href=”#”>1</a>

<a href=”#”>2</a>

<a href=”#”>3</a>

<a href=”#”>4</a>

<a href=”#”>5</a>

</div>

</div>

</body>

</html>

可以看到div#vcd是最外层容器，给它设置了一个背景；ul li 分别设置图片元素；i#cd设置背景为光盘，然后设置显示位置；div#indexbar中显示图片的索引，供点击。

css：

复制代码代码如下:

#vcd, #vcd ul, #vcd #wrappager

{

width: 200px;

height: 272px;

}

#vcd, #vcd ul, #vcd #wrappager, #cd

{

background: url(“images/disk.png”) no-repeat 0 0;

}

#vcd

{

position: relative;

margin: 20px auto 0;

}

#vcd ul, #vcd #wrappager, #cd

{

position: absolute;

}

#vcd ul

{

background-position: -263px 3px;

}

#vcd ul li, #vcd ul li a, #vcd ul li a img

{

display: block;

width: 178px;

height: 264px;

overflow: hidden;

}

#vcd ul li

{

top: 5px;

left: 2px;

opacity: 0;

/*visibility: hidden;*/

-webkit-transition: opacity linear .6s;

/*-webkit-transition: visibility linear .6s;*/

-moz-transition: opacity linear .6s;

-ms-transition: opacity linear .6s;

transition: opacity linear .6s;

position: absolute;

}

#vcd ul li.active

{

opacity: 1;

/*visibility: visible;*/

}

#vcd #cd

{

top: 64px;

left: 78px;

width: 146px;

height: 146px;

background-position: -510px 0;

-webkit-transition: left ea .4s, -webkit-transform ea 1.2s .44s;

-moz-transition: left ea .4s, -moz-transform ea 1.2s .44s;

-ms-transition: left ea .4s, -ms-transform ea 1.2s .44s;

transition: left ea .4s, transform ea 1.2s .44s;

}

#vcd #cd.switch

{

left: 120px;

-webkit-transform: rotate(2520deg);

-moz-transform: rotate(2520deg);

-ms-transform: rotate(2520deg);

transform: rotate(2520deg);

}

#vcd #wrappager

{

display: block;

left: 0;

top: 2px;

}

#vcd #indexbar

{

top: 235px;

left: 25px;

text-align: center;

overflow: hidden;

opacity: 0;

visibility: hidden;

-webkit-transition: opacity linear .6s;

-moz-transition: opacity linear .6s;

-ms-transition: opacity linear .6s;

transition: opacity linear .6s;

position: absolute;

}

#vcd:hover #indexbar

{

opacity: 1;

visibility: visible;

}

#vcd #indexbar a

{

display: inline-block;

margin: 0 4px;

height: 0;

width: 0;

border: 4px #9f9f9f solid;

border-radius: 100%;

text-inden中医学院招生条件t: -200px;

overflow: hidden;

}

#vcd #indexbar a:hover, #vcd #indexbar a.active

{

width: 4px;

height: 4px;

border-color: #05c7fe;

border-width: 2px;

}

对于css大家可以照着敲一下，对于位置的布局主要就是依赖position:relative和position:absolute;然后大家会发现使用css3的过渡和变形：transition和transform 我简单提一下：

1、transition : left 1s ea 0s ;

参数1：需要过渡效果的属性，可以为单个属性：width,left等，也可以设置为all。

参数2：过渡的持续时间

参数3：过渡的速率动画，这个大家有兴趣可以查查，就是先慢后快，匀速之类的。

参数4：过渡开始的延时时间

transition也支持如下写法：

transition-property:border, color , text-shadow ;

transition-duration:2s , 3s , 3s诚信的故事 ;

2、transform支持几种变形

transform:scale(0.5) 缩放

transform:rotate(90deg)旋转90度

transform:skew(10deg 2deg)斜切，矩形转化为平行四边形

transform:matrix() 这个矩阵变形 /d/file/titlepic/ 这个网站提供在线设计矩阵

transform:translate(40px 20px)平移

例外提供了：transform-origin：20% 20%；用于修改变形效果的起点，默认为重点

当然我们这个例子用的是旋转，也就不用修改变形效果起点了。

最后是js：

复制代码代码如下:

/**

* created with jetbrains webstorm.

* ur: zhy

* date: 14-6-15

* time: 下午6:26

* to change this template u file | ttings | file templates.

*/

var vcd = {

/**

* 常量

*/

id_vcd: “vcd”,

id_indexbar: “indexbar”,

id_cd: “cd”,

class_active: “active”,

class_cd_switch: “switch”,

currentindex: 0,

isrunning: fal,

timer: null,

init: function ()

{

/**

* 初始化数据与事件小雪节气的谚语

*/

vcd.vcd = $(“#” + vcd.id_vcd);

vcd.cd = $(冰天雪地造句“#” + vcd.id_cd);

vcd.imgs = $(“li”, vcd.vcd);

vcd.indexbar = $(“#” + vcd.id_indexbar);

vcd.vcd.mouover(func道客巴巴下载tion (event)

{

clearinterval(vcd.timer);

});

vcd.vcd.mouout(function ()

{

vcd.autoplay();

})

;

$(“a”, vcd.indexbar).click(vcd.dotclick);

},

/**

* 按钮点击切换

* @param event

*/

dotclick: function (event)

{

//如果当前动画还在运行，则直接返回

if (vcd.isrunning)return;

vcd.isrunning = true;

$(“a”, vcd.indexbar).removeclass(vcd.class_active);

$(this).addclass(vcd.class_active);

vcd.currentindex = $(this).text();

vcd.cd.addclass(vcd.class_cd_switch);

ttimeout(vcd.retdotclick, 1500);

event.preventdefault();//阻止a的默认跳转页面

},

/**

* 当cd动画结束后，更新图片

*/

retdotclick: function ()

{

vcd.cd.removeclass(vcd.class_cd_switch);

vcd.imgs.removeclass(vcd.class_active);

vcd.imgs.eq(vcd.currentindex).addclass(vcd.class_active);

vcd.isrunning = fal;

},

autoclick: function ()

{

var as = $(“a”, vcd.indexbar);

vcd.currentindex++;

if (vcd.currentindex == as.length)

{

vcd.currentindex = 0;

}

as.removeclass(vcd.class_active);

as.eq(vcd.currentindex).addclass(vcd.class_active);

vcd.cd.addclass(vcd.class_cd_switch);

ttimeout(vcd.retdotclick, 1500);

},

/**

* 自动播放

*/

autoplay: function ()

{

vcd.timer = tinterval(function ()

{

vcd.autoclick();

}, 3000);

}

}

;