HTML图片轮播代码怎么写？

291211384 精华 2017-05-24

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8" />
        <title>轮播图</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            
            #lunbotu {
                width: 1226px;
                height: 460px;
                overflow: hidden;
                position: relative;
                margin: 0px auto;
                position: relative;
            }

            
            #banner {
                height: 460px;
                width: 6130px;
                position: absolute;
                transition: 2s;
                left: 0px;
            }

            
            #banner img {
                float: left;
            }

            
            #biao {
                position: absolute;
                top: 430px;
                left: 43%;
            }

            
            #biao_1 {
                height: 20px;
                width: 20px;
                border: 1px solid #000;
                z-index: 10;
                float: left;
                list-style: none;
                border-radius: 50%;
                margin-left: 20px;
                text-align: center;
                cursor:pointer;
            }

            
        </style>
    </head>


    <body>
        <div id="lunbotu">
            <div id="banner">
                <img class="m" src="img/T1hiDvBvVv1RXrhCrK.jpg" />
                <img class="m" src="img/T1jrxjB_VT1RXrhCrK.jpg" />
                <img class="m" src="img/T1oTJjBKKT1RXrhCrK.jpg" />
                <img class="m" src="img/T1RICjB7DT1RXrhCrK.jpg" />
                <img class="m" src="img/T1vWdTBKDv1RXrhCrK.jpg" />
            </div>
            <div id="biao">
                <ul>
                    <li id="biao_1">1</li>
                    <li id="biao_1">2</li>
                    <li id="biao_1">3</li>
                    <li id="biao_1">4</li>
                    <li id="biao_1">5</li>
                </ul>
            </div>
        </div>

    
    </body>
    <script type="text/javascript">
        var slid = document.getElementById("banner");
        //var id = document.getElementById("bt");
        var imgwidth = document.getElementsByClassName("m");
        var oli=document.getElementsByTagName("li");
        //console.log(oli);
        //console.log(imgwidth );
        var i =0;
        auto();
        oli[0].style.cssText="background:#ff6700;color:#fff;";
        function auto(){

            
            time = setInterval(function(){
                i++;
            if(i <= 4) {
                slid.style.left = slid.offsetLeft - 1226 + "px";
                oli[i].style.cssText="background:#ff6700;color:#fff;";
                oli[i-1].style.cssText="background:none;color:#000;";
            } else {
                slid.style.left ="0px";
                oli[4].style.cssText="background:none;color:#000;";
                oli[0].style.cssText="background:#ff6700;color:#fff;";
                i=0;
            }
            console.log(i);

            
        }, 3000)

            
        }

        
            for(var j=0;j<=4;j++){
                //console.log(imgwidth[j].index);
            imgwidth[j].index=j;
            oli[j].index=j;
            oli[j].onmouseover=function(){
                this.style.cssText="background:#ff6700;color:#fff;"    
                this.onmouseout=function(){
                    this.style.cssText="background:none;color:#000;"
                }
            }

            
            oli[j].onclick=function(){
                clearInterval(time);
                m=this.index;
                slid.style.left=-m*1226+"px";    
                i=m;
                auto();
                console.log(i);
            }
            }    

            
    </script>


</html>

13 1 分享 13 举报

Freal Luv 2017-05-29 00:29:31

溢出来的图片被隐藏了，要怎么弄出来。请大神教教我！急急急急急急急……

举报回复
MyFirst 2017-06-02 11:03:28

回复 Freal Luv:你是给了overflow:hidden;了吧

举报回复
傻妞 2017-11-24 09:37:26

谢谢您的代码！

举报回复
傻妞 2017-11-24 09:37:51

这段代码，对我很有用

举报回复
傻妞 2017-11-24 11:06:58

嗯，我发现了个问题，你这个代码有点小问题。就是轮播点点击时第一个轮播点和点击的轮播点的颜色一样。轮播点卡顿的问题，希望你看到我这个回复把代码改下，

举报回复
傻妞 2017-11-24 11:08:10

还有加我ＱＱ：２６３２２０２０８１.我想你肯定是个网页制作高手，我想向你好好学习。

举报回复
奔北欧 2017-12-04 00:34:25

大神大神我想问一下怎么实现第五张照片向右过渡到第一张照片啊然后循环下去求回复啊啊啊

举报回复
我No恋＆爱＆ 2018-03-05 15:32:14

回复傻妞:你应该也是也是个高手啊

举报回复
我No恋＆爱＆ 2018-03-05 15:34:42

回复傻妞:我想你应该也是一个网页高手

举报回复
我No恋＆爱＆ 2018-03-05 15:36:13

回复傻妞:加一下我吧qq3041316782谢谢

举报回复
二二er 2018-09-29 22:50:46

我想问一下，第一张图片显示，轮播的第二张以后都不显示图片怎么改？

举报回复

回复取消

陈精华 2016-10-14

http://www.w3cschool.cn/freejquery Jquery插件小合集~需要的可以收藏个，不断更新中

7 1 分享 1 举报

小赤佬精华 2017-12-27

网上看到的，希望对你有用~

HTML:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./lunboh5.css">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script type="text/javascript">
    var t = n = 0,
        count;
    $(document).ready(function() {
            // 获取图片标签长度
            count = $("#banner_list a").length;
            // 不是当前显示的图片隐藏
            $("#banner_list a:not(:first-child)").hide();
            // 点击下面的1234按钮，切换图片
            $("#banner li").click(function() {
                var i = $(this).text() - 1;
                n = i;
                if (i >= count) return;
                // 淡入淡出效果
                $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);


                // 响应点击
                $(this).toggleClass("on");


                // 切换按钮的时候让上一个按钮回归原来的样式
                $(this).siblings().removeAttr("class");
            });
            t = setInterval("showAuto()", 4000);
            $("#banner").hover(function() {
                    clearInterval(t)
                },
                function() {
                    t = setInterval("showAuto()", 4000);
                });
        })
        // 自动轮播
    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
    </script>
</head>


<body>
    <div id="banner">
        <div id="banner_bg">
        </div>
        <div id="banner_info">
        </div>
        <ul>
            <li class="on">
                1
            </li>
            <li>
                2
            </li>
            <li>
                3
            </li>
            <li>
                4
            </li>
        </ul>
        <div id="banner_list">
            <a href="#" target="_blank">![jquery²å¼þ¿â1](http://upload-images.jianshu.io/upload_images/189984-6da57c46f1b3f07b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            <a href="#" target="_blank">![jquery²å¼þ¿â2](http://upload-images.jianshu.io/upload_images/189984-16081592e7683537.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            <a href="#" target="_blank">![jquery²å¼þ¿â3](http://upload-images.jianshu.io/upload_images/189984-149067ce98381b8f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            <a href="#" target="_blank">![jquery²å¼þ¿â4](http://upload-images.jianshu.io/upload_images/189984-a44b79142dce57ad.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
        </div>
    </div>
</body>


</html>

CSS：

#banner {
    position: relative;
    width: 478px;
    height: 286px;
    border: 1px solid #666;
    overflow: hidden;
}


#banner_list img {
    border: 0px;
}


#banner_bg {
    position: absolute;
    bottom: 0;
    background-color: #000;
    height: 30px;
    filter: Alpha(Opacity=30);
    opacity: 0.3;
    z-index: 1000;
    cursor: pointer;
    width: 478px;
}


#banner_info {
    position: absolute;
    bottom: 0;
    left: 5px;
    height: 22px;
    color: #fff;
    z-index: 1001;
    cursor: pointer
}


#banner_text {
    position: absolute;
    width: 120px;
    z-index: 1002;
    right: 3px;
    bottom: 3px;
}


#banner ul {
    position: absolute;
    list-style-type: none;
    filter: Alpha(Opacity=80);
    opacity: 0.8;
    z-index: 1002;
    margin: 0;
    padding: 0;
    bottom: 3px;
    right: 5px;
}


#banner ul li {
    padding: 0px 8px;
    float: left;
    display: block;
    color: #FFF;
    background: #6f4f67;
    cursor: pointer;
    border: 1px solid #333;
}


#banner ul li.on {
    background-color: #000;
}


#banner_list a {
    position: absolute;
}

6 0 分享 1 举报

耀石石石 2016-11-29

贴一个超级简单的JS代码，不需要插件

<!DOCTYPE html>
<html>
<head>
<title>图片轮播代码</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<style type="text/css">
    body{max-width: 640px;margin: 0 auto;}
    #lunbo ul li{width:100%;list-style: none;width:640px; height:250px;background-color: #f00;text-align: center;}
    #lunbo ul li:not(:first-child){display: none;}
</style>


<body>
<div id="lunbo">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    //因为使用了document，所以js需要放在需要执行的代码下面生效才能生效
    var li=document.getElementById('lunbo').getElementsByTagName("li");
    var num=0;
    var len=li.length;


    setInterval(function(){
        li[num].style.display="none";
        num=++num==len?0:num;
        li[num].style.display="inline-block";


    },3000);//切换时间
</script>
</body>
</html>