图片轮播

素颜马尾好姑娘i 2022-04-03 13:28 271阅读 0赞

页面代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link href="css/global.css" rel="stylesheet"/>
        <link href="css/layout.css" rel="stylesheet"/>
        <link href="css/template.css" rel="stylesheet" />
    </head>
    <body>
    <div id="content">
        
        <div class="scroll">
            <ul id="scroll_img">
                <li><img src="images/scroll-01.jpg"/></li>
                <li><img src="images/scroll-02.jpg"/></li>
                <li><img src="images/scroll-03.jpg"/></li>
                <li><img src="images/scroll-04.jpg"/></li>
            </ul>
            <ul id="scroll_number">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
    </body>
    <script  src="js/jquery-1.12.4.js"></script>
    <script>
        //第一个圆形颜色为橙色
        $("#scroll_number li:eq(0)").css("background-color","orange");
        //循环播放广告
        var index = 1;
        var settime = setInterval(function(){
            if(index>3){
                index=0;
            }
            index++;
            $("#scroll_img li").hide();
            $("#scroll_img li:eq("+(index-1)+")").fadeIn("slow");
    
            $("#scroll_number li").css("background-color","#a9a9a9a9");
            $("#scroll_number li:eq("+(index-1)+")").css("background-color","orange");
    
        },1700);
    </script>
    </html>

页面效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70]: /images/20220403/a110f2f113db40cea7a5e2cb080df966.png

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关图片轮播

不管前端技术如何日新月异，有的需求总是不变的，比如图片轮播那么如何实现呢？ biubiu~思路来了！首先，我们理一下需求：界面上每次展示一张图片，间隔一段时间候展

迈不过友情╰/ 2022年09月28日 13:03/ 0 赞/ 201 阅读

相关图片导航轮播

1.建立一个html页面 2.引入jquery.js 3.建立一个tab.js,里边写所需的样式代码实现： tab.html <!DOCTYPE html

Dear 丶/ 2022年08月21日 11:56/ 0 赞/ 146 阅读

相关【MUI】图片轮播

引言 MUI是最接近原生APP体验的高性能前端框架。最近在做的积分系统手机端就是用的MUI，我负责的是主界面的部分，需要显示公司的宣传图片，就类似于去逛街的时候外

末蓝、/ 2022年06月08日 06:15/ 0 赞/ 196 阅读

相关 javascript图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

深碍√TFBOYSˉ_/ 2022年05月12日 02:44/ 0 赞/ 275 阅读

相关 jquery图片轮播

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery轮播</title> <

布满荆棘的人生/ 2022年04月22日 05:32/ 0 赞/ 323 阅读

相关图片轮播

页面代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

素颜马尾好姑娘i/ 2022年04月03日 13:28/ 0 赞/ 272 阅读

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

空话就不多说了，开始。。。简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下 ![轮播和

川长思鸟来/ 2022年03月31日 02:12/ 0 赞/ 397 阅读

相关图片轮播

<div id="wai"> <div id="wai_a1"> <img class="img" src="../图片/张掖丹霞7.j

Bertha 。/ 2021年12月23日 09:25/ 0 赞/ 347 阅读

相关图片轮播

实现简单的图片轮播预览效果图： ![图片1][1] ![图片2][2] ![图片3，3个图片能够自动切换][3_3] 代码： <%@ pa

快来打我*/ 2021年12月01日 13:34/ 0 赞/ 400 阅读

相关图片轮播（基础）

案例一横轴滚动 1.实现效果 ![在这里插入图片描述][20190827221929771.gif] 2. 知识点： > 1. 图片之间默认有缝隙，给左

柔光的暖阳◎/ 2021年10月25日 13:56/ 0 赞/ 423 阅读