JSSDK组件轮播效果-20131013

最新推荐文章于 2024-10-07 21:26:45 发布

xjwolaile

最新推荐文章于 2024-10-07 21:26:45 发布

阅读量101

点赞数

分类专栏：学习前端技术 kissy 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xjwolaile/article/details/84488449

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

kissy

3 篇文章 0 订阅

订阅专栏

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>