https://skin3.yxlady.com/skin/yx2017/index/js/jquery.foucs3.js

1	;(function ($) {
2		$.extend({
3			'foucs': function (con) {
4				var $container = $('#index_b_hero'),
5					$imgs = $container.find('li.hero'),
6					$leftBtn = $container.find('a.prev'),
7					$rightBtn = $container.find('a.next'),
8					config = {
9						interval: con && con.interval || 3500,
10						animateTime: con && con.animateTime || 500,
11						direction: con && (con.direction === 'right'),
12						_imgLen: $imgs.length
13					},
14					i = 0,
15					j = 0,
16					// 获取当前屏幕宽度
17					getScreenWidth = function() {
18						return $(window).width();
19					},
20					// 初始化宽度
21					initSliderWidth = function() {
22						var screenWidth = getScreenWidth();
23						// 设置每个hero项的宽度为屏幕宽度
24						$imgs.css('width', screenWidth + 'px');
25						return screenWidth;
26					},
27					// 重置图片位置
28					resetImgPosition = function() {
29						var screenWidth = getScreenWidth();
30						$imgs.eq(i).css('left', 0)
31							.end().eq(getNextIndex(1)).css('left', screenWidth + 'px')
32							.end().eq(getPrevIndex(1)).css('left', -screenWidth + 'px');
33						
34						// 初始化时设置其他图片的位置
35						if (j === 0) {
36							for(var k = 2; k < config._imgLen; k++) {
37								var nextIdx = getNextIndex(k);
38								var prevIdx = getPrevIndex(k);
39								$imgs.eq(nextIdx).css('left', (k * screenWidth) + 'px');
40								$imgs.eq(prevIdx).css('left', (-k * screenWidth) + 'px');
41							}
42						}
43					},
44					getNextIndex = function (y) { 
45						return i + y >= config._imgLen ? i + y - config._imgLen : i + y; 
46					},
47					getPrevIndex = function (y) { 
48						return i - y < 0 ? config._imgLen + i - y : i - y; 
49					},
50					slide = function (d) {
51						var screenWidth = getScreenWidth();
52						$imgs.eq((d ? getPrevIndex(2) : getNextIndex(2))).css('left', (d ? (-2 * screenWidth) + 'px' : (2 * screenWidth) + 'px'));
53						
54						if(j == 0){
55							for(var k = 3; k <= config._imgLen - 2; k++){
56								var idx = getNextIndex(k);
57								$imgs.eq(idx).css('left', (k * screenWidth) + 'px');
58							}
59							j++;
60						}
61						
62						$imgs.animate({
63							'left': (d ? '+' : '-') + '=' + screenWidth + 'px'
64						}, config.animateTime);
65						
66						i = d ? getPrevIndex(1) : getNextIndex(1);
67						$imgs.eq(i).addClass('active').siblings().removeClass('active');
68					};
69				
70				// 初始化宽度
71				initSliderWidth();
72				
73				// 设置初始位置
74				resetImgPosition();
75				$imgs.eq(0).addClass('active').siblings().removeClass('active');
76				
77				// 开始自动轮播
78				var s = setInterval(function () { 
79					slide(config.direction); 
80				}, config.interval);
81				
82				// 悬停暂停/继续
83				$container.find('.hero-wrap').add($leftBtn).add($rightBtn).hover(
84					function () { 
85						clearInterval(s); 
86					}, 
87					function () { 
88						s = setInterval(function () { 
89							slide(config.direction); 
90						}, config.interval); 
91					}
92				);
93				
94				// 左按钮点击
95				$leftBtn.click(function () {
96					$imgs.stop(true, true);
97					clearInterval(s);
98					slide(false);
99					// 重新开始自动轮播
100					s = setInterval(function () { 
101						slide(config.direction); 
102					}, config.interval);
103				});
104				
105				// 右按钮点击
106				$rightBtn.click(function () {
107					j = 1;
108					$imgs.stop(true, true);
109					clearInterval(s);
110					slide(true);
111					// 重新开始自动轮播
112					s = setInterval(function () { 
113						slide(config.direction); 
114					}, config.interval);
115				});
116				
117				// 窗口大小改变时重新计算宽度和位置
118				var resizeTimer;
119				$(window).on('resize', function() {
120					clearTimeout(resizeTimer);
121					resizeTimer = setTimeout(function() {
122						// 重新设置宽度
123						$imgs.css('width', getScreenWidth() + 'px');
124						// 重新计算位置
125						resetImgPosition();
126					}, 100);
127				});
128			}
129		});
130	}(jQuery));