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"> </li>
{else}
<li> </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"});