复制代码 代码如下

再接下来看看CSS: 复制代码 代码如下:
ul,img,li,a{ border:0; margin:0; padding:0; list-style:none; }
#New_zlMimgMv { border: 1px solid #B8B8B8; height: 192px;
margin-bottom: 12px; width: 446px; } #New_zlMimgMv .imgMvBox,
#New_zlMimgMv .imgMvBox img { height: 160px; width: 446px; }
#New_zlMimgMv .imgMvBox { overflow: hidden; } #New_zlMimgMv
.imgMvNum a { background: #E6E6E6; display: block; float: left; height:
32px; line-height: 32px; text-align: center; text-decoration: none;
width: 120px; color:#282828; } #New_zlMimgMv .imgMvNum a.changeThis {
background: #A29F9F; color: #FFFFFF; } 最终是JQ代码了: 复制代码 代码如下: var
imgLength=$.length;//获取需滚动元素总量 var
imgHeight=$.height(卡塔尔(قطر‎;//获取需滚动成分高度 var
totalHeight=imgLength*imgHeight;//获取需滚动成分总中度 var mvul=$; var
positiontop=0;//定义叁个从头偏移地点0var
linknum=0;//定义多少个用以调节开关切换索引的伊始值 var
mvTimer;//设置一个计时器mvul.parent(卡塔尔国.css({“position”:”relative”}卡塔尔//设置容器的CSS
mvul.css({“position”:”absolute”}卡塔尔(英语:State of Qatar);//同上
$.eq.addClass;//给第四个开关增添样式 function
imgMv//借使不是一张图片的话就实行上面包车型地铁 {
positiontop=positiontop+imgHeight;//没试行一遍有益位置加二次高度if(positiontop==totalHeight卡塔尔(英语:State of Qatar)//假如偏移值等于总中度将偏移值设回0 {
positiontop=0; } linknum++;//运营叁遍,用于调节按键切换的索引加1
if//假诺索引大于或等于滚动成分总参谋长度,将索引设回0 { linknum=0; }
mvul.animate({top:-},400卡塔尔(قطر‎;//用animate属性完成滚动,’linknum*imgHeight’方便和开关同步
$.removeClass;//移除样式 $.eq.addClass;//增添样式 } } function
startMv(卡塔尔{ mv提姆er=setInterval;//机械漏刻函数 } startMv(卡塔尔(英语:State of Qatar);//运维放大计时器$.each{//遍历开关 $.mouseover{//鼠标经过按键 clearInterval;//杀绝计时器linknum=$;//鼠标经过按键将linknum设置为前段时间按键索引 $.removeClass;
$.addClass;
mvul.animate({top:-},300卡塔尔;//用animate属性实现滚动,’linknum*imgHeight’方便和按键同步
}卡塔尔.mouseout;//鼠标移出再度实践电火花计时器 }卡塔尔(英语:State of Qatar); }卡塔尔(英语:State of Qatar);
每句都注释清楚了哈。这里只是简短的写了个差不离的发展效果,代码大概也不优化。首纵然给大家仿照效法和提供思路。
大家能够把那个职能封装成插件,再编辑一些任何的动向或效果与利益。
看下效果(那么些文章里面样式没有办法完全放进来,大家能够复制到本身计算机)

  • 图片 1
  • 图片 2
  • 图片 3

第一照旧要援引jquery框架的。 然后初叶HTML代码: 复制代码 代码如下:

正式问答平台 啊是发达庵圣坊可是分别就
同城阿萨德业动

相关文章