使用jq和css3自制横向左右滑动图片列表

展示如下

目标效果

1. 默认选中第一张，鼠标悬浮缓慢放大图片，底部文字介绍由下往上缓慢滑出，选中后边框效果；
2. 左右滑动，距离为四张图片。

思路

1. 定义一个定宽的容器，然后图片不换行并排显示，超出部分隐藏，隐藏x轴滚动条；
2. 左右按钮点击，获取容器的滚动条位置，在此基础上加上固定移动距离，然后重置容器滚动条位置。

做法

• 左右箭头可以使用图片，我这里使用的是:before和:after伪类做的，通过倾斜加定位凑成一个箭头，这样做箭头前端是平的，不是尖的。还有一种做法是用height:0;width:0;然后通过边框做的，这种做法需要把背景色设置和页面颜色一样，看起来是个中空的箭头

• 图片并排显示需要给容器使用 white-space: nowrap，然后容器定宽高，并且overflow：hidden;

• 鼠标悬浮放大：很简单，使用transition和transform做

.box{
    width: 50px;
    height: 50px;
    background-color: red;
    transition: all 0.6s;
    cursor: pointer;
}

.box:hover{
    transform: scale(1.1);
}

• 底部文字缓慢从下往上滑出也是使用transition和transform做

/*info应该被包裹在box里*/
.box{
    position: relative;
}

.box .info{
    position: absolute;
    left: 0;
    bottom: 0;
    transition: height 0.6s;
    width: 100%;
    height: 0;
}

.box:hover > .info{
    height: auto;
}
/*仅做示范，实际可以看本文最后代码*/

• 选中后保持放大，并且加亮边框，可以直接将它的样式换成放大后的就可以

/*js*/
//jq对attr方法渐渐的使用prop去取代，有时使用attr方法获取不到你要的属性
$(".box").click(function(){
   
    $(this).prop('class','box-active');
});

/*css*/
//有时直接计算放大后的宽高得不到整数，直接设置宽高，点击效果会像移动了，可以直接使用transform进行原比例放大

.box-active{
    width: 50px;
    height: 50px;
    transform: scale(1.1);
    background-color: red;
    cursor: pointer;
    border: 2px solid #0068b7;
}

这样做出来的效果依然会出现点击后，图片像移动了一样，是因为多出了2px的边框宽度导致,可以给box加一个和背景一样颜色的2px边框，选中后将颜色换成亮色，由于边框一直存在，切换颜色就不会导致位移； 在有阴影时颜色设为和阴影同色。

• 点击左右按钮图片移动

/*js*/

$(".turn-right").click(function(){
   
    var obj = $(".box");
    if(obj.scrollWidth - obj.scrollLeft() < 1177){
        obj.animate({scrollLeft: obj.scrollWidth},1000);
    }else{
        obj.animate({scrollLeft:obj.scrollLeft()+1177},1000);
    }
});

$(".turn-left").click(function(){
   
    var obj = $(".box");
    if(obj.scrollLeft() < 1177){
        obj.animate({scrollLeft:0},1000);
    }else{
        obj.animate({scrollLeft:obj.scrollLeft()-1177},1000);
    }
});

obj.scrollWidth： 获取滚动条宽度（除滚动条本身按钮的宽度）

obj.animate： 设置滑动效果。scrollLeft:滚动至距离滚动条多少的位置。1000动画执行时间ms

1177：移动固定距离，可以根据自己需求定制

---

以下为所有代码，仅供参考

html

<div class="match container">
    <div class="content">
        <div class="slide">
            <div class="turn-left">
                <span class="arrow-left"></span>
            </div>
            <ul class="match-list">