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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6270字，纯文字阅读大概需要9分钟。

内容图文

哈，首先感谢下w3cfuns的老师，嗯~
好了，这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例。
效果图：
技术分享

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

复制代码

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<link type="text/css" href="reset.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 ease .4s, -webkit-transform ease 1.2s .44s;
-moz-transition: left ease .4s, -moz-transform ease 1.2s .44s;
-ms-transition: left ease .4s, -ms-transform ease 1.2s .44s;
transition: left ease .4s, transform ease 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-indent: -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 ease 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() 这个矩阵变形 http://www.useragentman.com/matrix/ 这个网站提供在线设计矩阵
transform:translate(40px 20px)平移
例外提供了：transform-origin：20% 20%；用于修改变形效果的起点，默认为重点
当然我们这个例子用的是旋转，也就不用修改变形效果起点了。

最后是JS：

复制代码

代码如下:

/**
* Created with JetBrains WebStorm.
* User: zhy
* Date: 14-6-15
* Time: 下午6:26
* To change this template use File | Settings | File Templates.
*/
var vcd = {
/**
* 常量
*/
ID_VCD: "vcd",
ID_INDEXBAR: "indexBar",
ID_CD: "cd",
CLASS_ACTIVE: "active",
CLASS_CD_SWITCH: "switch",
currentIndex: 0,
isRunning: false,
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.mouseover(function (event)
{
clearInterval(vcd.timer);
});
vcd.vcd.mouseout(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);
setTimeout(vcd.resetDotClick, 1500);
event.preventDefault();//阻止a的默认跳转页面
},
/**
* 当cd动画结束后，更新图片
*/
resetDotClick: 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 = false;
},
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);
setTimeout(vcd.resetDotClick, 1500);
},
/**
* 自动播放
*/
autoPlay: function ()
{
vcd.timer = setInterval(function ()
{
vcd.autoClick();
}, 3000);
}
}
;

单例的写法，定义了一个对象，然后用户通过vcd.init() ;vsd.autoPlay()调用、

复制代码

代码如下:

重置的css我就不贴了，下面我把源码提供给大家下载。
点击下载源码

原文：http://www.jb51.net/html5/177636.html

内容总结

以上是互联网集市为您收集整理的HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例全部内容，希望文章能够帮你解决HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1099254.html

来源：【匿名】

【上一篇】玩转HTML5移动页面【下一篇】html5如何获取php数据

更多 ►

【HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例】教程文章相关的互联网学习教程文章

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

哈，首先感谢下w3cfuns的老师，嗯~ 好了，这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例。效果图：图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。先看下html：复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html;charset=utf-8" http-equiv="c...

HTML5幻灯片系统：H5Slides【图】

H5Slides是一款基于HTML5的轻量级幻灯片播放系统，以前我们给客户演示幻灯片时，还需要在机器上安装ppt软件，有时还会因为版本问题安装失败，影响演示的进度。但是如果能用浏览器来实现ppt播放，那么这一切就简单多了，甚至可以在移动设备上播放幻灯片。同时，你也可以更方便的将自己的ppt分享给别的朋友。　　H5Slides的特点基于HTML5!不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片我们可以自由的在各种设备上进行幻灯演示...

详解HTML5幻灯片系统--H5Slides【图】

HTML5CSS3精美案例-实现VCD包装盒个性幻灯片的详情【图】

HTML5 CSS3 精美案例 -实现VCD包装盒个性幻灯片的详情效果图：图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。先看下html：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title></title><meta content="text/html;charset=utf-8" http-equiv="content-type"><link type="text/css" href="reset.css" rel="stylesheet"><link type...

详解强大的HTML5幻灯片系统-H5Slides【图】

H5Slides是一款基于HTML5的轻量级幻灯片播放系统，以前我们给客户演示幻灯片时，还需要在机器上安装ppt软件，有时还会因为版本问题安装失败，影响演示的进度。但是如果能用浏览器来实现ppt播放，那么这一切就简单多了，甚至可以在移动设备上播放幻灯片。同时，你也可以更方便的将自己的ppt分享给别的朋友。H5Slides的特点基于HTML5！不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片我们可以自由的在各种设备上进行幻灯演示我们...

零基础的人怎么用HTML5制作幻灯片？【图】

1、请最好推荐书籍以及知识点，多谢回复内容：推荐一下 impress.js http://bartaz.github.com/impress.js/#/bored ，可以看它的页面源码，里面有非常详细的注释，是比较好的学习材料。参考这个回答幻灯片软件除了 PowerPoint 和 Keynote 还有没有什么别的选择？不太明白你想要的是幻灯片还是自制一个HTML5幻灯片框架，不过貌似有现成的开源框架http://www.oschina.net/p/h5slideshttp://breakingbad.sinaapp.com这个是我自己写的...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例】教程文章相关的互联网学习教程文章

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

HTML5幻灯片系统：H5Slides【图】

详解HTML5幻灯片系统--H5Slides【图】

HTML5CSS3精美案例-实现VCD包装盒个性幻灯片的详情【图】

详解强大的HTML5幻灯片系统-H5Slides【图】

零基础的人怎么用HTML5制作幻灯片？【图】

HTML5的音频和JQUERY的全屏幻灯片

HTML5SVG响应式路径过渡动画幻灯片特效【图】

强大的HTML5幻灯片系统：H5Slides【图】

基于html5+css3特效可配制图片幻灯片切换代码_html/css_WEB-ITnose【图】

幻灯片 - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程