最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

轮播图,完全用JavaScript写的,没用到jQuery很适合js初学者学习

来源:http://www.erdangjiade.com/ 沐浴春风 2016-10-15 22:19浏览(1836)

非常适合js初学者学习,每一步都有详细的注释,和易错点

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

轮播图,完全用JavaScript写的,没用到jQuery很适合js初学者学习
分类:图片代码 > 图片轮播 难易:入门级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分
//自动播放
			timer=setInterval(autoPlay,1000);//此处调用autoPlay函数时,()不能带,带就出错
			
			//鼠标悬浮时,停止轮播
			oBanner.onmousemove=function()
			{
				oBtn.style.display=\\\'block\\\';
				clearInterval(timer);
			}
			
			//鼠标离开,继续轮播
			oBanner.onmouseout=function()
			{
				oBtn.style.display=\\\'none\\\';
				timer=setInterval(autoPlay,1000);//此处必须重新设置定时器
			}
			
			//点击左边按钮,上一页
			oPrev.onclick=function()
			{
				index=index-1;
				if(index<0)
				{
					index=aPic.length-1;
				}
				changePic(index);
			}
			
			//点击右边按钮,下一页
			oNext.onclick=function()
			{
				index=index+1;
				if(index==aPic.length)
				{
					index=0;
				}
				changePic(index);
			}
			
			//播放函数
			function autoPlay()
			{
				
				index=index+1;
				if(index==aPic.length)
				{
					index=0;
				}
				changePic(index);
			}
			
			//把数字与图片对应起来
			for(var i=0;i<aList.length;i++)
			{
				aList[i].onmouseover=function()
				{
					clearInterval(timer);
					index=this.innerText-1;
					changePic(index);
				}
			}
			
			//图片、编号切换
			function changePic(curIndex)
			{
				for(var i=0;i<aPic.length;i++)
				{
					aPic[i].style.display=\\\'none\\\';
					aList[i].className=\\\'\\\';
				}
				aPic[curIndex].style.display="block";
				aList[curIndex].className="on";
			}
			
		}
标签: 轮播焦点图
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/969.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    10-22 04:33
    憨憨小叶子
    很详细,通俗易懂
  • 头像 沙发
    09-05 15:48
    tmqcvg70234@chacuo.net
    不错mmmmmmmmmmmmmmmmmmmm
1 2