嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

周梦康 发表于 2014-06-18 2326 次浏览 标签 : javascript

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

代码简单,没有多余的功能,只能实现最简单的幻灯片效果,自动播放,鼠标hover则停止,点击数字则跳转到对应的图片。

代码已经上传到github上,发现每次写这些简单的前端小脚本,如果没有演示不是很好,现在可以直接预览啦。

第一种渐变效果:预览地址:http://code.mengkang.net/code-demo/slideshow/

第二种左右切换:预览地址:http://code.mengkang.net/code-demo/slideshow/sroll.html

直接复制代码:https://github.com/zhoumengkang/zhoumengkang.github.io/blob/master/code-demo/slideshow

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="utf-8">
	<title></title>
	<style type="text/css">
	/*幻灯片样式*/
	.img_switch{position: relative;}
	#pic div{
		position: absolute;
		height: 300px;
		width: 640px;
		top: 0px;
		left: 0px;
	}
	.div1{
		background-color: #F5E8A6;z-index: 1;
	}
	.div2{
		background-color: #90A8F6;
	}
	.div3{
		background-color: #7DDF9D;
	}
	.div4{
		background-color: #D68585;
	}
	/*控制按钮样式*/
	.liHover{
		background: #FF9191!important;
		color: #fff;
	}
	#play li{
		cursor: pointer;
		float: left;
		list-style-type: none;
		display: block;
		background: #fff;
		padding: 5px 10px;
		margin-left: 5px;
		border-radius: 15px;
		font:13px Helvetica, arial, freesans, clean, sans-serif;
	}
	.number_nav{
		z-index: 3;
		position: absolute;
		top: 249px;
		left: 438px;
	}
	</style>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var _c = 1,_h = null;

		//自动播放
		function play(){
		    _h = setInterval(function(){
		    	_c = _c >= 4 ? 0 : _c;
			    change(_c);
		    }, 2000);
		}
		
		//切换
		function change(i){
		    $('#play li').removeClass("liHover").eq(i).addClass("liHover");
		   	$("#pic div").not(i).fadeOut("slow").eq(i).fadeIn("slow");
		   	_c++;
		}

	    play();
	 
	    $('#play  li').click(function(){
	        i = $("#play li").index($(this));
	        clearInterval(_h);
	        _c = i;
	        change(i);
	    })

	    $("#pic div").hover(function(){
			clearInterval(_h)
		},function(){
			play();
		});
	})
	</script>
</head>
<body>
<div class="img_switch">
	<div class="img_switch_content" id="pic">
		<div class="div1"></div>
		<div class="div2" style="display:none;"></div>
		<div class="div3" style="display:none;"></div>
		<div class="div4" style="display:none;"></div>
	</div>
	<div class="number_nav">
 		<ul id="play">
 			<li class="liHover">1</li>
			<li class="">2</li>
			<li class="">3</li> 
			<li class="">4</li>
		</ul>
	</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="utf-8">
	<title></title>
	<style type="text/css">
	/*幻灯片样式*/
	*{margin: 0 auto;padding: 0;}
	.img_switch{
		width: 960px;
		position: relative;
		height: 300px;
		background: #999;
		overflow: hidden;
	}
	#pic{
		position: absolute;
		width: 4800px;
	}
	#pic div{
		height: 300px;
		width: 960px;
		float: left;
	}
	.div1{
		background-color: #F5E8A6;
	}
	.div2{
		background-color: #90A8F6;
	}
	.div3{
		background-color: #7DDF9D;
	}
	.div4{
		background-color: #D68585;
	}
	/*控制按钮样式*/
	.liHover{
		background: #FF9191!important;
		color: #fff;
	}
	#play li{
		cursor: pointer;
		float: left;
		list-style-type: none;
		display: block;
		background: #fff;
		padding: 5px 10px;
		margin-left: 5px;
		border-radius: 15px;
		font:13px Helvetica, arial, freesans, clean, sans-serif;
	}
	.number_nav{
		z-index: 3;
		position: absolute;
		top: 249px;
		left: 417px;
	}
	div.box a{
		position: absolute;
		display: block;
		width: 48px;
		height: 48px;
		background: url(./left_right.png) no-repeat;
		top:110px;
	}
	div.box a.prev{
		background-position:0 0;
		left:2%;
	}
	div.box a.prev:hover{
		background-position:0 -125px;
	}
	div.box a.next{
		background-position:0 -63px;
		right:2%;
	}
	div.box a.next:hover{
		background-position:0 bottom;
		
	}
	</style>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var _c = 1,_h = null,_left = 0;

		//自动播放
		function play(){
		    _h = setInterval(function(){
		    	_c = _c >= 5 ? 1 : _c;
			    change(_c);
		    }, 2000);
		}
		
		//切换
		function change(i){
		   	_left = i * (-960);
		   	if(i == 4){
		   		$("#pic").animate({"left":_left},function(){
		   			$("#pic").css("left",0);
		   		});
		   		$('#play li').removeClass("liHover").eq(0).addClass("liHover");
		   	}else{
		   		$('#play li').removeClass("liHover").eq(i).addClass("liHover");
		   		$("#pic").animate({"left":_left});
		   	}
		   	_c++;
		}

	    play();
	 	
	 	//点击
	    $('#play  li').click(function(){
	        i = $("#play li").index($(this));
	        clearInterval(_h);
	        _c = i;
	        change(i);
	    })
	    //悬浮停止
	    $("#pic div").hover(function(){
			clearInterval(_h)
		},function(){
			play();
		});
		//向左向右
		$(".box .prev").click(function(){
			if(_c<=1){
				return false;
			}
			console.log(_c);
			_c = _c -2;
			clearInterval(_h);
			change(_c);
		})
		$(".box .next").click(function(){
			if(_c>=4){
				return false;
			}
			clearInterval(_h);
			change(_c);
		})
	})
	</script>
</head>
<body>

<div class="img_switch">
	<div id="pic">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<div class="div1"></div>
	</div>
	<div class="number_nav">
 		<ul id="play">
 			<li class="liHover">1</li>
			<li class="">2</li>
			<li class="">3</li> 
			<li class="">4</li>
		</ul>
	</div>
	<div class="box">
		<a class="prev" href="#"></a>
		<a class="next" href="#"></a>
	</div>
</div>
</body>
</html>

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表