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

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

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

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 77 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

//自动播放
			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";
			}
			
		}

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/969.html
轮播图,完全用JavaScript写的,没用到jQuery很适合js初学者学习 希望对你有帮助,感谢您的支持!
  • js带按钮圆弧展示图片自动轮播切换代码

    js带按钮圆弧展示图片自动轮播切换代码

  • jQuery css3全屏banner轮播切换动画效果

    jQuery css3全屏banner轮播切换动画效果

  • 高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效

    高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效

  • jQuery仿途牛图片轮播样式代码

    jQuery仿途牛图片轮播样式代码

  • 自适应轮播

    自适应轮播

  • 导航加渐变轮播

    导航加渐变轮播

  • jquery图片插件制作图片轮播滚动代码

    jquery图片插件制作图片轮播滚动代码

  • 京东首页轮播以及电梯特效手写js代码

    京东首页轮播以及电梯特效手写js代码

  • 淘宝首页轮播

    淘宝首页轮播

  • jQuery带标题缩略图的百叶窗图片轮播切换效果

    jQuery带标题缩略图的百叶窗图片轮播切换效果

  • jquery全屏无缝轮播图

    jquery全屏无缝轮播图

  • 原生js滑动图片轮播切换效果代码

    原生js滑动图片轮播切换效果代码

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2