鱼C论坛

 找回密码
 立即注册
查看: 2998|回复: 7

想问下谁有轮播图的代码

[复制链接]
发表于 2016-7-13 21:57:44 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
想问下谁有轮播图的代码,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2016-7-13 22:50:41 | 显示全部楼层
html:
  1. <div id="box">
  2.                 <ul>
  3.                         <li class="color1 active"></li>
  4.                         <li class="color2"></li>
  5.                         <li class="color3"></li>
  6.                         <li class="color4"></li>
  7.                 </ul>
  8.         </div>
复制代码

css:
  1. *{
  2.                         padding:0;
  3.                         margin:0;
  4.                 }
  5.                 #box{
  6.                         width: 800px;
  7.                         height: 400px;
  8.                         margin: 100px auto;
  9.                 }
  10.                 ul,li{
  11.                         width: 100%;
  12.                         height: 100%;
  13.                 }
  14.                 li{
  15.                         list-style: none;
  16.                         display: none;
  17.                 }
  18.                 .color1{
  19.                         background: #F00;
  20.                 }
  21.                 .color2{
  22.                         background: #FF0;
  23.                 }
  24.                 .color3{
  25.                         background: #0F0;
  26.                 }

  27.                 .color4{
  28.                         background: #DDD;
  29.                 }
  30.                 #box li.active{
  31.                         display: block;
  32.                 }
复制代码

js:
  1. <script type="text/javascript">
  2.                 var $li = $("#box ul li");
  3.                 var timer = null;
  4.                
  5.                 console.log($li);
  6.                 function autoPlay(){
  7.                         var index_ = 0;
  8.                         timer = setInterval(function(){
  9.                                 $li.eq(index_).addClass('active').siblings('li').removeClass('active');

  10.                                 index_ ++;

  11.                                 if (index_ >= $li.length) {
  12.                                         index_ = 0;
  13.                                 }
  14.                                 console.log(index_);
  15.                         },2000);
  16.                 }
  17.                 autoPlay();
  18.                
  19.         </script>
复制代码



这个只是最简单的一种方法,你可以参考一下,不懂的欢迎提问
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-7-14 16:24:23 | 显示全部楼层
多谢啊。<script type="text/javascript">
function autoScroll () {
        var oRoll = document.getElementById('roll');
        var oUl = oRoll.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var timer = null;
        var iSpeed = 2;

        oUl.innerHTML += oUl.innerHTML;
        oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';

        timer = setInterval(init,35);

        oUl.onmouseover = function () {
                clearInterval(timer);
        };

        oUl.onmouseout = function () {
                timer = setInterval(init,35);
        };

        function init () {
                oUl.style.left = oUl.offsetLeft - iSpeed + 'px';
                if (oUl.offsetLeft < -oUl.offsetWidth/2) {
                        oUl.style.left = 0;
                }
        }
}       
autoScroll();
</script>

这一串是啥意思,我在百度上搜是说 上下滚动?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-7-17 11:58:03 | 显示全部楼层

没明白您的那个$函数是什么意思
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-7-18 15:47:02 | 显示全部楼层
肖采 发表于 2016-7-17 11:58
没明白您的那个$函数是什么意思

$()是jQuery
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-7-18 15:50:01 | 显示全部楼层
Python初学 发表于 2016-7-14 16:24
多谢啊。
function autoScroll () {
        var oRoll = document.getElementById('roll');

这一串应该是做无缝滚动的吧,是左右滚动
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-7-22 13:16:35 | 显示全部楼层
各位楼上的鱼友  谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-7-22 13:44:45 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 17:13

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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