鱼C论坛

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

想问下谁有轮播图的代码

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

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

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

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

使用道具 举报

发表于 2016-7-13 22:50:41 | 显示全部楼层
html:
<div id="box">
                <ul>
                        <li class="color1 active"></li>
                        <li class="color2"></li>
                        <li class="color3"></li>
                        <li class="color4"></li>
                </ul>
        </div>
css:
*{
                        padding:0;
                        margin:0;
                }
                #box{
                        width: 800px;
                        height: 400px;
                        margin: 100px auto;
                }
                ul,li{
                        width: 100%;
                        height: 100%;
                }
                li{
                        list-style: none;
                        display: none;
                }
                .color1{
                        background: #F00;
                }
                .color2{
                        background: #FF0;
                }
                .color3{
                        background: #0F0;
                }

                .color4{
                        background: #DDD;
                }
                #box li.active{
                        display: block;
                }
js:
<script type="text/javascript">
                var $li = $("#box ul li");
                var timer = null;
                
                console.log($li);
                function autoPlay(){
                        var index_ = 0;
                        timer = setInterval(function(){
                                $li.eq(index_).addClass('active').siblings('li').removeClass('active');

                                index_ ++;

                                if (index_ >= $li.length) {
                                        index_ = 0;
                                }
                                console.log(index_);
                        },2000);
                }
                autoPlay();
                
        </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-12-23 22:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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