轮播图求建议

Lookforto
Lookforto 发布于 6 天前 浏览:231 类型:原创 - 随笔 分类: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
Lookforto5 天前13F
嗯 //@言不可汨:在第五张的后面克隆第一张图片就没有跳动的感觉了
举报 支持 (0) 回复 (0)
言不可汨
言不可汨5 天前12F
在第五张的后面克隆第一张图片就没有跳动的感觉了
举报 支持 (0) 回复 (1)
Lookforto
Lookforto6 天前11F
ok //@探花:你这个点击,左右翻啦,哈哈
举报 支持 (0) 回复 (0)
Lookforto
Lookforto6 天前10F
嗯呢。我试试 //@gaoxiaosong1113:下面的页面标示可以做成用js生成的,省的每次还得手动改
举报 支持 (0) 回复 (0)
Lookforto
Lookforto6 天前9F
不是无缝的 //@951216388:从第一个到最后一个切换,怪怪的
举报 支持 (0) 回复 (0)
Lookforto
Lookforto6 天前8F
构造函数封装是用面向对象写一个吗 //@阿生:建议用构造函数封装一下,不然你在项目中每用一次轮播图就得把这段代码复制一遍。当出现bug,或者功能细节需要调整,这时候如果项目中有5个轮播图,你又要改1处代码,然后复制4遍。。。
举报 支持 (0) 回复 (0)
阿生
阿生6 天前7F
建议用构造函数封装一下,不然你在项目中每用一次轮播图就得把这段代码复制一遍。当出现bug,或者功能细节需要调整,这时候如果项目中有5个轮播图,你又要改1处代码,然后复制4遍。。。
举报 支持 (0) 回复 (1)
951216388
9512163886 天前6F
从第一个到最后一个切换,怪怪的
举报 支持 (0) 回复 (1)
gaoxiaosong1113
gaoxiaosong11136 天前5F
下面的页面标示可以做成用js生成的,省的每次还得手动改
举报 支持 (0) 回复 (1)
lopcomvir
lopcomvir6 天前4F
左右反了,没毛病
举报 支持 (0) 回复 (0)
天凉好个秋
天凉好个秋6 天前3F
怎么翻页感觉怪怪的
举报 支持 (0) 回复 (0)
守候你的季节
变成无缝滚动
举报 支持 (0) 回复 (0)
探花
探花6 天前1F
你这个点击,左右翻啦,哈哈
举报 支持 (0) 回复 (1)
Lookforto Lookforto 作者

作者最新