卡盘（更新版）

最新推荐文章于 2023-09-24 16:32:03 发布

nelson

最新推荐文章于 2023-09-24 16:32:03 发布

阅读量573

点赞数

分类专栏： CSS HTML Javascript 文章标签： function stylesheet timer border button swing

本文链接：https://blog.csdn.net/Do_it__/article/details/6384178

版权

Javascript 同时被 3 个专栏收录

57 篇文章 0 订阅

订阅专栏

CSS

35 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

想了想还是重新写过卡盘的实现吧，当然，还是去实现那种一直向上滚的模式，因为我觉得这种方式在交互上，更重要的是用户体验上更人性化。

然后根据我之前写的卡盘，做了两种写法，（当然，这回我使用的是jquery）大致如下：

<!doctype html> <html> <head> <meta charset="gbk"> <title>First Grid Demo</title> <mce:style></mce:style><style mce_bogus="1">body,button,input,select,textarea{ font:12px/1.5 Verdana,Tahoma,Arial,/5b8b/4f53;/*后面是宋体的编码*/ } ul{ margin:0; padding: 0; } li{ list-style: none; } #demo{ position: relative; height: 102px; width: 200px; border: 1px solid #F00; margin-top: 300px; } #demo ul{ position: absolute; top: 0; left: 0; } #demo ul li{ height: 100px; border: 1px solid #DDD; overflow: hidden; }</style> </head> <body> <div id="demo"> <ul> <li> <a href="#" mce_href="#"> <img border="0" src="img/1.jpg" mce_src="img/1.jpg" /> </a> </li> <li> <a href="#" mce_href="#"> <img border="0" src="img/2.jpg" mce_src="img/2.jpg" /> </a> </li> <li> <a href="#" mce_href="#"> <img border="0" src="img/3.jpg" mce_src="img/3.jpg" /> </a> </li> </ul> </div> <mce:script src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> </body> </html>

第一种方式是在最后一个li下面加克隆第一个li去实现的；

第二种方式是通过对第一个li进行判断，当到达卡盘滚动到最后一个节点时，把它定位到最后一个li的后面。然后再次滚动时，它就刚好是一直朝上滚动的，滚动完后，马上定位ul到第二个位置，当然此时的li删除定位，让它保持原来的状态。这样就实现了一直向上滚做法了。

然而事情总是看起来简单，当它再像淘宝卡盘那样多加1，2，3这样的边栏，让你知道具体滚到哪个地方时，事情就变得复杂了。

我这里采用了第二种方式去实现了，而且采用的是向左滚动：

HTML代码是这样的：

<div id="J_Slide" class="slide"> <ul> <li><a href="#" mce_href="#"><img width="950" height="400" src="<?php bloginfo('stylesheet_directory'); ?>/images/image1.png" /></a></li> <li><a href="#" mce_href="#"><img width="950" height="400" src="<?php bloginfo('stylesheet_directory'); ?>/images/image2.png" /></a></li> <li><a href="#" mce_href="#"><img width="950" height="400" src="<?php bloginfo('stylesheet_directory'); ?>/images/image3.png" /></a></li> </ul> <ol> <li class="curr">1</li> <li>2</li> <li>3</li> </ol> </div>

对应的CSS代码：

ul, ol{ margin:0; padding: 0; } li{ list-style: none; } .slide{ position: relative; width: 950px; height: 400px; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .slide ul, .slide ol{ position: absolute; white-space: nowrap; } .slide ul{ /*width: 2850px;*/ width: 3800px; } .slide li{ float: left; width: 950px; height: 400px; } .slide ol{ text-align: center; bottom: 10px; left: 439px; } .slide ol li{ width: 14px; height: 14px; margin-right: 10px; overflow: hidden; line-height: 60px; background: transparent url("images/point.png") no-repeat 0 0; } .slide ol li:hover{ background-position: 0 -14px; } .slide ol li.curr{ background-position: 0 -28px; }

对应的脚本是：

$(function(){Slide.init('#J_Slide');}) /** * for drive the animate effects of slide * @param <string|jQuery>id * @return <function>init ; for running the slide */ var Slider = function(){ function run(id){ var ul = $('ul', id), // first list for show ol = $('ol', id), // fllow ul, show the position where you stand in now uLi = $('li', ul), // first list chidren oLi = $('li', ol), // ol children uLen = uLi.length, // the amount of the ul chidren uWidth = uLi.width(), firstLi = uLi.eq(0), // first child of ul INTERVAL = 10000, // interval RUNTIME = 500, // time for animate timer = setInterval(function(){}, INTERVAL), // slide to show i = 1; //firstLi.clone().appendTo(ul); if (uLen < 1) return; firstLi.css('position', 'relative'); var currLi = function(){ var isCurrLi = oLi.is('.curr'); return isCurrLi.length ? isCurrLi.eq(0) : oLi.eq(0); }(); /* whether curr is exist */ if (!currLi.hasClass('curr')) { currLi.addClass('curr'); } /** * binding ul and ol events */ oLi.each(function(poz){ $(this).click(function(){ var self = $(this); if (!self.hasClass('curr')) { self.addClass('curr'); currLi.removeClass('curr'); currLi = self; } i = poz + 1; ul.stop(); clearInterval(timer); ul.animate({ 'left': -poz * uWidth + 'px' }, 400); }); }); uLi.each(function(){ $(this).hover(function(){ clearInterval(timer); }, function(){ timer = setInterval(doit, INTERVAL); }) }); /** * do what the silde do, always towards left */ function doit(){ var left = i * uWidth; if (i == uLen) { firstLi.css('left', left + 'px'); i = 0; } ul.animate({ 'left': -left + 'px' }, RUNTIME, 'swing', function(){ if(i==1){ ul.css('left', 0); firstLi.css('left', ''); } }); currLi.removeClass('curr'); currLi = oLi.eq(i); currLi.addClass('curr'); ++i; } timer = setInterval(doit, INTERVAL); } return { init: function(id){ if (!id) return; run($(id).eq(0)); } } }()

上面我展示的是通过点击去达到回归所要看的目标的。当然，如果你需要用hover的话，那么就把click里的东西移到hover下。而且接口也不够开放，没有给出设定的时间，不过这个可以自行改动，问题不大。；)

主要是这里不能够运行js，不然的话，还可以做一个demo。我想以后还是自己建一个blog吧。

nelson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
卡盘（更新版）

想了想还是重新写过卡盘的实现吧，当然，还是去实现那种一直向上滚的模式，因为我觉得这种方式在交互上，更重要的是用户体验上更人性化。然后根据我之前写的卡盘，做了两种写法，（当然，这回我使用的是jquery）大致如下：First Grid Demo
复制链接

扫一扫