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 举报

陈精华 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>