快捷导航
查看: 10390|回复: 21

[分享] 自适应屏幕轮播图

[复制链接]
发表于 2013-12-1 17:46:27 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2016-12-19 15:14 编辑

写了一个简单的全屏轮播,共享下。欢迎指出不足。
移动端特效可以参阅移动端特效版块。
pc端特效可以参阅特效下载版块。
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>自适应屏幕宽度轮播图</title>
  6. <style>
  7. *{margin: 0;padding: 0;}
  8. ul,ol,li{list-style: none;}
  9. #slide{min-width:1000px;height: 396px;position: relative;overflow: hidden;}
  10. #slide ul{position: absolute;left: 0;}
  11. #slide ul li{float: left;}
  12. #slide ul li img{position: relative;left: 0;}

  13. #slide ol{width:100%;position: absolute;bottom: 0;text-align: center;}
  14. #slide ol li{width: 11px;height: 11px;background: #666;display: inline-block;font-size: 0;-webkit-border-radius: 10px;
  15. -moz-border-radius: 10px;
  16. border-radius: 10px;}
  17. #slide ol li.selected{background: #F60;}
  18. #slide ol li a{height: 11px;display: block;}
  19. </style>
  20. <script src="move.js"></script>
  21. <script>
  22. window.onload=function (){
  23.     var oSlide=document.getElementById("slide");
  24.     var oUl=oSlide.getElementsByTagName("ul")[0];
  25.     var aLi=oUl.getElementsByTagName("li");
  26.     var aImg=oUl.getElementsByTagName("img"); //获取图片

  27.     var oOl=oSlide.getElementsByTagName("ol")[0];
  28.     var aLiOl=oOl.getElementsByTagName("li"); //获取按钮

  29.     var imgWidth=1920;

  30.     var iNow=0;

  31.     oUl.style.width=aImg.length * imgWidth + "px";

  32.     //让图片居中
  33.     function toResize(){
  34.         var viewWidth=document.documentElement.clientWidth;

  35.         if(viewWidth>1000){
  36.             for(var i=0;i<aImg.length;i++){
  37.                 aImg[i].style.left = -(imgWidth - viewWidth)/2 + "px";
  38.             }
  39.         }
  40.     }

  41.     toResize();
  42.    
  43.     window.onresize=function (){
  44.         toResize();   
  45.     }

  46.     // 轮播开始
  47.     for(var i=0;i<aLiOl.length;i++){
  48.         aLiOl[i].index=i;
  49.         aLiOl[i].onmouseover=function (){
  50.             for(var i=0;i<aLiOl.length;i++){
  51.                 aLiOl[i].className="";
  52.             }
  53.             this.className="selected";
  54.             startMove(oUl,{left:-this.index * imgWidth});
  55.         }
  56.     }

  57.     setInterval(function toRun(){
  58.         if(iNow==aLi.length-1){
  59.             iNow=0;
  60.         }else{
  61.             iNow++;   
  62.         }

  63.         for(var i=0;i<aLiOl.length;i++){
  64.             aLiOl[i].className="";
  65.         }

  66.         aLiOl[iNow].className="selected";
  67.         startMove(oUl,{left:-iNow * imgWidth});

  68.     },3000);
  69. };
  70. </script>
  71. </head>
  72. <body>
  73. <div id="slide">
  74.     <ul>
  75.         <li><img src="http://www.huawei.com/cn/ucmf/groups/public/documents/multimedia/hw_315540.jpg"></li>
  76.         <li><img src="http://www.huawei.com/cn/ucmf/groups/public/documents/multimedia/hw_310489.jpg"></li>
  77.         <li><img src="http://www.huawei.com/cn/ucmf/groups/public/documents/multimedia/hw_315363.jpg"></li>
  78.     </ul>
  79.     <ol>
  80.         <li class="selected"><a href="javascript:;">1</a></li>
  81.         <li><a href="javascript:;">2</a></li>
  82.         <li><a href="javascript:;">3</a></li>
  83.     </ol>
  84. </div>
  85. </body>
  86. </html>
复制代码



1.jpg

自适应屏幕宽度轮播图.zip

2.04 KB, 下载次数: 362

评分

参与人数 2金钱 +3 收起 理由
老鸟很菜 + 1 赞一个!
党国还在 + 2 我觉得这个很好

查看全部评分

发表于 2016-5-18 23:28:38 | 显示全部楼层
更多移动端特效,建议查看
移动端特效下载板块。
发表于 2013-12-2 09:55:48 | 显示全部楼层
这是你自己写的吗
好厉害啊!!
发表于 2013-12-2 10:03:35 | 显示全部楼层
这个很有用
能够屏幕自适应的这种代码不多
发表于 2013-12-2 11:15:39 | 显示全部楼层
不错,有收藏价值!
发表于 2013-12-9 16:46:45 | 显示全部楼层
好,这个支持一下!
 楼主| 发表于 2013-12-10 10:31:03 | 显示全部楼层
小屁孩 发表于 2013-12-2 09:55
这是你自己写的吗
好厉害啊!!

自己写的。没测试兼容性
发表于 2013-12-13 09:47:47 | 显示全部楼层
银狐 发表于 2013-12-10 10:31
自己写的。没测试兼容性

能写出来已经很厉害了
发表于 2014-10-16 17:31:45 | 显示全部楼层
银狐v5 刚好需要这个。。
发表于 2014-10-16 19:37:06 | 显示全部楼层
定格 发表于 2014-10-16 17:31
银狐v5 刚好需要这个。。

相貌堂堂啊,清秀的孩子!
发表于 2014-10-16 23:07:49 | 显示全部楼层
这也能写出来,太牛逼了。
发表于 2014-10-16 23:10:58 | 显示全部楼层
大神,做个插件出来我们直接用吧。
 楼主| 发表于 2014-10-21 22:08:58 | 显示全部楼层
zeng_chong2003 发表于 2014-10-16 23:10
大神,做个插件出来我们直接用吧。

等我技术成熟了。会做的。目前还是菜逼……
发表于 2015-9-29 15:17:06 | 显示全部楼层
当我再添加一个图片的时候     IE不兼容了。
发表于 2015-9-29 15:58:50 来自手机 | 显示全部楼层
cym169 发表于 2015-9-29 15:17
当我再添加一个图片的时候     IE不兼容了。

低版本的可以无视了
发表于 2016-4-12 10:32:26 来自手机 | 显示全部楼层
发表于 2016-9-8 10:40:15 | 显示全部楼层
你好,为什么我复制了你的代码,下载好move.js框架,轮播图的图片不动呢?
发表于 2016-9-8 10:44:38 | 显示全部楼层
Daisy 发表于 2016-9-8 10:40
你好,为什么我复制了你的代码,下载好move.js框架,轮播图的图片不动呢?

建议到http://www.softwhy.com/mobiletexiao/
上面这个版块查找需要的内容
发表于 2016-9-13 11:20:22 | 显示全部楼层
为什么打开你的代码,图片不会轮播呢?哪里出了什么问题?
发表于 2016-9-13 11:30:17 | 显示全部楼层
本帖最后由 antzone 于 2016-9-15 11:07 编辑
小小彩笔 发表于 2016-9-13 11:20
为什么打开你的代码,图片不会轮播呢?哪里出了什么问题?

建议在下面两个板块查找相应的内容
http://www.softwhy.com/mobiletexiao/移动端特效
http://www.softwhy.com/codedown/pc端特效
 楼主| 发表于 2016-12-20 13:51:57 | 显示全部楼层
Daisy 发表于 2016-9-8 10:40
你好,为什么我复制了你的代码,下载好move.js框架,轮播图的图片不动呢?

看看哪里报错了
 楼主| 发表于 2016-12-20 13:52:18 | 显示全部楼层
小小彩笔 发表于 2016-9-13 11:20
为什么打开你的代码,图片不会轮播呢?哪里出了什么问题?

看看有没有哪里报错了

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-2-26 00:22 , Processed in 0.101784 second(s), 23 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表