机械东莞网站建设0769,客户管理系统排行榜,网页设计期末作品源代码,wordpress用户名密码注册一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用#xff0c;现成的插件1是省时间#xff0c;拿来改改尺寸改改参数就能直接用#xff0c;2是现在的插件确实很强大#xff0c;对于我一个刚刚学习前端的人来说#xff0c;牛人写的轮播我看懂也要花些功夫#xff0… 一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用现成的插件1是省时间拿来改改尺寸改改参数就能直接用2是现在的插件确实很强大对于我一个刚刚学习前端的人来说牛人写的轮播我看懂也要花些功夫更别说在工作中写出来估计写出来以后整个项目都要因我延时了... 我做过的项目也不多开始用的最多的就是bootstrap里面的轮播具备最基础的功能很适合我刚开始做项目用最近我无意发现了一个更好用的轮播件Swiper这个插件在手机上有点意思他可以实现手指触摸拖拽还可以双指进行缩放挺好用的官网有中文的上手挺容易的你们还有什么好用的插件可以私信我^-^. 好了说正事 接触前端的应该都知道 轮播可以说刚开始学就必须应该 会的不会那就太没面子了面试问过我 我胸有成竹的叙述其实我心 里想着他要真让我拿出电脑写一个我还真的会蒙 今天下午有时间 我凭着用过这么多次的映像自己动手写了一个真的是 最最最最基础的轮播。 我开始想写那种无缝的轮播我是这么写的 div idslider ul classmain liimg srcimg/banner1.jpg/li liimg srcimg/banner2.jpg/li liimg srcimg/banner3.jpg/li /ul ul classindex li1/li li2/li li3/li /ul/div 外层slider{width:500px;height:400px;position:relative;overflowhidden} .main{ float:left;width:1500px;position:absolute;left:0;top:0;transition:all linear .5s} //一张图片宽500px; .mianli{ floatleft} 像这样 然后改变.main的left就可以了我开始是这么想的也这么做了轮也能轮了但是轮播图上index怎么弄点击它还要跳到对应的图片上想了好久 我放弃了(日后我会解决得) 还有一种轮播可能你已经想到了 那种改变图片透明度的轮播我当时想这个好写啊同样能实现作用于是....上码 主要css .mainli{ position: absolute; top:0; left: 0; opacity: 0; transition: all linear .5s;}//三张叠放在一起 .main .active{ opacity: 1;} .index .active{ width:12px; height:12px; border-radius: 12px; background-color: red; } script var i 1; $(.mainli:nth-child(i)).addClass(active).siblings(.active).removeClass(active);//img $(.indexli:nth-child(i)).addClass(active).siblings(.active).removeClass(active);//index var timer setInterval(function () { animate(); },1000);// 放在对应序号上,切换对应图片 $(.indexli).on(mouseenter,function(){ var index $(this).html(); $(.mainli:nth-child(index)) .addClass(active).siblings(.active) .removeClass(active);//img $(.indexli:nth-child(index)) .addClass(active).siblings(.active) .removeClass(active);//index });// 鼠标进入停止出来启动 $(#slider).hover( function(){clearInterval(timer);}, function(){ timer setInterval( function(){ animate() },1000);} );// 主体函数 function animate(){ i; $(.mainli:nth-child(i)) .addClass(active).siblings(.active) .removeClass(active);//img $(.indexli:nth-child(i)) .addClass(active).siblings(.active) .removeClass(active);//index if(i3){i0} };/script 就这段复用性贼差处理效率贼低的代码我写了半天 虽然效率低但还好的是我下次说我会的时候会比之 前更有底气 ? 微信公众号web小小白 转载于:https://www.cnblogs.com/yzb23/p/6479738.html
