jCarousel.js 插件

轮播图 中间放大 内容跟着切换 （参考 米趣 网站）

html

 

<div class="jcarousel-wrapper">
    <div class="jcarousel" data-jcarousel="true">
        <ul id="myjcar">
        </ul>
    </div>
    <a href="#" class="jcarousel-control-prev" data-jcarouselcontrol="true"><img
src="data:images/btn_left.png" alt=""></a>
    <a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true"><img
src="data:images/btn_right.png" alt=""></a>
</div>

css

 

.jcarousel-wrapper {
position: relative;
margin: 20px 30px;
}
.jcarousel {
position: relative;
padding: 20px 0;
overflow: hidden;
width: 100%;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin:;
padding:;
}
.list-job ul {
position: relative;
width: 20000em;
list-style: none;
margin:;
padding:;
}
.jcarousel li {
width: 300px;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}

js

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> -->
<script src="http://keleyi.com/keleyi/pmedia/jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jCarousel.js"></script>
<script type="text/javascript">
// 显示个数
var show_size = 3;
// 初始化时中间的位置，从0开始
var middle_index = 1;
// 向前滚动时新的中间位置（试出来的）
var middle_index_when_prev = 1;
// 向后滚动时新的中间位置（试出来的）
var middle_index_when_next = 2;

// 图片数据
var mycarousel_itemList = [
        {url: 'images/4joblist(1).png', title: 'joblist1'},
        {url: 'images/4joblist(2).png', title: 'joblist2'},
        {url: 'images/4joblist(3).png', title: 'joblist3'},
        {url: 'images/4joblist(4).png', title: 'joblist4'},
        {url: 'images/4joblist(5).png', title: 'joblist5'},
        {url: 'images/4joblist(6).png', title: 'joblist6'}

    ];

// 初始化组件时的回调函数
function mycarousel_initCallback(carousel) {
$('.jcarousel-control-prev').bind('click', function () {
carousel.prev();
recover_image();
enlarge_image(middle_index_when_prev);
return false;
        });

$('.jcarousel-control-next').bind('click', function () {
carousel.next();
recover_image();
enlarge_image(middle_index_when_next);
return false;
        });
    }

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
var idx = carousel.index(i, mycarousel_itemList.length);
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
    }

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
carousel.remove(i);
    }

// img标签生成方法
function mycarousel_getItemHTML(item) {
return '<img src="' + item.url + '" width="300" height="300" alt="' + item.title + '" />';
    }

/**
     * 切换图片前触发的回调函数
     **/
function myItemLoadCallback_beforeFun(data, state) {
var middle = (data.first + data.last) / 2; // 中间图片是第几个？
var index = middle - 1;// 数组是从0开始的
switchArticle(index);
    }

// 根据中间图片的索引更换文章
function switchArticle(index) {
var size = mycarousel_itemList.length;
while (true) {// index不符合数组要求的话，就修正它
if (index < 0) {
index = size + index;
            } else if (index >= size) {
index = index - size;
            } else {
break;
            }
        }
$(".item").removeClass("show");
$(".item").eq(index).addClass("show")
    }

/**
     * 切换图片后触发的回调函数
     **/
function myItemLoadCallback_afterFun(data, state) {
var middle = (data.first + data.last) / 2; // 中间图片是第几个？
var index = middle - 1;// 数组是从0开始的
}

// 放大
function enlarge_image(index) {
$(".jcarousel li:eq(" + index + ")").addClass("active");
    }

// 还原
function recover_image() {
$(".jcarousel li").removeClass("active");
    }

    jQuery(document).ready(function () {
        jQuery('#myjcar').jcarousel({
            size: show_size,
            scroll: 1,
            wrap: 'circular',
            initCallback: mycarousel_initCallback,
            itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
            itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
            itemLoadCallback: {
                onBeforeAnimation: myItemLoadCallback_beforeFun,
                onAfterAnimation: myItemLoadCallback_afterFun
}
        });

recover_image();
enlarge_image(middle_index);
    });

</script>