JSSDK组件轮播成效-20131013-JavaSript-爱易网页

JSSDK组件轮播成效-20131013

日期：2014-05-16　浏览次数：20393 次

JSSDK组件轮播效果-20131013
1、效果及功能说明

jssdk组件的页面轮播效果

2、实现原理

自动轮播和手动焦点图效果，当鼠标移动到焦点图的序号上就会直接切入图片，后过2秒自动回复轮播效果

主要的方法

<script type="text/javascript">
        都是封装好的代码 只要这个id lunbo放入最外围的div里面就可以执行
	KISSY.use("switchable", function (S, Switchable) {
		new Switchable.Slide('#lunbo', {
			contentCls:'box',
			effect : 'fade'
		});
	});
</script>

3、图片只在网内的tms里其只有所以暂时没有图片说明

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码

<!DOCTYPE HTML>

<html>
<head>
<style type="text/css">
body,ul,li,p{ margin:0; padding:0; list-style:none;}
#content,#page{width:100%;}
.silde{position:relative;width:495px;height:280px;overflow:hidden;}
.box{position:relative;}
.silde .ks-switchable-nav {position: absolute;bottom: 5px;right: 5px;z-index: 99;}
.silde .ks-switchable-nav li {float: left;width: 25px;height: 25px;line-height: 25px;margin-left: 3px;background-color: #e0e0e0;border: 1px solid #6b6b6b;color: #5a5a59;text-align: center;cursor: pointer;list-style: none;}
.silde .ks-switchable-nav li.ks-active {width: 25px;height: 25px;line-height: 25px;margin-top: -1px;color:#6b6b6b;background-color:#323230; border:1px solid #6b6b6b;font-weight: bold;}
</style>  
</head>

<body>
<div class="silde" id="lunbo" >
     <ul class="box">
      <cms:custom title="轮播效果" group="轮播图片" fields="link:链接:href,img:图片[495*280]:string" defaultRow="2" row="10" name="dab69f6c-01f8-4474-a1a9-afaa9a27c16c"> 
      #foreach($item in $customList)
      <li><a target="_blank" href="$!item.link"><img src="$!item.img" width="495" height="280" alt=""></a></li>
      #end
      </cms:custom>
   </ul>
</div>
</body>

<script type="text/javascript">
	KISSY.use("switchable", function (S, Switchable) {
		new Switchable.Slide('#lunbo', {
			contentCls:'box',
			effect : 'fade'
		});
	});
</script>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JSSDK组件轮播成效-20131013

相关资料更多>

推荐阅读更多>