利用JS实现一个轮播图功能 - 行业资讯 - 肥雀云

　　介绍

这篇文章运用简单易懂的例子给大家介绍利用JS实现一个轮播图功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<>强效果展示

1。页面截图

2。相关效果

<强> html页面

从微信读书上找了几张书籍封面来做轮播的图片。

索引。html

& lt; body> 　　& lt; div id=癱ontainer"祝辞　　& lt; div类=癰ig_pic_div"祝辞　　& lt; div类=皃rev"祝辞& lt;/div> 　　& lt; div类=皀ext"祝辞& lt;/div> 　　& lt; a href=癹avascript:“rel=巴獠縩ofollow"rel=巴獠縩ofollow"类=癿ark_left"祝辞& lt;/a> 　　& lt; a href=癹avascript:“rel=巴獠縩ofollow"rel=巴獠縩ofollow"类=癿ark_right"祝辞& lt;/a> 　　　　& lt; div类=癰ig_pic"祝辞& lt; img src=癷mg/1. jpg"alt=啊白４? lt;/div> 　　& lt; div类=癰ig_pic"祝辞& lt; img src=癷mg/2. jpg"alt=啊白４? lt;/div> 　　& lt; div类=癰ig_pic"祝辞& lt; img src=癷mg/3. jpg"alt=啊白４? lt;/div> 　　& lt; div类=癰ig_pic"祝辞& lt; img src=癷mg/4. jpg"alt=啊白４? lt;/div> 　　& lt; div类=癰ig_pic"祝辞& lt; img src=癷mg/5. jpg"alt=啊白４? lt;/div> 　　& lt; div类=癰ig_pic"祝辞& lt; img src=癷mg/6. jpg"alt=啊白４? lt;/div> 　　& lt;/div> 　　　　& lt; div类=皊mall_pic_div"祝辞　　& lt; div类=皊mall_pic"祝辞& lt; img src=癷mg/1. jpg"alt=啊白４? lt;/div> 　　& lt; div类=皊mall_pic"祝辞& lt; img src=癷mg/2. jpg"alt=啊白４? lt;/div> 　　& lt; div类=皊mall_pic"祝辞& lt; img src=癷mg/3. jpg"alt=啊白４? lt;/div> 　　& lt; div类=皊mall_pic"祝辞& lt; img src=癷mg/4. jpg"alt=啊白４? lt;/div> 　　& lt; div类=皊mall_pic"祝辞& lt; img src=癷mg/5. jpg"alt=啊白４? lt;/div> 　　& lt; div类=皊mall_pic"祝辞& lt; img src=癷mg/6. jpg"alt=啊白４? lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/body>

<强> css样式

网格布局的差距不兼容即惹不起。

风格。css

身体{
　　保证金:0;
　　填充:0;
　　背景:天蓝色;
　　}
　　
　　#{容器
　　位置:相对;
　　溢出:隐藏;
　　宽度:350 px;
　　身高:390 px;
　　保证金:50 px汽车0;
　　填充:15 0 px;
　　背景:秋麒麟草属植物;
　　不必:2 px 1 px 5 px 1 px # 666;
　　}
　　
　　.mark_left {
　　位置:绝对的;
　　左:0;
　　z - index: 3000;
　　宽度:65 px;
　　身高:360 px;
　　}
　　
　　.mark_right {
　　位置:绝对的;
　　右:0;
　　z - index: 3000;
　　宽度:65 px;
　　身高:360 px;
　　}
　　
　　.prev {
　　位置:绝对的;
　　前:150像素;
　　左:5 px;
　　z - index: 3001;
　　宽度:60 px;
　　高度:60 px;
　　背景:url (img/btn.gif) olivedrab;/*变换:translateY (50%);*//*α兼容IE8及以下的IE浏览器*/过滤器:α(不透明度=0);
　　透明度:0;
　　}
　　
　　第二{
　　位置:绝对的;
　　前:120像素;
　　右:5 px;
　　z - index: 3001;
　　宽度:60 px;
　　高度:60 px;
　　背景:url (img/btn.gif) olivedrab;
　　background-position-y: 60 px;
　　变换:translateY (50%);
　　过滤器:α(不透明度=0);
　　透明度:0;
　　}
　　
　　.big_pic_div {
　　位置:相对;
　　宽度:250 px;
　　身高:360 px;
　　填充:15 px 0;
　　}
　　
　　.big_pic {
　　位置:绝对的;/*高度从0到360 px下滑*/溢出:隐藏;
　　身高:360 px;
　　不必:1 px 1 px 2 px # 777;
　　}
　　
　　.small_pic_div {
　　显示:网格;
　　网格模板:重复(110 px)/80 px;
　　差距:15 px;
　　位置:绝对的;
　　上图:0;
　　左:273 px;
　　填充:15 px 0;
　　}
　　
　　.small_pic {
　　身高:110 px;
　　过滤器:α(不透明度=60);
　　透明度:0.6;
　　}
　　
　　.small_pic img {
　　宽度:80 px;
　　高度:100%;
　　}

<>强JavaScript实现

多物体运动框架
。js

//获取样式
　　函数getStyle (obj,名字){
　　如果(obj.currentStyle) {//IE……
　　返回obj.currentStyle[名字];
　　其他}{//铬……
　　返回getComputedStyle (obj, false)[名字];
　　}
　　}
　　
　　函数startMove (obj, attr,目标){
　　clearInterval (obj.timer);
　　
　　obj。计时器=setInterval(函数(){
　　var cur=0;//透明度
　　如果(attr==& # 39;透明度# 39;){
　　坏蛋=数学。轮(parseFloat (getStyle (obj & # 39;透明度# 39;))* 100);
　　其他}{
　　坏蛋=方法(getStyle (obj, attr));
　　}//缓冲运动,速度和距离成正比
　　var速度=0;
　　速度=(目标- cur)/6;//1 px是最小的,1.9 px会被当做1 px,得把速度取整,不然并未真正到达目标值目标
　　速度=速度比;0,# 63;Math.ceil(速度):Math.floor(速度);
　　
　　如果(cur==目标){
　　clearInterval (obj.timer);
　　其他}{//透明度没有单位,单独考虑
　　如果(attr==& # 39;透明度# 39;){
　　obj.style。过滤器=& # 39;α(不透明度=& # 39;+ (cur +速度)+ & # 39;)& # 39;;
　　obj.style。不透明度=(cur +速度)/100;
　　其他}{
　　obj。风格(attr]=cur +速度+ & # 39;px # 39;;
　　}
　　}
　　},30);
　　
　　}利用JS实现一个轮播图功能