Jshop 图片轮播效果 圆点+左右按钮+全屏宽
模板内容
css样式内容
CSSID：mySlide
预览效果：http://mall.jd.com/index-40173.html
说明：
此全屏轮播图有少许限制
1，图片大小1990*450
2，不能更改轮播图的响应轮播方式
3，只能 放在 通栏100% 布局内
PS:喜欢可以拿去用，
<div module-name="BannerHtml" class="user_slide">
<div module-param="{slideDirection:'left',subFunction:'transparentEffect',imgArea:'.scroll_cons',imgNode:'.scroll_cons li',tabArea:'.scroll_nav',tabNode:'.scroll_nav li',arrowLeft:'.prve-c',arrowRight:'.next-c',timer:5}" module-function="slide" class="j-module">
<div class="prve-c"></div>
<div class="next-c"></div>
<ul class="scroll_nav">
set($i=1)
foreach($!banner in $!bannerContent)
<li class="">$i</li>
set($i=$i+1)
end
</ul>
<ul class="scroll_cons" style="margin-left:-600px">
foreach($!banner in $!bannerContent)
if($!banner.publish == 1)
<li class="" style="opacity: 1;">
<a target="_blank" href="$!banner.url"><img title="$!banner.name" width="$!banner.width" height="$!banner.height" src="$!banner.imageUrl"></a>
</li>
end
end
</ul>
</div>
</div>css样式内容
.user_slide{margin:-10px auto 0;background:#eee;width:950px;height:450px;}
.user_slide .prve-c,
.user_slide .next-c{position:absolute;opacity:0.5;margin-top:180px;height:90px;width:46px;cursor:pointer;background:url(http://img10.360buyimg.com/imgzone/g12/M00/08/1E/rBEQYFGcbu0IAAAAAAAFE_QBZ7IAABvygP_-moAAAWW826.png) no-repeat;z-index:5}
.user_slide .prve-c{margin-left:-70px}.user_slide .next-c{margin-left:970px;background-position:-46px 0}
.user_slide .prve-c:hover,.user_slide .next-c:hover{opacity:1;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
.user_slide .scroll_nav{position:absolute;margin:420px 0 0 880px;z-index:4}
.user_slide .scroll_nav li{display:block;float:left;width:14px;height:14px;text-indent:-99px;overflow:hidden;background:#B5B5B5;border-radius:50%;margin-right:8px;cursor:pointer}
.user_slide .scroll_nav li.show{background:#C80002}
.user_slide .scroll_cons{/*position:absolute;*/width:1990px;height:450px;margin-left:-585px;z-index:1}
.user_slide .scroll_cons li{display:none}.user_slide .scroll_cons li.show{display:block}CSSID：mySlide
预览效果：http://mall.jd.com/index-40173.html
说明：
此全屏轮播图有少许限制
1，图片大小1990*450
2，不能更改轮播图的响应轮播方式
3，只能 放在 通栏100% 布局内
PS:喜欢可以拿去用，
RSS Feed