原生js html5 3d幻灯片宽屏图片切换效果代码



138 548 183



特效描述:原生js html53d幻灯片 宽屏图片切换效果,图片轮播幻灯片效果实现左右滚动图片切换

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/tiltSlider.js"></script>

3. HTML代码

<div class="slideshow" id="slideshow">
	<ol class="slides">
		<li class="current">
			<div class="description">
				<h2>Tilted Content Slideshow</h2>
				<p>This slider, as seen on the landing page of the <a href="http://www.thefwa.com/">FWA</a>, plays with 3D perspective and performs some interesting animations on the right-hand side images.</p>
			</div>
			<div class="tiltview col">
				<a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a>
				<a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a>
			</div>
		</li>
		<li>
			<div class="description">
				<h2>CSS Animations</h2>
				<p>We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called <code>data-effect-in</code> and <code>data-effect-out</code> for every slide. </p>
			</div>
			<div class="tiltview row">
				<a href="http://pexcil.com/"><img src="img/3_mobile.jpg"/></a>
				<a href="http://foodsense.is/"><img src="img/4_mobile.jpg"/></a>
			</div>
		</li>
		<li>
			<div class="description">
				<h2>Tilted Items</h2>
				<p>The perspective view is achieved by adding a perspective value to the slide list item and tilting a division that contains the two screenshots.</p>
			</div>
			<div class="tiltview col">
				<a href="http://minimalmonkey.com/"><img src="img/5_screen.jpg"/></a>
				<a href="http://www.herschelsupply.com/"><img src="img/6_screen.jpg"/></a>
			</div>
		</li>
		<li>
			<div class="description">
				<h2>Column or Row</h2>
				<p>The items in the tilted container are either laid out in a column or in a row. For some directions we need to adjust the animation delays for the items, since we don't want the items to overlap each other when they move in or out.</p>
			</div>
			<div class="tiltview row">
				<a href="http://grovemade.com/"><img src="img/1_mobile.jpg"/></a>
				<a href="https://tsovet.com/"><img src="img/2_mobile.jpg"/></a>
			</div>
		</li>
		<li>
			<div class="description">
				<h2>Responsiveness</h2>
				<p>For smaller screens, the items on the right hand side will become less opaque and serve as decoration only. The focus will be on the description which will occupy all the width.</p>
			</div>
			<div class="tiltview col">
				<a href="http://pexcil.com/"><img src="img/3_screen.jpg"/></a>
				<a href="http://foodsense.is/"><img src="img/4_screen.jpg"/></a>
			</div>
		</li>
		<li>
			<div class="description">
				<h2>Navigation</h2>
				<p>For the "line" navigation we use a little trick to make the clickable area a bit bigger: we add a thick white border to the top and bottom of the span. Since the border is part of the element, it will be part of the clickable zone.</p>
			</div>
			<div class="tiltview row">
				<a href="http://minimalmonkey.com/"><img src="img/5_mobile.jpg"/></a>
				<a href="http://www.herschelsupply.com/"><img src="img/6_mobile.jpg"/></a>
			</div>
		</li>
	</ol>
</div>
<script type="text/javascript">
new TiltSlider(document.getElementById('slideshow'));
</script>



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


热门标签: 滑动 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 图片滑动 图片切换 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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