我就没有用图片路径了

作者: 手机mg娱乐场4355检测  发布:2020-01-03

通过改变每个图片的opacity属性:

代码一:

   最简单的轮播广告  body, div, ul, li { margin: ; padding: ; } ul { list-style-type: none; } body { background: #; text-align: center; font: px/px Arial; } #box { position: relative; width: px; height: px; background: #fff; border-radius: px; border: px solid #fff; margin: px auto; } #box .list { position: relative; width: px; height: px; overflow: hidden; border: px solid #ccc; } #box .list li { position: absolute; top: ; left: ; width: px; height: px; opacity: ; transition: opacity .s linear } #box .list li.current { opacity: ; } #box .count { position: absolute; right: ; bottom: px; } #box .count li { color: #fff; float: left; width: px; height: px; cursor: pointer; margin-right: px; overflow: hidden; background: #F; opacity: .; border-radius: px; } #box .count li.current { color: #fff; opacity: .; font-weight: ; background: #f }                     var box=document.getElementById; var uls=document.getElementsByTagName; var imgs=uls[].getElementsByTagName; var btn=uls[].getElementsByTagName; var i=index=; //中间量,统一声明; var play=null; console.log;//获取正确 //图片切换, 淡入淡出效果我是用(transition: opacity .s linear)做的,不纠结、简单 在css里面 function show{ //方法定义的是当传入一个下标时,按钮和图片做出对的反应 for{ btn[i].className=''; //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。 btn[a].className='current'; } for{ //把图片的效果设置和按钮相同 imgs[i].style.opacity=; imgs[a].style.opacity=; } } //切换按钮功能,响应对应图片 for{ btn[i].index=i; //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住 btn[i].onmouseover=function; clearInterval; //这就是最后那句话追加的功能 } } //自动轮播方法 function autoPlay(){ play=setInterval{ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了 index++; index>=imgs.length&&;//可能有优先级问题,所以用了括号,没时间测试了。 show } autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了 //div的鼠标移入移出事件 box.onmouseover=function(){ clearInterval; }; box.onmouseout=function; }; //按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。   

代码二:

首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载.下载的插件要放在目录下.然后在html文档中链接好

第二步,布局好一个DIV,如:

 上一张 下一张   //上面的li要设定为显示,因为是第一张图片.     

由于方便各位网友下载能够清晰明了,我就没有用图片路径了,因为到你们电脑上就看不到了,这里用背景颜色.

第三步,就到了写CSS的时候了.下面的CSS懂基础的人都看得懂.

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的DIV设定属性.#scroll ul{height:180px; list-style:none;}//DIV下的UL属性.#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//DIV下的UL下的LI属性.注意:display:none;因为要将所有的li隐藏了先.当点击的时候在显示出来. .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性.注意一个绝对定位. .subr{position:absolute;bottom:20px; right:40%;width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; }//下一张按钮的属性.注意一个绝对定位..subr:hover{ background:yellow;border-radius:10px;}.subl:hover{ background:yellow;border-radius:10px;}//以上两个hover是鼠标经过的效果.

第四步,就是jquery代码了!也很简单.先将代码看一遍,你就会用了!

/*轮播*/ ${ var i=0; var len=$.length-1; $.click{ if{i=-1;}i++;$.eq.siblings;//到这里分开!上面的是上一张点击的效果代码,下面的是下一张点击的效果代码. $.click{//获取类名的点击事件. if{i=len+1;}i--;$.eq.siblings; /*轮播*/

四步轻松搞定一个简单的轮!

欲了解更多特效源码知识,请关注小编微信公众号哦!

本文由mg4355娱乐手机版发布于手机mg娱乐场4355检测,转载请注明出处:我就没有用图片路径了

关键词:

上一篇:所有事情都归一个小精灵处理
下一篇:没有了