自动轮播图

最新推荐文章于 2022-12-04 09:00:00 发布

八点半的Bruce丶D

最新推荐文章于 2022-12-04 09:00:00 发布

阅读量336

点赞数 1

分类专栏： php

本文链接：https://blog.csdn.net/qq_40884473/article/details/79816464

版权

php 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="<?=base_url().'public/jquery-1.7.2.min.js' ?>"></script>
    <style>
                *
        {
            margin: 0;padding: 0;
        }
                img
        {
            width: 400px; height: 260px;
        }
                li
        {
            list-style: none;
        }
                #box
        {
            border: 3px solid #000; width: 400px; height: 260px; margin-left: 20px; position: relative; overflow: hidden;
        }
                ul
        {
            height: 260px; width: 3000px;position: absolute;
        }
                ul li
        {
            float: left;
        }
                ol li
        {
            float: left;border: 1px solid red; padding: 6px 10px; margin-left: 10px;
        }
                #box ol
        {
            position: absolute; right: 20px;bottom: 20px;;
        }
        .        color_0
        {
            background-color: #fff;
        }
    </style>
</head>
<body>
<form action="<?=base_url().'index.php/Welcome/up_file' ?>" method="post" enctype="multipart/form-data">
上传图片
<input type="file" name="f">
<input type="submit" value="提交">
</form>
<br>
<br>
<div id="box">
<ul>
    <?php foreach($file as $k=>$v){ ?>
    <li><img src="<?=base_url().$v['tmp'] ?>"></li>
    <?php } ?>
</ul>
<ol>
    <?php foreach($file as $k=>$v){ ?>
    <li class="color_<?=$k ?>"><a href="javascript:void(0)"><?=$k+1 ?></a></li>
    <?php } ?>
</ol>
</div>
</body>
<script>
    /*设置一个常量*/
    var time_img='';
    var sum=0;
    /*点击轮播事件处理*/
    $("#box ol li").click(function(){
        var thi=$(this);
        clearInterval(time_img);
        sum=thi.index();
        img(thi);
        time_img=setInterval(img,1500);
    })
    /*页面加载自动轮播*/
    $(function(){
        time_img=setInterval(img,1500);
    })
    /*轮播事件*/
    function img(thi='')
    {
        if(thi=='')
        {
            sum=sum+1;
            if(sum>$('#box ol li').length-1){
                sum=0;
            }
            thi=$("#box ol li").eq(sum);
        }
        thi.addClass('color_0').siblings().removeClass();
        var num=thi.index()*-400;
        $("#box ul").animate({left:num},'slow');
    }
</script>
</html>