原生js焦点轮播图

四月鸟凉
四月鸟凉 发布于 2017-01-03 21:15:37 浏览:2461 类型:原创 - 教程 分类:JavaScript - javascript 二维码: 作者原创 版权保护
原生js焦点轮播图主要注意这几点:
1、前后按钮实现切换,同时注意辅助图
2、中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index
3、间隔调用与无限轮播。
4、注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行
5、另外在切换图片的时候,底部的Button动画效果,是从底部开始往上升的,要用到transform:scale()和transform-origin:0 100%两个转换属性,代码如下
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewpoint" content="width=device-width,initial-scale=1,user-scalable="no">
		<title>20170101</title>
		<style type="text/css">
		a{text-decoration:none;color:#3DBBF5;}
		.wrapper{width:750px;height:350px;background:#001032;margin:20px auto;text-align:center;box-shadow:0 0 12px 2px hsla(0,20%,30%,0.5);padding:10px 15px;position:relative;}
		.effect{position:relative;cursor:pointer;}
		.effect:hover{color:#02a0e9;}
		.effect:before{width:100%;display:inline-block !important;position:absolute;height:1px;background:#02a0e9;transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transform:scale(0,1);content:'';bottom:-5px;left:0;}
		.effect:hover:before{transform:scale(1);-webkit-transform:scale(1);}
		#lunBo{margin-top:20px;overflow:hidden;height:300px;width:750px;position:relative;}
		#list{position:absolute;z-index:22;height:300px;width:5250px;}
		#list img{float:left;}
		#buttons { position: absolute; height: 20px; width: 150px; z-index: 99; bottom: 20px; left: 40%;}
        span { cursor: pointer; float: left;  width: 10px; height: 5px; background: #333; margin-right: 10px;}
         .on {  background: yellow;transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transform:scale(1,4);-ms-transform:scale(1,4);-moz-transform:scale(1,4);-webkit-transform:scale(1,4);transform-origin:0% 0%;-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;}
		 .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 100px;  line-height:100px;position: absolute; z-index: 92; top: 30%; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #lunBo:hover .arrow { display: block;}
        #prev { left: 0px;}
        #next { right: 0px;}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<a class="effect" href="#">2016完了,2017来了</a>
			<div id="lunBo">
				<div id="list" style="left:-750px;">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg" alt=""/>
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.jpg" alt=""/>
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856m1bhxxx1d8jfnblb.jpg" alt=""/>
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856z48mfrrr8u064rf6.jpg" alt=""/>
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856e95yze236lvq7y2a.jpg" alt=""/>
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg" alt=""/>
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.jpg" alt=""/>
				</div>
				<div id="buttons">
					<span index="1" class="on"></span>
					<span index="2"></span>
					<span index="3"></span>
					<span index="4"></span>
					<span index="5"></span>
				</div>
				<a href="javascript:;" id="prev" class="arrow">&lt;</a>
				<a href="javascript:;" id="next" class="arrow">&gt;</a>
			</div>
		</div>
	
	<script>
		window.onload = function(){
			var lunBo = document.getElementById('lunBo');
			var list = document.getElementById('list');
			var buttons = document.getElementById('buttons').getElementsByTagName('span');
			//console.log(buttons);
			var prev = document.getElementById('prev');
            var next = document.getElementById('next');
			var index = 1;
			var animated = false;
			var interval = 3000;
			var timer;
			//显示按钮的索引
			function showButton(){
				for(var i = 0 ; i < buttons.length ; i++){
					if( buttons[i].className == 'on' ){
						buttons[i].className = '';
						break;
					};
				};
				buttons[index - 1].className='on';
			};
			function play(){
				timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
			};
			function stop(){
				clearTimeout(timer);
			};
			//向前按钮
			 next.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 5) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-750);
                showButton();
            };
            prev.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(750);
                showButton();
            };
			//parseInt()转换为纯数值
			function animate(offset){
			animated = true;
			var newLeft = parseInt(list.style.left) + offset;  //目标值
			var time = 300; //位移总时间为300
			var interval = 10; //
			var speed = offset/(Math.floor(time/interval)); //每次位移量
			function go(){
				if( (speed < 0 && parseInt(list.style.left) > newLeft) || ( speed > 0 && parseInt(list.style.left) < newLeft) ){
					list.style.left = parseInt(list.style.left) + speed + 'px';
				    setTimeout(go,interval);
				}else{
					animated = false;
					list.style.left = newLeft+ 'px';    //现在的位移
					if( newLeft > -750){                     //假的辅助图
						list.style.left = -3750 + 'px';
						}
					if( newLeft < -3750){
						list.style.left = -750 + 'px';
						}
				}
			};
			go();			
			};
			//小按钮
			for(var i=0;i < buttons.length;i++){
				buttons[i].onclick = function(){
		
				if(this.className == 'on'){
					return;
				};
					var myIndex = parseInt(this.getAttribute('index'));
					var offset = -750 * (myIndex - index);
					
					animate(offset);
                    index = myIndex;
                    showButton();
				}
			}
			lunBo.onmouseout = play;
			lunBo.onmouseover = stop;
			play();
	}
	</script>
	
	</body>
</html>
原生js焦点轮播图
原生js焦点轮播图
原生js焦点轮播图
原生js焦点轮播图
原生js焦点轮播图
原生js焦点轮播图
原生js焦点轮播图
z
给个赞 31 人点赞
收藏 77 人收藏
评论 已有 13 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
fantasy525
fantasy5252017-01-03 21:42:522F
提个小建议,你可以尝试做个能连续点击的版本,就是如果图片正在滚动时点击了一下仍然可以运动,就相当于连击了,就是点一下走一张,连着点击两下就走两张,就像前端网首页那样。
举报 支持 (3) 回复 (1)
Mr豆花
Mr豆花2017-01-06 09:59:0011F
哥们,有两个bug。第一个是设置的time与interval不能整除(比如说time=303,interval=10)的话,每次动画发生时你注意看图片最右边,会有一个跳回去的效果;第二个就是把这些删掉var list = document.getElementById('list');var prev = document.getElementById('prev'); var next = document.getElementById('next');   直接使用id而不获取也可以。
举报 支持 (1) 回复 (1)
楚天阔
楚天阔2017-01-23 13:10:1813F
某课网的例子
举报 支持 (1) 回复 (0)
最新评论
楚天阔
楚天阔2017-01-23 13:10:1813F
某课网的例子
举报 支持 (1) 回复 (0)
四月鸟凉
四月鸟凉2017-01-06 10:46:3912F
感谢建议,我来优化优化 //@Mr豆花:哥们,有两个bug。第一个是设置的time与interval不能整除(比如说time=303,interval=10)的话,每次动画发生时你注意看图片最右边,会有一个跳回去的效果;第二个就是把这些删掉var list = document.getElementById('list');var prev = document.getElementById('prev'); var next = document.getElementById('next');   直接使用id而不获取也可以。
举报 支持 (0) 回复 (0)
Mr豆花
Mr豆花2017-01-06 09:59:0011F
哥们,有两个bug。第一个是设置的time与interval不能整除(比如说time=303,interval=10)的话,每次动画发生时你注意看图片最右边,会有一个跳回去的效果;第二个就是把这些删掉var list = document.getElementById('list');var prev = document.getElementById('prev'); var next = document.getElementById('next');   直接使用id而不获取也可以。
举报 支持 (1) 回复 (1)
四月鸟凉
四月鸟凉2017-01-04 21:20:1710F
现在可以了,主要是前面图片的宽度不一样的话就会出现这种问题,谢谢你的提醒emoticon //@四月鸟凉:第四张图片的宽度跟之前的不一样,我改成一样就好了 //@奔波儿霸:为什么从第二张图片开始右边就会出现下一张图片的一部分?
举报 支持 (0) 回复 (0)
四月鸟凉
四月鸟凉2017-01-04 21:09:109F
第四张图片的宽度跟之前的不一样,我改成一样就好了 //@奔波儿霸:为什么从第二张图片开始右边就会出现下一张图片的一部分?
举报 支持 (0) 回复 (1)
奔波儿霸
奔波儿霸2017-01-04 20:16:528F
为什么从第二张图片开始右边就会出现下一张图片的一部分?
举报 支持 (0) 回复 (1)
fantasy525
fantasy5252017-01-04 20:13:257F
噢 那你说这个鼠标焦点跟我评论的内容貌似没什么关联啊 //@梅开二度:比如 onmouseover //@fantasy525:什么是鼠标焦点? //@梅开二度:前端网首页的banner的pagination不是鼠标焦点吗.... //@fantasy525:提个小建议,你可以尝试做个能连续点击的版本,就是如果图片正在滚动时点击了一下仍然可以运动,就相当于连击了,就是点一下走一张,连着点击两下就走两张,就像前端网首页那样。
举报 支持 (0) 回复 (0)
前端的路上有我
前端的路上有我2017-01-04 16:22:326F
emoticon
举报 支持 (0) 回复 (0)
梅开二度
梅开二度2017-01-04 16:20:165F
比如 onmouseover //@fantasy525:什么是鼠标焦点? //@梅开二度:前端网首页的banner的pagination不是鼠标焦点吗.... //@fantasy525:提个小建议,你可以尝试做个能连续点击的版本,就是如果图片正在滚动时点击了一下仍然可以运动,就相当于连击了,就是点一下走一张,连着点击两下就走两张,就像前端网首页那样。
举报 支持 (0) 回复 (1)
fantasy525
fantasy5252017-01-04 14:54:394F
什么是鼠标焦点? //@梅开二度:前端网首页的banner的pagination不是鼠标焦点吗.... //@fantasy525:提个小建议,你可以尝试做个能连续点击的版本,就是如果图片正在滚动时点击了一下仍然可以运动,就相当于连击了,就是点一下走一张,连着点击两下就走两张,就像前端网首页那样。
举报 支持 (0) 回复 (1)
梅开二度
梅开二度2017-01-04 10:47:553F
前端网首页的banner的pagination不是鼠标焦点吗.... //@fantasy525:提个小建议,你可以尝试做个能连续点击的版本,就是如果图片正在滚动时点击了一下仍然可以运动,就相当于连击了,就是点一下走一张,连着点击两下就走两张,就像前端网首页那样。
举报 支持 (0) 回复 (1)
fantasy525
fantasy5252017-01-03 21:42:522F
提个小建议,你可以尝试做个能连续点击的版本,就是如果图片正在滚动时点击了一下仍然可以运动,就相当于连击了,就是点一下走一张,连着点击两下就走两张,就像前端网首页那样。
举报 支持 (3) 回复 (1)
fantasy525
fantasy5252017-01-03 21:38:061F
不错,希望不要删除笔记,先收藏了
举报 支持 (0) 回复 (0)
四月鸟凉 四月鸟凉 作者

作者最新