简洁实现轮播图效果的实例_

《简洁实现轮播图效果的实例_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、简洁实现轮播图效果的实例_下面我就为大家带来一篇简洁实现轮播图效果的实例。我觉得挺不错的，现在就分享给大家，也给大家做个参考。一、要点：1.页面加载时，图片重合，叠在一起[肯定定位];2.第一张显示，其它隐蔽;3.设置下标,给下标设置颜色让它随图片移动;4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，连续轮播;二、实现代码：html代码:!DOCTYPEhtmlhtmlxmlns="l"headmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/title轮播图/titlelinkhref

2、="css/LunBimg.css"rel="stylesheet"/scriptsrc="js/jquery-1.10.2.min.js"/scriptscriptsrc="js/LunBimg.js"/script/headbodydivid="allswapImg"divclass="swapImg"imgsrc="image/1.jpg"//divdivclass="swapImg"imgsrc="image/2.jpg"//divdivclass="swapImg"imgsrc="image/3.jpg"//divdivclass="swapImg"img

3、src="image/4.jpg"//divdivclass="swapImg"imgsrc="image/5.jpg"//divdivclass="swapImg"imgsrc="image/6.jpg"//div/divdivclass="btnbtnLeft"/divdivclass="btnbtnRight"/divdivid="tabs"divclass="tabbg"1/divdivclass="tab"2/divdivclass="tab"3/divdivclass="tab"4/divdivclass="tab"5/divdivclass="tab"

4、6/div/div/body/htmlcss代码：*{padding:0px;margin:0px;}.swapImg{position:absolute;}.btn{position:absolute;height:90px;width:60px;background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透亮度为50%*/color:#ffffff;text-align:center;line-height:90px;font-size:40px;top:155px;/*图片高度400/2-45*/cursor:pointer;/*displa

5、y:none;*/}.btnRight{left:840px;/*图片宽度900-导航宽度60*/}#tabs{position:absolute;top:370px;margin-left:350px;}.tab{height:20px;width:20px;background:#05e9e2;line-height:20px;text-align:center;font-size:10px;float:left;color:#ffffff;margin-right:10px;border-radius:100%;cursor:pointer;}.bg{back

6、ground:#00ff21;}js代码：///referencepath="_references.js"/vari=0;//全局变量//定义一个变量用来猎取轮播的过程vartime;$(function(){//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐蔽$(".swapImg").eq(0).show().siblings().hide();showTime();//当鼠标放到下标上显示该图片，鼠标移走连续轮播$(".tab").hover(function(){//猎取到当前鼠标所在的下标的索引i=$(this).

7、index();show();//鼠标放上去之后，怎么停止呢？猎取到变量的过程，清除轮播，把变量传进去clearInterval(time);},function(){showTime();});//要求四，当我点击左右切换$(".btnLeft").click(function(){//1.点击之前要停止轮播clearInterval(time);//点了之后，-1if(i==0){i=6;}i--;show();showTime();});$(".btnRight").click(function(){//1.点击之前要停止轮播clearInterval(t