https://margacipta.com/assets/js/jquery.hislide.js

1(function($) {
2    // 本函数每次调用只负责一个轮播图的功能
3    // 也就是说只会产生一个轮播图，这个函数的作用域只能分配给一个轮播图
4    // 要求在调用本函数的时候务必把当前轮播图的根标签传递过来
5    // 这里的形参 ele 就是某个轮播的根标签
6    var slide = function(ele,options) {
7        var $ele = $(ele);
8        // 默认设置选项
9        var setting = {
10        		// 控制轮播的动画时间
11            speed: 1000,
12            // 控制 interval 的时间 (轮播速度)
13            interval: 2000,
14            
15        };
16        // 对象合并
17        $.extend(true, setting, options);
18        // 规定好每张图片处于的位置和状态
19        var states = [
20            { $zIndex: 1, width: 120, height: 150, top: 69, left: 134, $opacity: 0.2 },
21            { $zIndex: 2, width: 130, height: 170, top: 59, left: 0, $opacity: 0.4 },
22            { $zIndex: 3, width: 170, height: 218, top: 35, left: 110, $opacity: 0.7 },
23            { $zIndex: 4, width: 224, height: 288, top: 0, left: 263, $opacity: 1 },
24            { $zIndex: 3, width: 170, height: 218, top: 35, left: 470, $opacity: 0.7 },
25            { $zIndex: 2, width: 130, height: 170, top: 59, left: 620, $opacity: 0.4 },
26            { $zIndex: 1, width: 120, height: 150, top: 69, left: 500, $opacity: 0.2 }
27        ];
28
29        var $lis = $ele.find('li');
30        var timer = null;
31
32        // 事件
33        $ele.find('.hi-next').on('click', function() {
34            next();
35        });
36        $ele.find('.hi-prev').on('click', function() {
37            states.push(states.shift());
38            move();
39        });
40        $ele.on('mouseenter', function() {
41            clearInterval(timer);
42            timer = null;
43        }).on('mouseleave', function() {
44            autoPlay();
45        });
46
47        move();
48        autoPlay();
49
50        // 让每个 li 对应上面 states 的每个状态
51        // 让 li 从正中间展开
52        function move() {
53            $lis.each(function(index, element) {
54                var state = states[index];
55                $(element).css('zIndex', state.$zIndex).finish().animate(state, setting.speed).find('img').css('opacity', state.$opacity);
56            });
57        }
58
59        // 切换到下一张
60        function next() {
61            // 原理：把数组最后一个元素移到第一个
62            states.unshift(states.pop());
63            move();
64        }
65
66        function autoPlay() {
67            timer = setInterval(next, setting.interval);
68        }
69    }
70    // 找到要轮播的轮播图的根标签，调用 slide()
71    $.fn.hiSlide = function(options) {
72        $(this).each(function(index, ele) {
73            slide(ele,options);
74        });
75        // 返回值，以便支持链式调用
76        return this;
77    }
78})(jQuery);