右边选项卡焦点轮播图

右边选项卡的焦点轮播图：
涉及到的JQUERY方法:（来自菜鸟教程）
  1、 addClass() 方法：向被选元素添加一个或多个类名，不会移除已存在的class属性，只是添加一个或多个类名到class属性，如需添加多个类请使用空格分隔类名。
语法:KaTeX parse error: Expected 'EOF', got '&' at position 155: …s-返回被选元素的当前类名。 &̲emsp; 2、 s…(selector).siblings(filter) filter:规定缩小搜索同级元素范围的选择器表达式;
  3、 setTimeout（）方法:用于在指定的毫秒数后调用函数或表达式
语法:setTimeout(code,milliseconds,param1,param2)
Code/function:必需。要调用一个代码串，也可以是一个函数
  4、 clearTimeout()方法可取消setTimeout()方法设置的定时操作
clear Timeout()方法的参数必须是setTimeout（）返回的ID值
  5、 setInterval()方法可按照指定的周期来调用函数或表达式setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
步骤:
  思路：
  1、 首先获取大盒子元素，通过大盒子找到各个子元素。
  2、 设置右边点击图片，左边通过index找到对应的图片改变其透明度
  3、 设置动画左边图片离开时更换图片，执行动画。

代码示例：
html代码:

<div class="box" id="focus">
        <div class="wrap" id="left">
            <ul class="Carousel">
                <li style="opacity:1;">
                    <img src="img/1.jpg">
                </li>
                <li>
                    <img src="img/2.jpg">

                </li>
                <li>
                    <img src="img/3.jpg">
                </li>
                <li>
                    <img src="img/4.jpg">

                </li>
            </ul>
        </div>
        <div class="right">
            <ul class="brink" >
                <li>
                    <img src="img/1.jpg">
                </li>
                <li>
                    <img src="img/2.jpg">

                </li>
                <li>
                    <img src="img/3.jpg">

                </li>
                <li>
                    <img src="img/4.jpg">
                </li>
            </ul>
        </div>
    </div>

css代码:

.box{
    width: 1000px;
    height: 400px;
    background-color: #1afa29;
    border: 2px solid #bbbbbb;
    margin-left: 50px;
}
.wrap{
    width: 800px;
    height: 100%;
    background-color: #7f2ec2;
    float: left;
    /*overflow: hidden;*/
}
.brink{
    width: 200px;
    height: 100%;
    float: right;
    background-color: #2e6da4;
    list-style-type: none;
}
.brink>li{
    height: 98px;
    border:1px solid black;
    width: 100%;
}
.brink>li>img{
    height: 98px;
    width: 200px;
}
.Carousel{
    /*width: 3220px;*/
    height: 100%;
    position: relative;
    background-color: #4cae4c;
    list-style-type: none;
}
.Carousel>li>img{
    width: 800px;
    height: 400px;
}
.Carousel>li{
    display: inline-block;
 position: absolute;
    width: 800px;
    height: 400px;
}

Jquery代码:

<script>
    $(document).ready(function () {
//        先获取盒子的id以及需要的元素
        var oFucus = $("#focus"),
            oRight = $(".right"),
            oLeft = $("#left"),
            aLli = oLeft.find("li"),
            aRli = oRight.find("li"),
            timer = null,
            index = 0;
//        右边点击左边图片更换
        aRli.click(function () {
//            先获取图片的索引
            index = $(this).index();
            aLli.eq(index).animate({"opacity":1},300).siblings().stop().animate({"opacity":0},300)});
//        开始动画
        function starAnimation(){
            index++;
            index = index > aRli.length-1?0:index;
            aLli.eq(index).animate({"opacity":1},300).siblings().stop().animate({"opacity":0},300).stop();
        }
//        动画参数
        timer = setInterval(function () {
            starAnimation()
        },500);
//        停止动画
        function stopAnimation(){
            clearInterval(timer);
        }
        //        左边的动画
        oLeft.mouseenter(function () {
            stopAnimation()
        }).mouseleave(function () {
            starAnimation()
        })
    })
</script>