商家店铺资源中心

当前位置：首页>伪属性方法库> 常用方法> 【图片轮播 slidePhoto】方法详情页

图片轮播 slidePhoto

JSHOP 2013-12-27 15:12:54
评论：0 浏览：37271

方法描述

1、根据用户设置的宽度和高度来确定轮播图的大小。2、可自定义向左、向上轮播和渐变轮播参数。3、可设置图片轮播时间。

应用场景

主要应用于图片轮播模块。

方法参数

名称	值	类型	描述
调用语句	<div class="j-module" module-function="slidePhoto" module-param="{参数一:值,参数二:值,...>模板代码</div>	方法调用	支持传入参数
功能参数
轮播效果	subFunction	string	其值为：transparentEffect（透明）和moveEffect（移动），当值为moveEffect时，需配合滑动方向slideDirection参数使用。如{subFunction:'moveEffect',slideDirection:'left'}
轮播方向	slideDirection	string	可选值left：向左滑动，top：向上滑动。如{slideDirection:'left'}
轮播时间	timer	number	每一张图片轮播的时间（单位：秒）。如{timer:3}
切换事件	eventType	string	小缩略图或者数字的切换事件，可选click、mouseenter等。如{eventType:'click'}
当前样式	defaultClass	string	给当前显示的图片增加一个样式。如{defaultClass:'show'}
节点参数
大图外层容器	imgArea	string	所有大图最外层的div。如：{imgArea:'.jbannerImg'}
大图内层容器	imgNodeArea	string	所有大图的滚动层。如：{imgNodeArea:'.jImgNodeArea'}
大图容器	imgNode	string	每一个大图外层的dl。如：{imgNode:'.jbannerImg dl'}
小图外层容器	tabArea	string	所有缩略小图最外层的div。如：{tabArea:'.jbannerTab'}
小图容器	tabNode	string	每一个缩略小图的span。如：{tabNode:'.jbannerTab span'}
图片描述	photoName	string	图片描述。如：{photoName:'.jDesc'}
左箭头	arrowLeft	string	左箭头。如：{arrowLeft:'.jPreOut'}
右箭头	arrowRight	string	右箭头。如：{arrowRight:'.jNextOut'}
左箭头移动效果	arrowLeftOver	string	左箭头移动效果。如：{arrowLeftOver:'jPreOver'}
右箭头移动效果	arrowRightOver	string	右箭头移动效果。如{arrowRightOver:'jNextOver'}

可使用模块

图片轮播
更多效果等您发挥

图片轮播DEMO一图片轮播DEMO二图片轮播DEMO三图片轮播DEMO四

小缩略图-左右移动

<div class="j-module" module-function="slidePhoto" module-param="{slideDirection:'left',subFunction:'moveEffect',timer:'$!timer'}">
	#if(!$!height)
    <div class="jMessageRemind" style="display:block; position:static;"><br /><br />此模板需要在当前轮播图模块的“设置”中，配置图片的高度和宽度后才能生效！<br /><br /></div>
    #else
    <div class="jbannerImg" style="width:$!{width}px; height:$!{height}px;">
        <div class="jImgNodeArea">
            #foreach($!banner in $!bannerContent)
                #if($!banner.publish == 1)
            <dl background="$!banner.bgColor" ref="$!banner.url">
                <dt><img src="$!banner.imageUrl" title="$!banner.name" width="$!width" height="$!height" /></dt>
                <dd></dd>
            </dl>
               #end
           #end
        </div> 
    </div>
   <div class="jbannerTab">
        <div class="jbannerThumbnail">
            <em class="jPreOut"></em>
            #foreach($!banner in $!bannerContent)
                #if($!banner.publish == 1)
                    #if($!banner.thumUrl)
                    <span><img src="$!banner.thumUrl" /></span>
                    #else
                    <span><img src="//img13.360buyimg.com/cms/g14/M0A/08/05/rBEhVlIkY28IAAAAAAAFJD1FlqQAABmJAGBs3wAAAU8667.gif" /></span>
                    #end
               #end
           #end        
           <em class="jNextOut"></em>
        </div>
        <label class="jDesc"></label>
        <div class="jShade"></div>
    </div>
    #end
</div>

.userjBanner{overflow:hidden; position:relative;}
.userjBanner .j-module{zoom:1;}
.userjBanner .jBannerImg{position:relative; overflow:hidden; height:250px; margin:0 auto;}
.userjBanner .jBannerImg dl{height:100%; position:relative; float:left; overflow:hidden;}
.userjBanner .jBannerImg img{display:block;}
.userjBanner .jBannerImg dd{width:100%; height:40px; position:absolute; bottom:0px; color:#fff; background:#000; filter:alpha(opacity=80); opacity:0.8;}
.userjBanner .jBannerImg a{display:block;}
.userjBanner .jBannerImg a:hover img{}
.userjBanner .jBannerImg dl.show img{filter:alpha(opacity=100); opacity:1;}
.userjBanner .jBannerImg dl.show dd{background:#000; filter:alpha(opacity=80); opacity:0.8;}
.userjBanner .jBannerTab{width:100%; height:40px; position:absolute; bottom:0; z-index:0; overflow:hidden;}
.userjBanner .jBannerTab .jShade{width:100%; height:40px; background:#000; opacity:0.8; filter:alpha(opacity=80); position:absolute; top:0; z-index:-1;}
.userjBanner .jBannerTab .jBannerThumbnail{float:right;}
.userjBanner .jBannerTab em, .userjBanner .jBannerTab span{height:40px; width:40px; float:left; cursor:pointer;}
.userjBanner .jBannerTab span{margin:0 3px; _margin:0 1px;}
.userjBanner .jBannerTab span img{width:38px; height:34px; border:solid 1px #000; margin:2px 3px;}
.userjBanner .jBannerTab span.show img{border:solid 2px #F30; margin:1px 2px;}
.userjBanner .jBannerTab .jDesc{font-size:14px; font-weight:bold; color:#fff; line-height:40px; vertical-align:middle; display:block; padding-left:15px;}
.userjBanner .jPreOut{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) 0 0 no-repeat;}
.userjBanner .jPreOver{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) 0 -40px no-repeat;}
.userjBanner .jNextOut{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) 0 0 no-repeat;}
.userjBanner .jNextOver{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) 0 -40px no-repeat;}

数字-透明渐变

1 2 3

<div class="j-module" module-function="slidePhoto" module-param="{subFunction:'transparentEffect',timer:'$!timer'}">
	#if(!$!height)
	<div class="jMessageRemind" style="display:block; position:static;"><br /><br />此模板需要在当前轮播图模块的“设置”中，配置图片的高度和宽度后才能生效！<br /><br /></div>
    #else
	<div class="jbannerImg" style="width:$!{width}px; height:$!{height}px;">
		<div class="jImgNodeArea">
			#foreach($!banner in $!bannerContent)
				#if($!banner.publish == 1)
			<dl background="$!banner.bgColor" ref="$!banner.url">
				<dt><img src="$!banner.imageUrl" title="$!banner.name" width="$!width" height="$!height" /></dt>
				<dd></dd>
			</dl>
			   #end
		   #end
		</div>
	</div>
	<div class="jbannerTab">
		<div class="jbannerThumbnail">
			<em class="jPreOut"></em>
			#set($i=1)
			#foreach($!banner in $!bannerContent)
				#if($!banner.publish == 1)
					<span>$i</span>
				#end
			   #set($i=$i+1)
		   #end        
		   <em class="jNextOut"></em>
		</div>
	</div>
    #end
</div>

.userjBanner{overflow:hidden; position:relative;}
.userjBanner .j-module{zoom:1;}
.userjBanner .jBannerImg{position:relative; overflow:hidden;margin:0 auto;}
.userjBanner .jImgNodeArea{}
.userjBanner .jBannerImg dl{width:100%; position:relative; overflow:hidden; display:none;}
.userjBanner .jBannerImg dl.show{display:block;}
.userjBanner .jBannerImg img{display:block;}
.userjBanner .jBannerImg dd{width:100%; height:25px; position:absolute; bottom:0px; color:#fff;}
.userjBanner .jBannerImg a{display:block;}
.userjBanner .jBannerImg a:hover img{}
.userjBanner .jBannerImg dl.show img{filter:alpha(opacity=100); opacity:1;}
.userjBanner .jBannerImg dl.show dd{}
.userjBanner .jBannerTab{width:100%; height:20px; position:absolute; bottom:5px; overflow:hidden;}
.userjBanner .jBannerTab .jBannerThumbnail{text-align:center;}
.userjBanner .jBannerTab span, .userjBanner .jBannerTab em{display:inline-block; *display:inline; zoom:1; vertical-align:middle;}
.userjBanner .jBannerTab span{width:14px; height:14px; line-height:14px; margin:2px; text-align:center; background:#FFF; border:1px solid #D00000; cursor:pointer;}
.userjBanner .jBannerTab span.show{width:18px; height:18px; line-height:18px; margin: 0 2px; background:#FF0000; color:#fff;}
.userjBanner .jBannerTab em{height:20px; width:20px; cursor:pointer;}
.userjBanner .jPreOut{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -10px no-repeat;}
.userjBanner .jPreOver{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -50px no-repeat;}
.userjBanner .jNextOut{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -10px no-repeat;}
.userjBanner .jNextOver{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -50px no-repeat;}

数字-左右移动

1 2 3

<div class="j-module" module-function="slidePhoto" module-param="{slideDirection:'left',subFunction:'moveEffect',timer:'$!timer'}">
	#if(!$!height)
    <div class="jMessageRemind" style="display:block; position:static;"><br /><br />此模板需要在当前轮播图模块的“设置”中，配置图片的高度和宽度后才能生效！<br /><br /></div>
    #else
    <div class="jbannerImg" style="width:$!{width}px; height:$!{height}px;">
        <div class="jImgNodeArea">
            #foreach($!banner in $!bannerContent)
                #if($!banner.publish == 1)
            <dl background="$!banner.bgColor" ref="$!banner.url">
                <dt><img src="$!banner.imageUrl" title="$!banner.name" width="$!width" height="$!height" /></dt>
                <dd></dd>
            </dl>
               #end
           #end
        </div> 
    </div>
   <div class="jbannerTab">
		<div class="jbannerThumbnail">
			<em class="jPreOut"></em>
			#set($i=1)
			#foreach($!banner in $!bannerContent)
			   #if($!banner.publish == 1)
					<span>$i</span>
			   #end
			   #set($i=$i+1)
		   #end        
		   <em class="jNextOut"></em>
		</div>
	</div>
    #end
</div>

.userjBanner{overflow:hidden; position:relative;}
.userjBanner .j-module{zoom:1;}
.userjBanner .jbannerImg{position:relative; overflow:hidden; height:200px; margin:0 auto;}
.userjBanner .jbannerImg dl{width:100%; position:relative; overflow:hidden;}
.userjBanner .jbannerImg img{display:block;}
.userjBanner .jbannerImg dd{width:100%; height:25px; position:absolute; bottom:0px; color:#fff;}
.userjBanner .jbannerImg a{display:block;}
.userjBanner .jbannerImg a:hover img{}
.userjBanner .jbannerImg dl.show img{filter:alpha(opacity=100); opacity:1;}
.userjBanner .jbannerImg dl.show dd{}
.userjBanner .jbannerTab{width:100%; height:20px; position:absolute; bottom:5px; overflow:hidden;}
.userjBanner .jbannerTab .jbannerThumbnail{text-align:center;}
.userjBanner .jbannerTab span, .userjBanner .jbannerTab em{display:inline-block; *display:inline; zoom:1; vertical-align:middle;}
.userjBanner .jbannerTab span{width:14px; height:14px; line-height:14px; margin:2px; text-align:center; background:#FFF; border:1px solid #D00000; cursor:pointer;}
.userjBanner .jbannerTab span.show{width:18px; height:18px; line-height:18px; margin: 0 2px; background:#FF0000; color:#fff;}
.userjBanner .jbannerTab em{height:20px; width:20px; cursor:pointer;}
.userjBanner .jPreOut{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -10px no-repeat;}
.userjBanner .jPreOver{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -50px no-repeat;}
.userjBanner .jNextOut{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -10px no-repeat;}
.userjBanner .jNextOver{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -50px no-repeat;}

数字-上下移动

1 2 3

<div class="j-module" module-function="slidePhoto" module-param="{slideDirection:'top',subFunction:'moveEffect',timer:'$!timer'}">
	#if(!$!height)
    <div class="jMessageRemind" style="display:block; position:static;"><br /><br />此模板需要在当前轮播图模块的“设置”中，配置图片的高度和宽度后才能生效！<br /><br /></div>
    #else
    <div class="jbannerImg" style="width:$!{width}px; height:$!{height}px;">
        <div class="jImgNodeArea">
            #foreach($!banner in $!bannerContent)
                #if($!banner.publish == 1)
            <dl background="$!banner.bgColor" ref="$!banner.url">
                <dt><img src="$!banner.imageUrl" title="$!banner.name" width="$!width" height="$!height" /></dt>
                <dd></dd>
            </dl>
               #end
           #end
        </div> 
    </div>
   <div class="jbannerTab">
		<div class="jbannerThumbnail">
			<em class="jPreOut"></em>
			#set($i=1)
			#foreach($!banner in $!bannerContent)
			   #if($!banner.publish == 1)
					<span>$i</span>
			   #end
			   #set($i=$i+1)
		   #end        
		   <em class="jNextOut"></em>
		</div>
	</div>
    #end
</div>

.userjBanner{overflow:hidden; position:relative;}
.userjBanner .j-module{zoom:1;}
.userjBanner .jbannerImg{position:relative; overflow:hidden; height:200px; margin:0 auto;}
.userjBanner .jbannerImg dl{width:100%; position:relative; overflow:hidden;}
.userjBanner .jbannerImg img{display:block;}
.userjBanner .jbannerImg dd{width:100%; height:25px; position:absolute; bottom:0px; color:#fff;}
.userjBanner .jbannerImg a{display:block;}
.userjBanner .jbannerImg a:hover img{}
.userjBanner .jbannerImg dl.show img{filter:alpha(opacity=100); opacity:1;}
.userjBanner .jbannerImg dl.show dd{}
.userjBanner .jbannerTab{width:100%; height:20px; position:absolute; bottom:5px; overflow:hidden;}
.userjBanner .jbannerTab .jbannerThumbnail{text-align:center;}
.userjBanner .jbannerTab span, .userjBanner .jbannerTab em{display:inline-block; *display:inline; zoom:1; vertical-align:middle;}
.userjBanner .jbannerTab span{width:14px; height:14px; line-height:14px; margin:2px; text-align:center; background:#FFF; border:1px solid #D00000; cursor:pointer;}
.userjBanner .jbannerTab span.show{width:18px; height:18px; line-height:18px; margin: 0 2px; background:#FF0000; color:#fff;}
.userjBanner .jbannerTab em{height:20px; width:20px; cursor:pointer;}
.userjBanner .jPreOut{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -10px no-repeat;}
.userjBanner .jPreOver{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -50px no-repeat;}
.userjBanner .jNextOut{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -10px no-repeat;}
.userjBanner .jNextOver{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -50px no-repeat;}