ecshop首页滚动仿京东全球购大图配2小图

ecshop首页滚动仿京东全球购大图配2小图

做这个使用到了插件jquery.SuperSlide.js

targetCell:切换元素对象，处理内容切换元素非包裹状态下等情况，实现更多效果，处理更多情况，能和titCell、mainCell同时使用。

css：

.root61 .index_slide{width: 100%; min-width: 1210px; max-width: 1920px; height: 468px; margin: 0 auto; overflow: hidden; position: relative;}
.root61 .index_slide .slids{width: 100%; max-width: 1920px; height: 468px; overflow: hidden; position: absolute; top: 0; left: 0;}
.root61 .index_slide .slids .img_slide{width:100%; max-width: 1920px; height: 468px; position: absolute; top: 0px; left: 0px; z-index: 1; }
.root61 .index_slide .slids .img_slide li{width: 100%;  height: 468px; overflow: hidden;}
.root61 .index_slide .slids .img_slide li .img-out{position: relative; width: 1210px; height: 100%; margin: 0 auto;}
.root61 .index_slide .slids .img_slide li .img-out .img-inner{position: absolute; top: 0; left: 0; width: 1920px; height: 100%; margin-left: -355px;}
.root61 .index_slide .slids .img_slide li .img-out .img-inner img{width:100%; max-width: 1920px; height: 468px; }
.root61 .index_slide .small_img{width: 1210px; height: 468px; margin: 0 auto; position: relative;}
.root61 .index_slide .small_img .img_aside{position: absolute; top: 0px; right: -18px; z-index: 2; width: 234px;height: 468px; overflow: hidden; z-index: 5;}
.root61 .index_slide .small_img .img_aside img{width:234px; }
.root61 .index_slide .small_img .img_aside a:hover img{margin-left: -15px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out;}
.root61 .index_slide .small_img .slide_prev{position: absolute; top: 200px; left: 20%; display: inline-block; width: 16px; height: 30px; background: url('images/arrow2_1.png') no-repeat; z-index: 5;}
.root61 .index_slide .small_img .slide_prev:hover{background: url('images/arrowh2_1.png') no-repeat; }
.root61 .index_slide .small_img .slide_next{position: absolute; top: 200px; right: 40px; display: inline-block; width: 16px; height: 30px; background: url('images/arrow2_2.png') no-repeat; z-index: 5;}
.root61 .index_slide .small_img .slide_next:hover{background: url('images/arrowh2_2.png') no-repeat; }
.root61 .index_slide .small_img .slide_tips{position: absolute; bottom: 12px; right: 22%; height: 20px; z-index: 5;}
.root61 .index_slide .small_img .slide_tips li{display: inline-block; cursor: pointer; width: 14px; height: 14px; line-height: 14px; margin-left: 8px; text-align: center; color: #db2e26; background: url('images/index2016/banner_bg2.png') no-repeat;}
.root61 .index_slide .small_img .slide_tips .on,
.root61 .index_slide .small_img .slide_tips li:hover{background: url('images/index2016/banner_bg1.png') no-repeat; color: #fff}

html：

<div class="index_slide" id="index_slide">
    <div class="small_img" id="small_img">
        <ul class="img_aside">
            <li>
                {foreach from=$banner_small item=bs name=small}
                {$bs.img_url_format}
                {if $smarty.foreach.small.iteration % 2 eq 0 and $smarty.foreach.small.iteration lt $smarty.foreach.small.total}
            </li>
            <li>
                {/if}
                {/foreach}
            </li>
        </ul>
        <a class="slide_prev" href="javascript:void(0)"></a>
        <a class="slide_next" href="javascript:void(0)"></a>
        <div class="slide_tips hd">
            <ul class="tips">
                {foreach from=$banner item=bn name=b}
                {if $smarty.foreach.b.index eq 0}
                <li class="on">&nbsp;</li>
                {else}
                <li>&nbsp;</li>
                {/if}
                {/foreach}
            </ul>
        </div>
    </div>
    <div class="slids" id="slids">
        <ul class="img_slide">
            {foreach from=$banner item=bn}
            <li>
                <div class="img-out">
                    <div class="img-inner">{$bn.img_url_format}</div>
                </div>
            </li>
            {/foreach}
        </ul>
    </div>
</div>

js：

$(".index_slide").slide({mainCell:".small_img ul",  targetCell: ".img_slide li", prevCell:".slide_prev",nextCell:".slide_next", autoPlay:true, interTime: 4000, easing:"easeOutBounce"});