仿优酷 图片 轮播
最新更新公司企业站，二级页面的时候，有个图片 轮播效果，设计的和优酷的差不多，只是个数不一样，就在优酷的js上面进行了修改
主要是
1.支持了自定义显示广告个数，交互逻辑进行相应的动态计算
2.修改了飞入飞出的逻辑，使得逻辑更加清晰
3.js进行了jq插件的封装，方便调用
4.相应的动画最终状态也要进行自己定义（程序计算没办法满足各种各样的需求），由于图片2边显示是对称关系，提示状态只要配置一半，另一半可以通过计算获得，暂时没有做相关支持
以显示3个为例， 0为最中间的显示状态，
1,-1为0 两边的显示状态
2,-2为飞出的显示状态
废话不多说，直接上代码
插件jsYKSlider.js代码，默认配置为 优酷 配置信息
(function ($, undefined) {
var noop = function () {};
var slice = Array.prototype.slice;
var defaults = {
direct : "left",//滚动的方向
offsetPages : 3,//默认可视最大条数
initPageIndex : 0,//默认当前显示第几条
delay : 5000,//滚动间隔（毫秒）
speed : 500, //滚动速度毫秒，
itemSize: {
width: 640,
height: 270
},
boxWidth : 970,//最外层宽，需要使用的时候在传,默认由程序自动判断
boxHeight : 310,//最外层高
cssOpts: {
'-2': {left: -530, top: 85, width: 530, height: 100},
'-1': {left: 0, top: 23, width: 530, height: 224},
'0': {left: 165, top: 0, width: 640, height: 270},
'1': {left: 440, top: 23, width: 530, height: 224},
'2': {left: 970, top: 85, width: 530, height: 100}
}
};
function JsYKSlider($elm, options) {
this.$elm = $elm;
this.options = options;
this.init();
}
JsYKSlider.prototype = {
init: function () {
var self = this;
this.reset();
$(window).resize(function(){
self.reset();
});
},
reset: function (options) {
if (options) {
$.extend(this.options, options);
}
options = this.options;
this.total = options.data.length;
this.pageNowIndex = options.initPageIndex;
this.drawContent();
},
drawContent: function () {
var $elm = this.$elm;
var options = this.options;
var data = options.data;
var totle = data.length;
$elm.empty().css({position: "relative"}).addClass('ykSlider-box');
var html = ['<div class="ykSlider-bottomNav-box">'];
for (var i = 0; i < totle; i++) {
html.push('<div class="ykSlider-bottomNav ' + ( i == this.pageNowIndex ? "sel":"") + '" ref="' + i + '" ></div>');
}
html.push('</div>');
html.push('<div class="ykSlider-lr-box"><div class="ykSlider-leftNav" style="display: block;"></div><div class="ykSlider-rightNav" style="display: block;"></div></div>');
html.push('<div style="width: ' + options.boxWidth + 'px;height:' + options.boxHeight + 'px;margin: 0 auto;position: relative;">');
for (var i = 0; i < totle ; i++ ) {
var obj = data[i];
html.push('<div class="ykSlider-item" ref="' + i + '" >\
<a data-from="1-' + i + '" class="ykSlider-item-link" target="_blank" href="' + obj.url + '">\
<img title="' + obj.title + '" src="' + obj.img + '">\
</a>\
<span class="ykSlider-item-overlay" ></span></div>');
}
html.push('</div>');
$elm.html(html.join(''));
var $elmTab = this.$elmTab = [];
$elm.find(".ykSlider-item").each(function () {
$elmTab.push($(this));
})
this.initContent();
this.bind();
this.start();
},
initContent: function () {
var $elmTab = this.$elmTab;
var options = this.options;
var pageNowIndex = this.pageNowIndex;
var offsetPages = options.offsetPages;
var totle = options.data.length;
var range = offsetPages/2>>0;
var maxIndex = range + 2;
for (var i = -range; i <= range; i++) {
var pIndex = (i + pageNowIndex + totle) % totle;
var absI = Math.abs(i);
var $pElm = $elmTab[pIndex];
if (absI == 0) {
$pElm.find('.ykSlider-item-overlay').hide();
$pElm.css($.extend({opacity: 1,zIndex: maxIndex}, options.cssOpts[0]));
} else {
$pElm.find('.ykSlider-item-overlay').css({opacity: (0.4 + (absI-1) * 0.1)});
$pElm.css($.extend({opacity: 1,zIndex: maxIndex-absI}, options.cssOpts[i]));
}
}
},
bind: function(){
var self = this;
var $elm = this.$elm;
var $leftNav = $elm.find(".ykSlider-leftNav").click(function() {
self.turn("right");
});
var $rightNav = $elm.find(".ykSlider-rightNav").click(function() {
self.turn("left");
});
$elm.mouseover(function(){
self.stop();
$leftNav.show();
$rightNav.show();
}).mouseout(function(){
self.start();
//$leftNav.hide();
//$rightNav.hide();
});
$elm.find(".ykSlider-bottomNav").click(function() {
var ref = this.getAttribute("ref")*1;
var pageNowIndex = self.pageNowIndex;
if (pageNowIndex == ref) return false;
if (pageNowIndex < ref){
var rightAbs = ref - pageNowIndex;
var leftAbs = pageNowIndex + self.total - ref;
}else{
var rightAbs = self.total - pageNowIndex + ref;
var leftAbs = pageNowIndex - ref;
}
if (leftAbs < rightAbs) {
self.turnpage(ref, "right");
} else {
self.turnpage(ref, "left");
}
return false;
});
$elm.find(".ykSlider-item").click(function(e) {
var ref = this.getAttribute("ref")*1;
var pageNowIndex = self.pageNowIndex;
if (pageNowIndex == ref) {
return;
}
e.preventDefault();
if (pageNowIndex < ref) {
var rightAbs = ref - pageNowIndex;
var leftAbs = pageNowIndex + self.total - ref;
}else{
var rightAbs = self.total - pageNowIndex + ref;
var leftAbs = pageNowIndex - ref;
}
if (leftAbs < rightAbs) {
self.turnpage(ref, "right");
} else {
self.turnpage(ref, "left");
}
});
},
initBottomNav: function(){
this.$elm.find(".ykSlider-bottomNav").removeClass("sel")
.eq(this.pageNowIndex).addClass("sel");
},
start: function(){
var self = this;
if (self.timerId) {
self.stop();
}
self.timerId = setInterval(function() {
if (self.options.direct == "left") {
self.turn("left");
} else {
self.turn("right");
}
}, self.options.delay);
},
stop: function () {
clearInterval(this.timerId);
},
turn: function(dir){
var self = this;
if (dir == "right") {
self.turnpage(self.pageNowIndex - 1, dir);
} else {
self.turnpage(self.pageNowIndex + 1, dir);
}
},
turnpage: function(pageIndex, dir){
if (this.locked) return false;
this.locked = true;
var totle = this.options.data.length;
pageIndex = (pageIndex + totle)%totle
if (this.pageNowIndex == pageIndex) return false;
this.run(pageIndex, dir, this.options.speed);
},
run: function(pageIndex, dir, t) {
var self = this;
var $elmTab = this.$elmTab;
var options = this.options;
var pageNowIndex = this.pageNowIndex;
var offsetPages = options.offsetPages;
var totle = options.data.length;
var showNowMap = {}, showMap = {};
var hideParams = {width: 0, height: 0, opacity: 0, left: options.boxWidth/2, top: options.boxHeight/2};
var range = offsetPages/2>>0;
var maxIndex = range + 2;
for (var i = -range; i <= range; i++) {
showNowMap[(i + pageNowIndex + totle) % totle] = 1;
showMap[(i + pageIndex + totle) % totle] = 1;
}
for (var i = -range; i <= range; i++) {
var pIndex = (i + pageNowIndex + totle) % totle;
var $pElm = $elmTab[pIndex];
var absI = Math.abs(i);
if (!showMap[pIndex]) {//不再显示的元素，中间的中间缩小，2边的飞出
if (absI < range) {
$pElm.css({zIndex: 0}).animate(hideParams);
} else if (i == -range){
$pElm.css({zIndex: 0}).animate($.extend({opacity: 0}, options.cssOpts[-1 - range]), t);
} else if (i == range){
$pElm.css({zIndex: 0}).animate($.extend({opacity: 0}, options.cssOpts[1 + range]), t);
}
}
}
for (var i = -range; i <= range; i++) {
var pIndex = (i + pageIndex + totle) % totle;
var $pElm = $elmTab[pIndex];
var absI = Math.abs(i);
if (absI == 0) {
$pElm.find('.ykSlider-item-overlay').hide();
} else {
$pElm.find('.ykSlider-item-overlay').css({opacity: (0.4 + (absI-1) * 0.1)}).show();
}
$pElm.css({zIndex:maxIndex-absI});//先修改zIndex
if (!showNowMap[pIndex]) {//当前未显示,中间位置，不是边缘则从中间隐藏展现， 边缘则从2侧飞入
//可以考虑状态tab同步更新，防止下次需要设置css + (hide,show) 方式
if (absI < range) {
$pElm.css(hideParams)
} else if (i == -range){
$pElm.css($.extend({opacity: 0}, options.cssOpts[-1-range]));
} else if (i == range){
$pElm.css($.extend({opacity: 0}, options.cssOpts[1+range]));
}
}
$pElm.animate($.extend({opacity: 1}, options.cssOpts[i]), t);
}
setTimeout(function () {
self.locked = false;
}, t);
this.pageNowIndex = pageIndex;
this.initBottomNav();
}
}
$.fn.jsYKSlider = function (options) {
var args = slice.call(arguments, 1);
var res;
var flag = false;
this.each(function () {
var $elm = $(this);
var obj = $elm.data('jsYKSlider');
if (typeof options == "string" ) {
if (obj && obj[options]) {
var opt = obj[options];
if ($.isFunction(opt)) {
res = opt.apply(obj, args);
if (res !== undefined) {
flag = true;
return true;
}
} else {
if (args.length == 0) {
res = opt;
flag = true;
return true;
} else if (args.length == 1) {
obj[options] = args[0];
}
}
}
} else {
$elm.data('jsYKSlider', new JsYKSlider($elm, $.extend({}, defaults, options)));
}
})
if (flag) {
return res;
} else {
return this;
}
}
})(jQuery)
下面是页面使用相关的 html,css
<!DOCTYPE html> <script language="javascript" type="text/javascript" src="http://static.youku.com/v1.0.1051/js/jquery.js"></script> <style> .ykSlider-box { position: relative; margin: 0 auto; overflow: hidden; } .ykSlider-lr-box {} .ykSlider-item { cursor:pointer; position:absolute; width:640px; height:270px; opacity: 0; zIndex: 0 } .ykSlider-item-link { display:block; overflow:hidden; width:100%; height:100%; } .ykSlider-item img { width:100%; height:100%; } .ykSlider-item-overlay { z-index:1; position:absolute; top:0; left:0; background:#000; width:100%; height:100%; opacity:0; filter:opacity=0; } .ykSlider-leftNav,.ykSlider-rightNav { cursor:pointer; z-index:10; position:absolute; top:50%; width:45px; height:45px; margin-top:-43px; } .ykSlider-leftNav { left: 7px; background: url("slide_prev_btn.png") no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="slide_prev_btn.png"); } .ykSlider-rightNav{ right:7px; background:url("slide_next_btn.png") no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="slide_next_btn.png"); } .ykSlider-bottomNav-box{ height: 10px; position: absolute; text-align: center; width: 100%; z-index: 140; bottom: 20px; } .ykSlider-bottomNav{ cursor:pointer; overflow:hidden; display:inline-block; *display:inline; *zoom:1; width:10px; height:10px; margin:0 5px; vertical-align:top; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#c3c3c3; } .ykSlider-bottomNav:hover{ background:#aaa; } .ykSlider-bottomNav.sel, ykSlider-bottomNav.sel:hover{ background:#69aaec; } </style> <script language="javascript" type="text/javascript" src="jsYKSlider.js"></script> <div id="posterTvGrid86804" style="height: 272px; background-color: #f5f5f5;"></div> <script type="text/javascript"> $('#posterTvGrid86804').jsYKSlider({ data: [{"img":"http:\/\/r2.ykimg.com\/0510000055463EF567BC3D37FB006CE4","title":"\u864e\u5988\u732b\u7238","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ3OTkwMTg4.html"},{"img":"http:\/\/r4.ykimg.com\/05100000553E61B767BC3D1B4806A29F","title":"\u7279\u8b66\u529b\u91cf","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ4MjcxNjQ4.html"},{"img":"http:\/\/r4.ykimg.com\/0510000055404BEB67BC3D651B01FC09","title":"\u4e8e\u65e0\u58f0\u5904","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ0Njg2NzMy.html"},{"img":"http:\/\/r1.ykimg.com\/0510000055346BB467BC3D61850626F4","title":"\u7231\u7684\u79d8\u7b08","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ1MDUyMjky.html"},{"img":"http:\/\/r2.ykimg.com\/05100000552744516737B31999017E28","title":"\u9177\u7238\u4fcf\u5988","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ3MjE3Njky.html"},{"img":"http:\/\/r1.ykimg.com\/051000005530AC9867BC3D63060502E0","title":"\u5929\u4f7f\u7684\u57ce","url":"http:\/\/v.youku.com\/v_show\/id_XOTIxMjExMTA4.html"},{"img":"http:\/\/r3.ykimg.com\/051000005518B40D6737B30E12044057","title":"\u59bb\u5b50\u7684\u8c0e\u8a00","url":"http:\/\/v.youku.com\/v_show\/id_XOTIyNjA2Njky.html"},{"img":"http:\/\/r1.ykimg.com\/05100000551E09986737B355C8049A88","title":"\u738b\u5927\u82b1\u7684\u9769\u547d\u751f\u6daf","url":"http:\/\/v.youku.com\/v_show\/id_XOTI1NTAyOTQ4.html"},{"img":"http:\/\/r4.ykimg.com\/05100000553AF6C667BC3D411C04BBD7","title":"\u5929\u624dJ","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ1NDU5ODk2.html"},{"img":"http:\/\/r4.ykimg.com\/051000005416BED66737B32526092749","title":"\u5973\u56fd\u52a1\u537f","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ3NzAxNzY4.html"}] }) /*项目中使用的配置 $('#posterTvGrid86804').jsYKSlider({ itemSize: { width: 650, height: 400 }, offsetPages: 5, cssOpts: { '-3': {left: -450, top: 150, width: 450, height: 100}, '-2': {left: 0, top: 62, width: 450, height: 276}, '-1': {left: 194, top: 34, width: 541, height: 332}, '0': {left: 450, top: 0, width: 650, height: 400}, '1': {left: 815, top: 34, width: 541, height: 333}, '2': {left: 1100, top: 62, width: 450, height: 276}, '3': {left: 1550, top: 150, width: 450, height: 100} }, boxWidth : 1532, boxHeight : 400, data: [{"img":"http:\/\/r2.ykimg.com\/0510000055463EF567BC3D37FB006CE4","title":"\u864e\u5988\u732b\u7238","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ3OTkwMTg4.html"},{"img":"http:\/\/r4.ykimg.com\/05100000553E61B767BC3D1B4806A29F","title":"\u7279\u8b66\u529b\u91cf","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ4MjcxNjQ4.html"},{"img":"http:\/\/r4.ykimg.com\/0510000055404BEB67BC3D651B01FC09","title":"\u4e8e\u65e0\u58f0\u5904","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ0Njg2NzMy.html"},{"img":"http:\/\/r1.ykimg.com\/0510000055346BB467BC3D61850626F4","title":"\u7231\u7684\u79d8\u7b08","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ1MDUyMjky.html"},{"img":"http:\/\/r2.ykimg.com\/05100000552744516737B31999017E28","title":"\u9177\u7238\u4fcf\u5988","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ3MjE3Njky.html"},{"img":"http:\/\/r1.ykimg.com\/051000005530AC9867BC3D63060502E0","title":"\u5929\u4f7f\u7684\u57ce","url":"http:\/\/v.youku.com\/v_show\/id_XOTIxMjExMTA4.html"},{"img":"http:\/\/r3.ykimg.com\/051000005518B40D6737B30E12044057","title":"\u59bb\u5b50\u7684\u8c0e\u8a00","url":"http:\/\/v.youku.com\/v_show\/id_XOTIyNjA2Njky.html"},{"img":"http:\/\/r1.ykimg.com\/05100000551E09986737B355C8049A88","title":"\u738b\u5927\u82b1\u7684\u9769\u547d\u751f\u6daf","url":"http:\/\/v.youku.com\/v_show\/id_XOTI1NTAyOTQ4.html"},{"img":"http:\/\/r4.ykimg.com\/05100000553AF6C667BC3D411C04BBD7","title":"\u5929\u624dJ","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ1NDU5ODk2.html"},{"img":"http:\/\/r4.ykimg.com\/051000005416BED66737B32526092749","title":"\u5973\u56fd\u52a1\u537f","url":"http:\/\/v.youku.com\/v_show\/id_XOTQ3NzAxNzY4.html"}] })*/ </script>