轮播图求建议

Lookforto
Lookforto 发布于 2017-01-10 16:13:16 浏览:421 类型:原创 - 随笔 分类:JavaScript - JavaScript 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{
				width: 300px;
				height: 150px;
				border: 1px solid #ccc;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			.box ul{
				width: 1500px;
				overflow: hidden;
				height: 150px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.box ul li{
				float: left;
				width: 300px;
				height: 150px;
				list-style: none;
			}
			.page{
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 30px;
				background: #000;
				color: #fff;
				z-index: 5;
			}
			.page a{
				height: 30px;
				width: 30px;
				float: left;
				text-align: center;
				line-height: 30px;
				margin-left: 25px;
				cursor: pointer;
			}
			.btn_left{
				position: absolute;
				top: 50%;
				left: 0;
		        width: 30px;
		        height: 30px;
				margin-top: -15px;
				background: #ccc;
				z-index: 5;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			.btn_right{
				position: absolute;
				top: 50%;
				right: 0;
		        width: 30px;
		        height: 30px;
				margin-top: -15px;
				background: #ccc;
				z-index: 5;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span class="btn_left">&lt;</span>
			<span class="btn_right">&gt;</span>
			<div class="page">
				<a src="javascript" style="background: red;">1</a>
				<a src="javascript">2</a>
				<a src="javascript">3</a>
				<a src="javascript">4</a>
				<a src="javascript">5</a>
			</div>
			<ul id="ul">
				<li style="background: red;" ></li>
				<li style="background: yellow;"></li>
				<li style="background: blue;"></li>
				<li style="background: firebrick;"></li>
				<li style="background: teal;"></li>
			</ul>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>		
	
		<script>
		    	function strd(str){
                    return str.substring(11,str.length-1)    
	           }
			 $(function(){
			 	//左边按钮
			 	var num=0;	

			
				 $('.btn_left').on('click',lop)
			          function lop(){
				 		num++;
				 		if(num>=5){
				 			num=0;
				 		}
	                    kk(num,$(aBtn[num]));
				 	}
		            var timer =   setInterval(lop,3000);
		            $('.box').on({
		            	'mouseover':function(){
				            	clearInterval(timer);
				           },
				         'mouseout':function(){
				         	timer =   setInterval(lop,3000);
				         }
		            })
			 	//右边按钮
			 	$('.btn_right').on('click',function(){
			 		 num--;
			 		if(num<0){
			 			num=4;
			 		} 
                     kk(num,$(aBtn[num]));
			 	})
			 	//page
			 
			 	var aBtn = $('.page').children();
			 	var aLi = $('#ul').children();
			 	aBtn.each(function(index){
			 	     $(this).on('click',function(){
			 	                 num=index;
			 	                 kk(index,$(this))
			 	     })
			 	})
			 	function kk(index,ww){
			 				//获取当前li 的 背景颜色
			 	          var bg_color =strd(aLi[index].getAttribute('style')) ;
			 	        //  console.log(bg_color)
				 	     	 $('#ul').stop().animate({
				 	     	 	'left':-index*300
				 	     	 },600)
				 	     	 if(ww){
				 	     	 		ww.css('background',bg_color);
			 	     	           ww.siblings().css('background','');
				 	     	 }
			 	}
			 	
			 	
			 })
		</script>
	</body>
</html>
标签:
z
给个赞 0 人点赞
收藏 0 人收藏
评论 已有 13 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
Lookforto
Lookforto2017-01-11 10:58:4813F
嗯 //@言不可汨:在第五张的后面克隆第一张图片就没有跳动的感觉了
举报 支持 (0) 回复 (0)
言不可汨
言不可汨2017-01-11 01:51:3712F
在第五张的后面克隆第一张图片就没有跳动的感觉了
举报 支持 (0) 回复 (1)
Lookforto
Lookforto2017-01-10 23:54:2211F
ok //@探花:你这个点击,左右翻啦,哈哈
举报 支持 (0) 回复 (0)
Lookforto
Lookforto2017-01-10 23:53:5510F
嗯呢。我试试 //@gaoxiaosong1113:下面的页面标示可以做成用js生成的,省的每次还得手动改
举报 支持 (0) 回复 (0)
Lookforto
Lookforto2017-01-10 23:53:359F
不是无缝的 //@951216388:从第一个到最后一个切换,怪怪的
举报 支持 (0) 回复 (0)
Lookforto
Lookforto2017-01-10 23:53:188F
构造函数封装是用面向对象写一个吗 //@阿生:建议用构造函数封装一下,不然你在项目中每用一次轮播图就得把这段代码复制一遍。当出现bug,或者功能细节需要调整,这时候如果项目中有5个轮播图,你又要改1处代码,然后复制4遍。。。
举报 支持 (0) 回复 (0)
阿生
阿生2017-01-10 17:07:057F
建议用构造函数封装一下,不然你在项目中每用一次轮播图就得把这段代码复制一遍。当出现bug,或者功能细节需要调整,这时候如果项目中有5个轮播图,你又要改1处代码,然后复制4遍。。。
举报 支持 (0) 回复 (1)
951216388
9512163882017-01-10 16:49:366F
从第一个到最后一个切换,怪怪的
举报 支持 (0) 回复 (1)
gaoxiaosong1113
gaoxiaosong11132017-01-10 16:42:195F
下面的页面标示可以做成用js生成的,省的每次还得手动改
举报 支持 (0) 回复 (1)
lopcomvir
lopcomvir2017-01-10 16:35:414F
左右反了,没毛病
举报 支持 (0) 回复 (0)
天凉好个秋
天凉好个秋2017-01-10 16:33:113F
怎么翻页感觉怪怪的
举报 支持 (0) 回复 (0)
守候你的季节
守候你的季节2017-01-10 16:24:102F
变成无缝滚动
举报 支持 (0) 回复 (0)
探花
探花2017-01-10 16:22:061F
你这个点击,左右翻啦,哈哈
举报 支持 (0) 回复 (1)
Lookforto Lookforto 作者

作者最新