swiper使用案例一

// 初始化函数
var mySwiper_a = new Swiper(‘.se3 .left‘, {
    direction: ‘vertical‘,
    loop: true,
    autoplay: 5000,
    // 回调函数，从一个slide过渡到另一个slide结束时执行
    onSlideChangeEnd: function(swiper) {
        // 获取对应的index
        var num = swiper.activeIndex;
        // 给对应的标签添加样式
        $(‘.se3 .right li‘).eq(num - 1).addClass(‘active‘).siblings().removeClass(‘active‘);
    }

});
// 鼠标悬浮对应的标签切换
$(‘.se3 .right li‘).hover(function() {
    // 获取index
    $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
    var num = $(this).index() + 1;
    // 双向控制中的函数 normalizeSlideIndex 不能为false，默认为true；
    mySwiper_a.slideTo(num, 1000, false);
});

$mco：#996c33；

.se3{

    .left{
        width: 805px;
        height: 495px;
        float: left;
    }
    .right{
        height: 495px;
        overflow:hidden;
        width: 565px;
        float: right;
        padding: 0;
        list-style: none;
        li{
            width: 100%;
            height: 95px;
            margin-bottom: 5px;
            background: #dcdddd;
            padding-left: 65px;
            padding-top: 15px;
            a{
                color: #333;
                width: 100%;
            }
            &.active{
                background: $mco;
                a{
                    color: #fff;
                }
            }
            &:last-of-type{
                line-height: 65px;
                font-weight: 700;
            }
        }
    }
}