html5图片3d切换幻灯片轮播特效代码



180 716 239



特效描述:html5图片 3d切换 幻灯片轮播特效,3d切换幻灯片轮播特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

2. 引入JS

<script type='text/javascript' src='js/modernizr.min.js'></script>
<script type='text/javascript' src='js/cute.slider.js'></script>
<script type='text/javascript' src='js/cute.transitions.all.js'></script>

3. HTML代码

<div class="c-860 c-demoslider">
	<div id="cuteslider_3_wrapper" class="cs-circleslight">
		<div id="cuteslider_3" class="cute-slider" data-width="960" data-height="420" data-overpause="true">
			<ul data-type="slides">
				<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr29,tr27,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13,tr45" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
					<img src="images/001.jpg" data-thumb="images/001a.png" />
					<a data-type="link" href="http://www.51qianduan.com" target="_blank"></a>
				</li>
				<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
					<img src="images/blank.png" data-src="images/002.jpg" data-thumb="images/002a.png" />
					<a data-type="link" href="http://www.51qianduan.com" target="_blank"></a>
				</li>
				<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr41">
					<img src="images/blank.png" data-src="images/003.jpg" data-thumb="images/003a.png" />
					<a data-type="link" href="http://www.51qianduan.com" target="_blank"></a>
				</li>
				<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
					<img src="images/blank.png" data-src="images/004.jpg" data-thumb="images/004a.png" />
					<a data-type="link" href="http://www.51qianduan.com" target="_blank"></a>
				</li>
				<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
					<img src="images/blank.png" data-src="images/005.jpg" data-thumb="images/005a.png" />
					<a data-type="link" href="http://www.51qianduan.com" target="_blank"></a>
				</li>
				<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
					<img src="images/blank.png" data-src="images/006.jpg" data-thumb="images/006a.png" />
					<a data-type="link" href="http://www.51qianduan.com" target="_blank"></a>
				</li>
			</ul>
			<ul data-type="controls">
				<li data-type="captions"></li>
				<li data-type="link"></li>
				<li data-type="video"></li>
				<li data-type="slideinfo"></li>
				<li data-type="circletimer"></li>
				<li data-type="previous"></li>
				<li data-type="next"> </li>
				<li data-type="bartimer"></li>
				<li data-type="slidecontrol" data-thumb="true" data-thumbalign="up"></li>
			</ul>
		</div>
		<div class="cute-shadow"><img src="images/shadow.png" alt="shadow" /></div>
	</div>
</div>
<script type="text/javascript">
var cuteslider3 = new Cute.Slider();
cuteslider3.setup("cuteslider_3" , "cuteslider_3_wrapper", "css/slider-style.css");
cuteslider3.api.addEventListener(Cute.SliderEvent.CHANGE_START, function(event){});
cuteslider3.api.addEventListener(Cute.SliderEvent.CHANGE_END, function(event){});
cuteslider3.api.addEventListener(Cute.SliderEvent.WATING, function(event){});
cuteslider3.api.addEventListener(Cute.SliderEvent.CHANGE_NEXT_SLIDE, function(event){});
cuteslider3.api.addEventListener(Cute.SliderEvent.WATING_FOR_NEXT, function(event){});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 旋转翻转 切换按钮 表单 焦点图 幻灯片 图片轮播 图片翻转旋转 图片切换 图片轮播 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到