目錄如下：
只有text 是用於測試，其他都是必須的，img下面有兩個獨立的slider，兩個獨立方便日后修改圖片
以下是focus-slider中的 img/focus-slider是輪播圖片直接下載即可：
以下是todays-slider的圖片：
<!-- 輪播圖兩個思路：
1，把每個輪播對象看做一個對象進行輪播的
2，把所有輪播對象看做一個對象進行輪播的
每個輪播對象中只有一張圖片的輪播圖 直接加載 和 按需加載，基本一致，只有最后一點不同。
1，直接加載
使用輪播圖對象調用slider插件
$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade淡入淡出 slide滑動
activeIndex: 0, //默認圖片，圓點按鈕顯示的索引值
interval: 0 //自動輪播的時間間隔
});
2，按需加載
需要額外寫一段代碼，具體查看index.js 中的代碼
輪播必須步驟：
1，搭好結構，所有的類名必須保持一致。，謹記下載好圖片放到指定文件夾中。 indicator /'ɪndɪkeɪtə/ 標志
2，導入css樣式：base.css , common.css ，注意common.css中輪播圖中 的非共性樣式可以寫到index.css中去，輪播圖基本都是共性，復用時一些特性可以直接在index.css中覆蓋。
3，導入以下js腳本
jquery.js
transition.js //兼容：transitionend 動畫結束時執行的操作 的寫法
showHide.js //silent,css3,js，三種方式顯示
move.js //指定一個物體移動到指定位置。
slider.js //輪播圖腳本
index.js //特性腳本
注意點：
1，寫樣式時：
.slider-control{ display:none;} 必須隱藏，否則加載時不用鼠標懸浮，左右按鈕就會顯示
.slider-fade .slider-item{ display:none;} 必須隱藏，否則加載時，沒有把所有輪播圖片都隱藏，所以點擊前四次都是顯示第一張圖片
2，使用直接加載時，
使用輪播圖對象調用slider插件
$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade淡入淡出 slide滑動
activeIndex: 0, //默認圖片，圓點按鈕顯示的索引值
interval: 0 //自動輪播的時間間隔
});
結構中的img標簽改為: <img src="需要加載的圖片地址" alt=""> 即：
把整個輪播圖對象都修改為：
<div class="slider-item">
<a href="javascript:;"><img src='img/focus-slider/1.png' alt="" ></a>
</div>
3，其中以下幾個字體的左右尖括號比較向，方向鍵：
font-family: serif;
font-family: simsum;
4, 在index.js中
//手動延遲一秒，模擬從其他服務器獲取圖片
//setTimeout(function(){
//image.src = url;
//},1000);
===此外，每個輪播對象 .slider-item 中有多張圖片時的做法：===
1，寫好結構如下：.todays整個結構，謹記下載好需要的圖片
2，todays-slider 這可以寫到index.css中，特有樣式：
.todays .slider{//設置整個輪播圖的寬高
width:100%;
height:158px;
}
.todays .slider-img{ //設置每個圖片的寬度
width:240px;
}
3，按需加載 的代碼：
//todays-slider
var $todaysSlider = $('#todays-slider');
$todaysSlider.items = {};
$todaysSlider.loadedItemNum = 0;
$todaysSlider.totalItemNum = $todaysSlider.find('.slider-img').length;
$todaysSlider.on('slider-show', $todaysSlider.loadItem = function(e, index, elem) {
console.log(1);
if ($todaysSlider.items[index] !== 'loaded') {
$todaysSlider.trigger('slider-loadItem', [index, elem]);
}
});
$todaysSlider.on('slider-loadItem', function(e, index, elem) {
// 按需加載
var $imgs = $(elem).find('.slider-img');
$imgs.each(function (_,el) { // _ 相當占位，不使用該參數。
var $img=$(el);
loadImg($img.data('src'), function(url) {
$img.attr('src', url);
$todaysSlider.items[index] = 'loaded';
$todaysSlider.loadedItemNum++;
console.log(index + ': loaded');
if ($todaysSlider.loadedItemNum === $todaysSlider.totalItemNum) {
// 全部加載完畢
$todaysSlider.trigger('slider-itemsLoaded');
}
}, function(url) {
console.log('從' + url + '加載圖片失敗');
// 多加載一次
// 顯示備用圖片
$img.attr('src', '../img/focus-slider/placeholder.png');
});
});
});
$todaysSlider.on('slider-itemsLoaded', function(e) {
console.log('itemsLoaded');
// 清除事件
$todaysSlider.off('slider-show', $todaysSlider.loadItem);
});
function loadImg(url, imgLoaded, imgFailed) {
var image = new Image();
image.onerror = function() {
if (typeof imgFailed === 'function') imgFailed(url);
}
image.onload = function() {
if (typeof imgLoaded === 'function') imgLoaded(url);
};
// image.src=url;
setTimeout(function() {
image.src = url;
}, 1000);
}
$todaysSlider.slider({
css3: true,
js: false,
animation: 'slide', // fade slide
activeIndex: 0,
interval: 0
});
-->
slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<!-- focus-slider -->
<div id="focus-slider" class="slider">
<div class="slider-container">
<div class="slider-item">
<a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/1.png' alt="" class="slider-img"></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/2.png' alt="" class="slider-img"></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/3.png' alt="" class="slider-img"></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/4.png' alt="" class="slider-img"></a>
</div>
</div>
<ol class="slider-indicator-wrap">
<li class="slider-indicator text-hidden fl">1</li>
<li class="slider-indicator text-hidden fl">2</li>
<li class="slider-indicator text-hidden fl">3</li>
<li class="slider-indicator text-hidden fl">4</li>
</ol>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
<!-- todays-slider -->
<div class="todays">
<div class="container">
<div id="todays-slider" class="slider">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/1.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/2.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/4.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/6.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/8.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/10.png" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/11.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
<a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
</div>
</div>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
base.css
/*css reset*/
/*清除內外邊距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*結構元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表單元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默認樣式*/
body, button, input, select, textarea {
/*font: 12px/1 微軟雅黑, Tahoma, Helvetica, Arial, 宋體, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共樣式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
common.css
/*公共樣式*/
.container {
/*站點導航*/
width: 1200px;
margin: 0 auto;
}
a.link {
/*鏈接正常顏色*/
color: #4d555d;
}
a.link:hover {
/*鏈接經過顏色*/
color: #f01414 !important;
}
.transition {
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.text-hidden{
text-indent: -9999px;
overflow: hidden;
}
.text-ellipsis{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/*showhide*/
.fadeOut {
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse {
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*slider 自己寫的輪播圖樣式*/
.slider{
margin: 100px auto;
height: 504px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
width: 728px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
position: relative;
overflow: hidden;
}
.slider-container{
}
.slider-item{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider-indicator-wrap{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
}
.slider-indicator{
width: 8px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
height: 8px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
border-radius: 50%;
background: #f7f8f9;
border: 2px solid #858b92; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
margin-left: 8px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
}
.slider-indicator-active {
background: #000; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
border: 2px solid #858b92; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
}
.slider-control{
/* 加載就隱藏，否則加載的時候就顯示着 */
display: none;
width: 28px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
height: 62px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
line-height: 62px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 22px; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
font-family: serif; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
background: #000; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
color: #fff; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
opacity: .8; /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
filter: alpha(opacity=80); /*非公共樣式,可以寫到index.css中，這里只存放公共樣式或組件*/
text-align: center;
}
.slider-control-left{
left: 0;
}
.slider-control-right{
right: 0;
}
.slider-slide .slider-item{
position: absolute;
top: 0;
left: 100%;/* 通過移動left屬性值來實現圖片切換，每次移動都是圖片的100%寬度 */
width:100%;
height: 100%;
}
.slider-fade .slider-item{
/* 加載就隱藏，否則會出現前面幾次點擊不會切換圖片 */
display: none;
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}
/*todays-slider 這可以寫到index.css中，都是特性*/
.todays .slider{
width:100%;
height:158px;
}
.todays .slider-img{
width:240px;
}
jquery.js
<!-- 這里使用CDN引入jquery.js文件，僅用發布時使用，開發時比較慢 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/*
開發時使用本地效率比較高
判斷如果上面的cdn引入的jquery.js文件沒有成功(如：服務器不穩定導致)
則引入本地的jquery.js文件。
此外，結尾的的script標簽使用反斜杠進行轉義： \/ */
window.jQuery || document.write('<script src = "js/index.js"><\/script>')
//也可以使用字符串拼接
// window.jQuery || document.write('<script src = "js/index.js"><' + '/script>')
</script>
transition.js
(function () {
// 'use strict';//在IE瀏覽器下，使用嚴格模式是不能定義多個變量的，所以不能使用嚴格模式
//判斷樣式是否支持該瀏覽器，可以在控制台輸出 document.body.style[屬性名] = ""; 則支持
//如果返回的 undefined 則不支持。
//因為調用未定義的對象，報錯;使用未定義的屬性，返回undefined
var transitionEndEventName = {
transition: 'transitionend',
MozTransition: 'transitionend',
WebkitTransition: 'webkitTransitionEnd',
OTransition: 'oTransitionEnd otransitionend'
};
var transitionEnd = '',
isSupport = false;
for (var name in transitionEndEventName) {
if (document.body.style[name] !== undefined) {
transitionEnd = transitionEndEventName[name];
isSupport = true;
break;
}
}
//暴露一個借口對象給外界調用
// window.mt = "" window.mt = undefined 進行隱式轉換 都是false
// 所以window.mt 只能是一個對象時才返回真
// 與找false,或找true
window.mt = window.mt || {};
window.mt.transition = {
end: transitionEnd,
isSupport: isSupport
};
})();
showHide.js
(function($) {
var transition = window.mt.transition; // transition兼容解決，transition.js
// 提取init公共部分
function init($elem, hiddenCallback) {
if ($elem.is(':hidden')) {
$elem.data('status', 'hidden');
if (typeof hiddenCallback === 'function') hiddenCallback();
} else {
$elem.data('status', 'shown');
}
}
// 提取show公共部分
function show($elem, callback) {
if ($elem.data('status') === 'show') return;
if ($elem.data('status') === 'shown') return;
$elem.data('status','show').trigger('show');
callback();
}
function hide($elem, callback) {
if ($elem.data('status') === 'hide') return;
if ($elem.data('status') === 'hidden') return;
$elem.data('status', 'hide').trigger('hide');
callback();
}
// 正常顯示和隱藏
var silent = {
//初始化顯示和隱藏的狀態
// if ($elem.is(':hidden')) {
// $elem.data('status', 'hidden');
// if(typeof hiddenCallback==='function') hiddenCallback();
// } else {
// $elem.data('status', 'shown');
// }
// 提取公共init后
init: init,
// show: function($elem) {
// //判斷狀態，解決重復觸發事件
// if ($elem.data('status') === 'show') return;
// if ($elem.data('status') === 'shown') return;
// //給元素添加狀態值
// $elem.data('status', 'show').trigger('show');
// $elem.show();
// $elem.data('status', 'shown').trigger('shown');
// },
show: function($elem) {
show($elem, function() {
$elem.show();
$elem.data('status', 'shown').trigger('shown');
});
},
// hide: function($elem) {
// if ($elem.data('status') === 'hide') return;
// if ($elem.data('status') === 'hidden') return;
// $elem.data('status', 'hide').trigger('hide');
// $elem.hide();
// $elem.data('status', 'hidden').trigger('hidden');
// }
hide: function($elem) {
hide($elem, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
}
};
// 帶效果的顯示和隱藏，css3實現方法
var css3 = {
fade: { // 淡入淡出
// init: function($elem) {
// $elem.addClass('transition');
// if ($elem.is(':hidden')) {
// $elem.data('status', 'hidden');
// $elem.addClass('fadeOut');
// } else {
// $elem.data('status', 'shown');
// }
// 提取公共init后，獨有的內容
// init: function($elem) {
// $elem.addClass('transition');
// init($elem, function() {
// $elem.addClass('fadeOut');
// });
init: function($elem) {
css3._init($elem, 'fadeOut');
},
// show: function($elem) {
// if ($elem.data('status') === 'show') return;
// if ($elem.data('status') === 'shown') return;
// //給元素添加狀態值
// $elem.data('status', 'show').trigger('show');
// $elem.off('transitionend').one('transitionend', function() {
// $elem.data('status', 'shown').trigger('shown');
// });
// $elem.show();
// setTimeout(function() {
// $elem.removeClass('fadeOut');
// }, 20);
// },
show: function($elem) {
css3._show($elem, 'fadeOut');
},
// hide: function($elem) {
// if ($elem.data('status') === 'hide') return;
// if ($elem.data('status') === 'hidden') return;
// $elem.data('status', 'hide').trigger('hide');
// $elem.off('transitionend').one('transitionend', function() {
// $elem.hide();
// $elem.data('status', 'hidden').trigger('hidden');
// });
// $elem.addClass('fadeOut');
// }
hide: function($elem) {
css3._hide($elem, 'fadeOut');
}
},
slideUpDown: { // 上下滾動
// init: function($elem) {
// $elem.height($elem.height()); //設置高度，解決沒有slideUpDown的過程。
// $elem.addClass('transition');
// init($elem, function() {
// $elem.addClass('slideUpDownCollapse');
// });
init: function($elem) {
$elem.height($elem.height());
css3._init($elem, 'slideUpDownCollapse');
},
show: function($elem) {
css3._show($elem, 'slideUpDownCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideUpDownCollapse');
}
},
slideLeftRight: { // 左右滾動
init: function($elem) {
$elem.width($elem.width());
css3._init($elem, 'slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideLeftRightCollapse');
}
},
fadeSlideUpDown: { // 淡入淡出上下滾動
init: function($elem) {
$elem.height($elem.height());
css3._init($elem, 'fadeOut slideUpDownCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideUpDownCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideUpDownCollapse');
}
},
fadeSlideLeftRight: { // 淡入淡出左右滾動
init: function($elem) {
$elem.width($elem.width());
css3._init($elem, 'fadeOut slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideLeftRightCollapse');
}
}
};
css3._init = function($elem, className) {
$elem.addClass('transition');
init($elem, function() {
$elem.addClass(className);
});
};
css3._show = function($elem, className) {
show($elem, function() {
$elem.off(transition.end).one(transition.end, function() {
$elem.data('status', 'shown').trigger('shown');
});
$elem.show();
setTimeout(function() {
$elem.removeClass(className);
}, 20);
});
};
css3._hide = function($elem, className) {
hide($elem, function() {
$elem.off(transition.end).one(transition.end, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
$elem.addClass(className);
});
}
// 帶效果的顯示和隱藏，js實現方法
var js = {
fade: { // 淡入淡出
init: function($elem) {
js._init($elem);
},
show: function($elem) {
js._show($elem, 'fadeIn');
},
hide: function($elem) {
js._hide($elem, 'fadeOut');
}
},
slideUpDown: { // 上下滾動
init: function($elem) {
js._init($elem);
},
show: function($elem) {
js._show($elem, 'slideDown');
},
hide: function($elem) {
js._hide($elem, 'slideUp');
}
},
slideLeftRight: { // 左右滾動
init: function($elem) {
// var styles = {};
// styles['width'] = $elem.css('width');
// styles['padding-left'] = $elem.css('padding-left');
// styles['padding-right'] = $elem.css('padding-right');
// $elem.data('styles', styles);
// $elem.removeClass('transition');
// init($elem, function() {
// $elem.css({
// 'width': 0,
// 'padding-left': 0,
// 'padding-right': 0
// });
// });
js._customInit($elem, {
'width': 0,
'padding-left': 0,
'padding-right': 0
});
},
show: function($elem) {
// var styles = $elem.data('styles');
// show($elem, function() {
// $elem.show();
// $elem.stop().animate({
// 'width': styles['width'],
// 'padding-left': styles['padding-left'],
// 'padding-right': styles['padding-right']
// }, function() {
// $elem.data('status', 'shown').trigger('shown');
// });
// });
js._customshow($elem);
},
hide: function($elem) {
// hide($elem, function() {
// $elem.stop().animate({
// 'width': 0,
// 'padding-left': 0,
// 'padding-right': 0
// }, function() {
// $elem.hide();
// $elem.data('status', 'hidden').trigger('hidden');
// });
// });
// }
js._customHide($elem, {
'width': 0,
'padding-left': 0,
'padding-right': 0
});
}
},
fadeSlideUpDown: { // 淡入淡出上下滾動
init: function($elem) {
// var styles = {};
// styles['opacity'] = $elem.css('opacity');
// styles['height'] = $elem.css('height');
// styles['padding-top'] = $elem.css('padding-top');
// styles['padding-bottom'] = $elem.css('padding-bottom');
// $elem.data('styles', styles);
// $elem.removeClass('transition');
// init($elem, function() {
// $elem.css({
// 'opacity': 0,
// 'height': 0,
// 'padding-top': 0,
// 'padding-bottom': 0
// });
// });
js._customInit($elem, {
'opacity': 0,
'height': 0,
'padding-top': 0,
'padding-bottom': 0
});
},
show: function($elem) {
// var styles = $elem.data('styles');
// show($elem, function() {
// $elem.show();
// $elem.stop().animate({
// 'opacity': styles['opacity'],
// 'height': styles['height'],
// 'padding-top': styles['padding-top'],
// 'padding-bottom': styles['padding-bottom']
// }, function() {
// $elem.data('status', 'shown').trigger('shown');
// });
// });
js._customshow($elem);
},
hide: function($elem) {
// hide($elem, function() {
// $elem.stop().animate({
// 'opacity': 0,
// 'height': 0,
// 'padding-top': 0,
// 'padding-bottom': 0
// }, function() {
// $elem.hide();
// $elem.data('status', 'hidden').trigger('hidden');
// });
// });
// }
js._customHide($elem, {
'opacity': 0,
'height': 0,
'padding-top': 0,
'padding-bottom': 0
});
}
},
fadeSlideLeftRight: { // 淡入淡出左右滾動
init: function($elem) {
// var styles = {};
// styles['opacity'] = $elem.css('opacity');
// styles['width'] = $elem.css('width');
// styles['padding-left'] = $elem.css('padding-left');
// styles['padding-right'] = $elem.css('padding-right');
// $elem.data('styles', styles);
// $elem.removeClass('transition');
// init($elem, function() {
// $elem.css({
// 'opacity': 0,
// 'width': 0,
// 'padding-left': 0,
// 'padding-right': 0
// });
// });
js._customInit($elem, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
});
},
show: function($elem) {
// var styles = $elem.data('styles');
// show($elem, function() {
// $elem.show();
// $elem.stop().animate({
// 'opacity': styles['opacity'],
// 'width': styles['width'],
// 'padding-left': styles['padding-left'],
// 'padding-right': styles['padding-right']
// }, function() {
// $elem.data('status', 'shown').trigger('shown');
// });
// });
js._customshow($elem);
},
hide: function($elem) {
// hide($elem, function() {
// $elem.stop().animate({
// 'opacity': 0,
// 'width': 0,
// 'padding-left': 0,
// 'padding-right': 0
// }, function() {
// $elem.hide();
// $elem.data('status', 'hidden').trigger('hidden');
// });
// });
// }
js._customHide($elem, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
});
}
}
};
js._init = function($elem, hiddenCallback) {
$elem.removeClass('transition'); // js和transition動畫沖突，在執行js前，將transition去掉，屏蔽風險。
init($elem, hiddenCallback);
};
js._customInit = function($elem, options) {
var styles = {};
for (var p in options) {
styles[p] = $elem.css(p);
}
$elem.data('styles', styles);
js._init($elem, function() {
$elem.css(options);
});
};
js._customshow = function($elem) {
var styles = $elem.data('styles');
show($elem, function() {
$elem.show();
$elem.stop().animate($elem.data('styles'), function() {
$elem.data('status', 'shown').trigger('shown');
});
});
};
js._customHide = function($elem, options) {
hide($elem, function() {
$elem.stop().animate(options, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
});
};
js._show = function($elem, mode) {
show($elem, function() {
$elem.stop()[mode](function() {
$elem.data('status', 'shown').trigger('shown');
});
});
};
js._hide = function($elem, mode) {
hide($elem, function() {
$elem.stop()[mode](function() {
$elem.data('status', 'hidden').trigger('hidden');
});
});
};
var defaults = {
css3: true,
js: true,
animation: 'fade'
};
function showHide($elem, options) {
var mode = null;
// options = $.extend({}, defaults, options);
if (options.css3 && transition.isSupport) { //css3 transition
// css3[options.animation].init($elem);
mode = css3[options.animation] || css3[defaults.animation];
// return {
// // show:css3[options.animation].show,
// // hide:css3[options.animation].hide
// };
} else if (options.js) { //js animation
// js[options.animation].init($elem);
// return {
// show: js[options.animation].show,
// hide: js[options.animation].hide
// };
mode = js[options.animation] || js[defaults.animation];
} else { // no animation
// silent.init($elem);
// return {
// show: silent.show,
// hide: silent.hide
// };
mode = silent;
}
mode.init($elem);
return {
// show: mode.show,
// hide: mode.hide
show: $.proxy(mode.show, this, $elem),
hide: $.proxy(mode.hide, this, $elem),
};
}
$.fn.extend({
showHide: function (option) {
return this.each(function () {
var $this = $(this),
options = $.extend({}, defaults, typeof option === 'object' && option),
mode = $this.data('showHide');
if (!mode) {
$this.data('showHide', mode = showHide($this, options));
}
if (typeof mode[option] === 'function') {
mode[option]();
}
});
}
});
// window.mt = window.mt || {};
// window.mt.showHide = showHide;
})(jQuery);
move.js
(function($) {
'use strict';
var transition = window.mt.transition;
var init = function($elem) {
this.$elem = $elem;
this.curX = parseFloat(this.$elem.css('left'));
this.curY = parseFloat(this.$elem.css('top'));
}
var to = function(x, y, callback) {
x = (typeof x === 'number') ? x : this.curX;
y = (typeof y === 'number') ? y : this.curY;
if (this.curX === x && this.curY === y) return;
this.$elem.trigger('move', [this.$elem]);
if (typeof callback === 'function') {
callback();
}
this.curX = x;
this.curY = y;
}
var Silent = function($elem) {
init.call(this, $elem); //改變this的指向，這里this指外面的this,如不使用call，this指init。
this.$elem.removeClass('transition');
};
Silent.prototype.to = function(x, y) {
var self = this;
to.call(this, x, y, function() {
self.$elem.css({
left: x,
top: y
});
self.$elem.trigger('moved', [self.$elem]);
});
};
Silent.prototype.x = function(x) {
// if(this.curX===x) return;
// this.$elem.css({
// left:x
// });
// this.curX=x;
this.to(x);
};
Silent.prototype.y = function(y) {
// if(this.curY===y) return;
// this.$elem.css({
// top:y
// });
// this.curY=y;
this.to(null, y);
};
// css3 方式
var Css3 = function($elem) {
this.$elem = $elem;
this.$elem.addClass('transition');
this.curX = parseFloat(this.$elem.css('left'));
this.curY = parseFloat(this.$elem.css('top'));
this.$elem.css({
left: this.curX,
top: this.curY
});
};
Css3.prototype.to = function(x, y) {
var self = this;
to.call(this, x, y, function() {
self.$elem.off(transition.end).one(transition.end, function() {
self.$elem.trigger('moved', [self.$elem]);
// self.$elem.data('status','moved');
// self.curX = x;
// self.curY = y;
});
self.$elem.css({
left: x,
top: y
});
});
// x = (typeof x === 'number') ? x : this.curX;
// y = (typeof y === 'number') ? y : this.curY;
// if (this.curX === x && this.curY === y) return;
// // if(this.$elem.data('status')==='moving') return;
// // this.$elem.data('status','moving');
// var self = this;
// this.$elem.trigger('move', [this.$elem]);
// this.$elem.off(transition.end).one(transition.end, function() {
// self.$elem.trigger('moved', [self.$elem]);
// // self.$elem.data('status','moved');
// // self.curX = x;
// // self.curY = y;
// });
// // console.log(1);
// this.$elem.css({
// left: x,
// top: y
// });
// this.curX = x;
// this.curY = y;
};
Css3.prototype.x = function(x) {
this.to(x);
};
Css3.prototype.y = function(y) {
this.to(null, y);
};
// js方式
var Js = function($elem) {
init.call(this, $elem);
this.$elem.removeClass('transition');
};
Js.prototype.to = function(x, y) {
var self = this;
to.call(this, x, y, function() {
self.$elem.stop().animate({
left: x,
top: y
}, function() {
self.$elem.trigger('moved', [self.$elem]);
});
});
};
Js.prototype.x = function(x) {
this.to(x);
};
Js.prototype.y = function(y) {
this.to(null, y);
};
// var $box = $('#box'),
// $goBtn = $('#go-btn'),
// $backBtn = $('#back-btn'),
// move = new Js($box);
// $box.on('move moved', function(e, $elem) {
// console.log(e.type);
// // console.log($elem);
// });
// $goBtn.on('click', function() {
// move.to(100, 50);
// // move.to(100);
// });
// $backBtn.on('click', function() {
// move.to(0, 20);
// // move.to(0);
// });
var defaults = {
css3: false,
js: false
};
var move = function ($elem, options) {
var mode = null;
if (options.css3 && transition.isSupport) { // css3 transition
mode = new Css3($elem);
} else if (options.js) { // js animation
mode = new Js($elem);
} else { // no animation
mode = new Silent($elem);
}
return {
to: $.proxy(mode.to, mode), //改變指針this指向mode.
x: $.proxy(mode.x, mode),
y: $.proxy(mode.y, mode)
};
};
$.fn.extend({
move: function (option,x,y) {
return this.each(function () {
var $this = $(this),
mode = $this.data('move'),
options = $.extend({}, defaults, typeof option === 'object' && option);
if (!mode) { // first time
$this.data('move', mode = move($this, options));
}
if (typeof mode[option] === 'function') {
mode[option](x, y);
}
});
}
});
})(jQuery);
slider.js
(function ($) {
'use strict';
function Slider($elem, options) {
this.$elem = $elem;
this.options = options;
this.$items = this.$elem.find('.slider-item');
this.$indicators = this.$elem.find('.slider-indicator');
this.$controls = this.$elem.find('.slider-control');
this.itemNum = this.$items.length;
this.curIndex = this._getCorrectIndex(this.options.activeIndex);
this._init();
}
Slider.DEFAULTS = {
css3: false,
js: false,
animation: 'fade', // slide
activeIndex: 0,
interval: 0
};
Slider.prototype._init = function() {
var self = this;
this.$elem.trigger('slider-show',[this.curIndex,this.$items[this.curIndex]]);
// init show
this.$indicators.removeClass('slider-indicator-active');
this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');
// to
if (this.options.animation === 'slide') {
this.$elem.addClass('slider-slide');
this.$items.eq(this.curIndex).css('left', 0);
// send message
this.$items.on('move moved', function (e) {
var index = self.$items.index(this);
if (e.type === 'move') {
if (index === self.curIndex) {
self.$elem.trigger('slider-hide', [index, this]);
} else {
self.$elem.trigger('slider-show', [index, this]);
}
} else { // moved
if (index === self.curIndex) { // 指定的
self.$elem.trigger('slider-shown', [index, this]);
} else {
self.$elem.trigger('slider-hidden', [index, this]);
}
}
});
// move init
this.$items.move(this.options);
this.to = this._slide;
this.itemWidth = this.$items.eq(0).width();
this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : '';
} else { // fade
this.$elem.addClass('slider-fade');
this.$items.eq(this.curIndex).show();
// send message
this.$items.on('show shown hide hidden', function (e) {
self.$elem.trigger('slider-' + e.type, [self.$items.index(this), this]);
});
// showHide init
this.$items.showHide(this.options);
this.to = this._fade;
}
// bind event
this.$elem
.hover(function () {
self.$controls.show();
}, function () {
self.$controls.hide();
})
.on('click', '.slider-control-left', function () {
self.to(self._getCorrectIndex(self.curIndex - 1), 1);
})
.on('click', '.slider-control-right', function () {
self.to(self._getCorrectIndex(self.curIndex + 1), -1);
})
.on('click', '.slider-indicator', function () {
self.to(self._getCorrectIndex(self.$indicators.index(this)));
});
// auto
if (this.options.interval && !isNaN(Number(this.options.interval))) {
this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
this.auto();
}
};
Slider.prototype._getCorrectIndex = function(index) {
if (isNaN(Number(index))) return 0;
if (index < 0) return this.itemNum - 1;
if (index > this.itemNum - 1) return 0;
return index;
};
Slider.prototype._activateIndicators = function(index) {
this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');
this.$indicators.eq(index).addClass('slider-indicator-active');
};
Slider.prototype._fade = function(index) {
if (this.curIndex === index) return;
this.$items.eq(this.curIndex).showHide('hide');
this.$items.eq(index).showHide('show');
this._activateIndicators(index);
this.curIndex = index;
};
Slider.prototype._slide = function(index, direction) {
if (this.curIndex === index) return;
var self = this;
// 確定滑入滑出的方向
if (!direction) { // click indicators
if (this.curIndex < index) {
direction = -1;
} else if (this.curIndex > index) {
direction = 1;
}
}
// 設置指定滑入幻燈片的初始位置
this.$items.eq(index).removeClass(this.transitionClass).css('left', -1 * direction * this.itemWidth);
// 當前幻燈片滑出可視區域，指定幻燈片滑入可視區域
setTimeout(function () {
self.$items.eq(self.curIndex).move('x', direction * self.itemWidth);
self.$items.eq(index).addClass(self.transitionClass).move('x', 0);
self.curIndex = index;
}, 20);
// 激活indicator
this._activateIndicators(index);
};
Slider.prototype.auto = function() {
var self = this;
this.intervalId = setInterval(function () {
self.to(self._getCorrectIndex(self.curIndex + 1), -1);
}, this.options.interval);
};
Slider.prototype.pause = function() {
clearInterval(this.intervalId);
};
$.fn.extend({
slider: function (option) {
return this.each(function () {
var $this = $(this),
slider = $this.data('slider'),
options = $.extend({}, Slider.DEFAULTS, $this.data(), typeof option === 'object' && option);
if (!slider) { // first time
$this.data('slider', slider = new Slider($this, options));
}
if (typeof slider[option] === 'function') {
slider[option]();
}
});
}
})
})(jQuery);
index.js 以下代碼是沒有優化的，使用時，要使用最后的代碼。
(function($) {
'use strict';
//focus-slider
var $focusSlider = $('#focus-slider');//id效率最高，.類只用於css樣式
/*$focusSlider.on('slider-show slider-shown slider-hide slider-hidden',function (e,i,elem) {
console.log(i+':'+e.type);
});*/
//暴露過多的全局變量。可以作為$focusSlider的屬性進行優化
/*var items = {};
var loadedItemNum = 0;
var totalItemNum = $focusSlider.find('.slider-img').length;//獲取$focusSlider 下面有幾個輪播對象
var loadItem;//已經加載*/
$focusSlider.items = {};//items[index]，加載的賦值 loaded，沒有加載就不進行操作
$focusSlider.loadedItemNum = 0;//已經加載幾張圖片
$focusSlider.totalItemNum = $focusSlider.find('.slider-img').length;//獲取$focusSlider 下面有幾個輪播對象需要加載
$focusSlider.loadItem;//已經加載
//監聽輪播對象顯示之前的操作
/* $focusSlider.on('slider-show',$focusSlider.loadItem = function(e,index,elem){
//只加載一次
if ($focusSlider.items[index]!=='loaded') {
//按需加載
//找到elem下面的 .slider-img
var $img = $(elem).find('.slider-img');
//圖片加載
loadImg($img.data('src'),function(url){
$img.attr('src',url);
$focusSlider.items[index] = 'loaded';
console.log(index + ':loaded');
if ($focusSlider.loadedItemNum === $focusSlider.totalItemNum) {
//清除事件
$focusSlider.off('slider-show',$focusSlider.loadItem);
}
},function(url){
console.log('從' + url + '加載失敗');
//顯示備用圖片
$img.attr('src','../img/focus-slider/placeholder.png');
});
}
});*/
//把以上代碼拆分成功能單一的自定義事件如下：
$focusSlider.on('slider-show',function(e,index,elem){
//只加載一次
if ($focusSlider.items[index]!=='loaded') {
$focusSlider.trigger('slider-loadItem',[index,elem]);//沒有加載過的可以開始加載
}
});
//開始加載
$focusSlider.on('slider-loadItem',function(e,index,elem){
//按需加載
//找到elem下面的 .slider-img
var $img = $(elem).find('.slider-img');
//圖片加載
loadImg($img.data('src'),function(url){
$img.attr('src',url);
$focusSlider.items[index] = 'loaded';
console.log(index + ':loaded');
if ($focusSlider.loadedItemNum === $focusSlider.totalItemNum) {
//全部加載完畢
$focusSlider.trigger('slider-itemsLoaded');
}
},function(url){
console.log('從' + url + '加載失敗');
//顯示備用圖片
$img.attr('src','../img/focus-slider/placeholder.png');
});
})
//清除事件
$focusSlider.on('slider-itemsLoaded',function(e){
console.log('itemsLoaded');
$focusSlider.off('slider-show',$focusSlider.loadItem);
})
//圖片加載成功，失敗時處理。容錯率高了。
function loadImg(url,imgLoaded,imgFailed){
var image = new Image();
//加載失敗，圖片加載失敗觸發，屬於javascript事件
image.onerror = function(){
if (typeof imgFailed === 'function') imgFailed(url);
}
//加載成功，圖片加載成功觸發，屬於javascript事件
image.onload = function(){
if (typeof imgLoaded === 'function') imgLoaded(url);
}
image.src = url;
//手動延遲一秒，模擬從其他服務器獲取圖片
//setTimeout(function(){
//image.src = url;
//},1000);
}
$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade slide
activeIndex: 0,
interval: 0
});
//todays-slider
var $todaysSlider = $('#todays-slider');
$todaysSlider.items = {};
$todaysSlider.loadedItemNum = 0;
$todaysSlider.totalItemNum = $todaysSlider.find('.slider-img').length;
$todaysSlider.on('slider-show', $todaysSlider.loadItem = function(e, index, elem) {
console.log(1);
if ($todaysSlider.items[index] !== 'loaded') {
$todaysSlider.trigger('slider-loadItem', [index, elem]);
}
});
$todaysSlider.on('slider-loadItem', function(e, index, elem) {
// 按需加載
var $imgs = $(elem).find('.slider-img');
$imgs.each(function (_,el) { // _ 相當占位，不使用該參數。
var $img=$(el);
loadImg($img.data('src'), function(url) {
$img.attr('src', url);
$todaysSlider.items[index] = 'loaded';
$todaysSlider.loadedItemNum++;
console.log(index + ': loaded');
if ($todaysSlider.loadedItemNum === $todaysSlider.totalItemNum) {
// 全部加載完畢
$todaysSlider.trigger('slider-itemsLoaded');
}
}, function(url) {
console.log('從' + url + '加載圖片失敗');
// 多加載一次
// 顯示備用圖片
$img.attr('src', '../img/focus-slider/placeholder.png');
});
});
});
$todaysSlider.on('slider-itemsLoaded', function(e) {
console.log('itemsLoaded');
// 清除事件
$todaysSlider.off('slider-show', $todaysSlider.loadItem);
});
function loadImg(url, imgLoaded, imgFailed) {
var image = new Image();
image.onerror = function() {
if (typeof imgFailed === 'function') imgFailed(url);
}
image.onload = function() {
if (typeof imgLoaded === 'function') imgLoaded(url);
};
// image.src=url;
setTimeout(function() {
image.src = url;
}, 1000);
}
$todaysSlider.slider({
css3: true,
js: false,
animation: 'slide', // fade slide
activeIndex: 0,
interval: 0
});
})(jQuery);
優化后的最終版index.js
(function($) {
'use strict';
// foucs-slider
var slider={};
slider.$focusSlider=$('#focus-slider');
slider.loadImg=function(url, imgLoaded, imgFailed) {
var image = new Image();
image.onerror = function() {
if (typeof imgFailed === 'function') imgFailed(url);
}
image.onload = function() {
if (typeof imgLoaded === 'function') imgLoaded(url);
};
image.src=url;
// setTimeout(function() {
// image.src = url;
// }, 1000);
};
//懶加載
slider.lazyLoad = function($elem) {
$elem.items = {};
$elem.loadedItemNum = 0;
$elem.totalItemNum = $elem.find('.slider-img').length;
$elem.on('slider-show', $elem.loadItem = function(e, index, elem) {
console.log(1);
if ($elem.items[index] !== 'loaded') {
$elem.trigger('slider-loadItem', [index, elem]);
}
});
$elem.on('slider-loadItem', function(e, index, elem) {
// 按需加載
var $imgs = $(elem).find('.slider-img');
$imgs.each(function(_, el) { // _ 相當占位，不使用該參數。
var $img = $(el);
slider.loadImg($img.data('src'), function(url) {
$img.attr('src', url);
$elem.items[index] = 'loaded';
$elem.loadedItemNum++;
console.log(index + ': loaded');
if ($elem.loadedItemNum === $elem.totalItemNum) {
// 全部加載完畢
$elem.trigger('slider-itemsLoaded');
}
}, function(url) {
console.log('從' + url + '加載圖片失敗');
// 多加載一次
// 顯示備用圖片
$img.attr('src', '../img/focus-slider/placeholder.png');
});
});
});
$elem.on('slider-itemsLoaded', function(e) {
console.log('itemsLoaded');
// 清除事件
$elem.off('slider-show', $elem.loadItem);
});
}
slider.lazyLoad(slider.$focusSlider);
slider.$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade slide
activeIndex: 0,
interval: 0
});
// todays-slider
slider.$todaysSlider = $('#todays-slider');
slider.lazyLoad(slider.$todaysSlider);
slider.$todaysSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade slide
activeIndex: 0,
interval: 0
});
})(jQuery);