js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 滚动代码

js实现轮播幻灯片3D特效并且可以左右翻页

发布时间:2015-08-29 13:12:55    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

js实现轮播幻灯片3D特效并且可以左右翻页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
		<title>js实现轮播幻灯片3D特效并且可以左右翻页</title>    
		<style type="text/css">    
			*{margin:0;padding:0;list-style-type:none;}    
			a,img{border:0;}    
			body{font:12px/180% Arial, Helvetica, sans-serif,"新宋体";}    
			/* focus_Box */    
			#focus_Box{position:relative;width:710px;height:308px;margin:20px auto;}    
			#focus_Box ul{position:relative;width:710px;height:308px}    
			#focus_Box li{z-index:0;position:absolute; width:0px;background:#787878;height:0px;top:146px;cursor:pointer;left:377px;border-radius:4px;box-shadow:1px 1px 12px rgba(200, 200, 200, 1)}    
			#focus_Box li img{width:100%;background:url(images/loading.gif) no-repeat center 50%;height:100%;vertical-align:top}    
			#focus_Box li p{position:absolute;left:0;bottom:0px;width:100%;height:40px;line-height:40px;background:url(images/float-bg.png) repeat;text-indent:8px;color:#fff;}    
			#focus_Box li p span{display:inline-block;width:70%;height:40px;overflow:hidden;}    
			#focus_Box .prev,#focus_Box .next{display:block;z-index:100;overflow:hidden;cursor:pointer;position:absolute;width:52px;height:52px;top:131px;}    
			#focus_Box .prev{background:url(images/btn.png) left bottom no-repeat;left:0px}    
			#focus_Box .next{background:url(images/btn.png) right bottom no-repeat;right:0px}    
			#focus_Box .prev:hover{background-position:left top;}    
			#focus_Box .next:hover{background-position:right top;}    
			#focus_Box a.imgs-scroll-btn{display:block;position:absolute;z-index:110;top:7px;right:15px;width:51px;height:23px;overflow:hidden;background:url(images/share-btn.png) no-repeat;text-indent:-999px;}    
		</style>    
		<script src="js/ZoomPic.js"></script>    
	</head>    
	<body>    
		<div id="focus_Box">    
			<span class="prev">&nbsp;</span>    
			<span class="next">&nbsp;</span>    
			<ul>    
				<li>    
					<a href="http://www.jstxdm.com"><img width="445" height="308" alt="这个时代 你所追求的是什么?" src="images/1.jpg" /></a>    
					<p>    
						<span>这个时代 你所追求的是什么?</span>    
						<a href="http://www.jstxdm.com" class="imgs-scroll-btn">分享</a>    
					</p>    
				</li>    
				<li>    
					<a href="http://www.jstxdm.com"><img width="445" height="308" alt="我们所追求的不是拥有一切,而是拥有值得的一切" src="images/2.jpg" /></a>    
					<p>    
						<span>我们所追求的不是拥有一切,而是拥有值得的一切</span>    
						<a href="http://www.jstxdm.com" class="imgs-scroll-btn">分享</a>    
					</p>    
				</li>    
				<li>    
					<a href="http://www.jstxdm.com"><img width="445" height="308" alt="一段旅程,两个城市,潮流正在被重塑" src="images/3.jpg" /></a>    
					<p>    
						<span>一段旅程,两个城市,潮流正在被重塑</span>    
						<a href="http://www.jstxdm.com" class="imgs-scroll-btn">分享</a>    
					</p>    
				</li>    
				<li>    
					<a href="http://www.jstxdm.com"><img width="445" height="308" alt="你的眼光、激情、创意和内涵,也在重塑着城市的潮流" src="images/4.jpg" /></a>    
					<p>    
						<span>你的眼光、激情、创意和内涵,也在重塑着城市的潮流</span>    
						<a href="http://www.jstxdm.com" class="imgs-scroll-btn">分享</a>    
					</p>    
				</li>    
				<li>    
					<a href="http://www.jstxdm.com"><img width="445" height="308" alt="在这里,抛开重重限制,释放真实自我" src="images/5.jpg" /></a>    
					<p>    
						<span>在这里,抛开重重限制,释放真实自我</span>    
						<a href="http://www.jstxdm.com" class="imgs-scroll-btn">分享</a>    
					</p>    
				</li>    
			</ul>    
		</div>    
	</body>    
</html>



幻灯片 左右

js实现轮播幻灯片3D特效并且可以左右翻页

js实现10屏带缩略图和标题的幻灯片轮播特效

JS仿360旅游首页幻灯片效果代码

JS带图片标题自动播放的幻灯片特效

JS视差滑块幻灯片特效

jQuery自动播放淡入淡出的幻灯片特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿淘宝首页缓冲幻灯片特效

jquery实现4款自定义图片切换幻灯片js特效

jquery仿支付宝全屏图片幻灯片淡出淡进切换特效

jquery实现婚纱摄影网站宽屏图片幻灯片轮播切换特效

jquery实现 ChinaJoy2014专题幻灯片特效

jQuery幻灯片插件,按钮控制图片过渡特效

jquery仿百度百科2014新首页幻灯片特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

jquery仿腾讯新闻网站带缩略图的幻灯片切换代码_js代码

jquery仿搜狐2014巴西世界杯专题幻灯片特效

jquery仿新浪2014成都车展幻灯片

jquery仿网易2014巴西世界杯专题幻灯片特效

jquery仿腾讯网新闻图片特效带缩略图的幻灯片切换特效

友荐云推荐
大家说 此评论不代表本站观点