標籤：css3 javascript 圖片輪播
轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/31015121
哈，首先感謝下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>
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;}
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); } } ;
<script type="text/javascript"> $(function () { vcd.init(); vcd.autoPlay(); }); </script>
點擊下載源碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
