首页 新闻 搜索 专区 学院

如何给下面的轮播图加左右切换的按钮?求大神

0
悬赏园豆:20 [待解决问题]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换轮播图</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
#banner{
height: 280px;
width: 320px;
background: wheat;
margin: 0px auto;
border: 2px dashed gray;
position: relative;
z-index: 2;
}
#banner span{
z-index: 22;
font-size: 30px;
cursor: pointer;
}
#banner span:nth-child(1){
position: absolute;
left: 30px;
bottom: 20px;
}
#banner span:nth-child(2){
position: absolute;
bottom: 20px;
}
#allist{
height: 280px;
width: 320px;
}
#allist a{
display: none;
}
#iconlist{
position: absolute;
left: 120px;
bottom: 20px;
}
#iconlist li{
height:14px;
width: 14px;
background: blueviolet;
border-radius: 50%;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>

    <div id="banner">
        <div id="allist">
            <a href="#" style="display: block;"><img src="img/lu1.jpg"/></a>
            <a href="#"><img src="img/lu2.jpg"/></a>
            <a href="#"><img src="img/lu3.jpg"/></a>
            <a href="#"><img src="img/lu4.jpg"/></a>
        </div>
        <ul id="iconlist">
            <li style="background: magenta;"></p>
            <p></p>
            <p></p>
            <p></p>
        </ul>
        <span><</span>
        <span>></span>
    </div>
    
    
    
</body>

</html>
<script>
window.onload=function(){
var imgs=document.getElementById("allist").getElementsByTagName("a");
var icon=document.getElementById("iconlist").getElementsByTagName("li");
var biglun=document.getElementById("banner");

    var m=0;
    
    var timer=setInterval(run,2000);
    
    function run(){
        if(m>=3){
            m=0;
        }
    m++;
    con(m);
    toy(m);
        }
    function con(n){
        for(var i=0;i<imgs.length;i++){
            imgs[i].style.display="none";
        }
        imgs[n].style.display="block";
    }
    
    function toy(n){
        for(var i=0;i<icon.length;i++){
            icon[i].style.background="";
        }
        icon[n].style.background="magenta";
    }
    biglun.onmouseover=function(){
        clearInterval(timer);
    }
    biglun.onmouseout=function(){
      timer=setInterval(run,2000);
    }
    
    for(var i=0;i<icon.length;i++){
        (function(i){
            icon[i].onmouseover=function(){
    con(i);
    toy(i);
    m=i+1;
            }})(i)}
    

//向左向右这个怎么写?我试了好多次。。。

}

</script>

blog_zss小帅-博客猿的主页 blog_zss小帅-博客猿 | 初学一级 | 园豆:182
提问于:2019-02-14 21:10
< >
分享
所有回答(1)
0

在你的代码基础上,稍微改了一下,我整个发出来:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换轮播图</title>
<style>
* {
padding: 0px;
list-style: none;
text-decoration: none;
}

    #banner {
        height: 300px;
        width: 480px;
        background: wheat;
        margin: 0px auto;
        border: 1px solid gray;
        position: relative;
        z-index: 2;
    }

        #banner span {
            z-index: 22;
            font-size: 30px;
            cursor: pointer;
        }

            #banner span:nth-child(1) {
                position: absolute;
                left: 30px;
                bottom: 20px;
            }

            #banner span:nth-child(2) {
                position: absolute;
                bottom: 20px;
            }

    #allist {
        height: 300px;
        width: 480px;
    }

        #allist a {
            display: none;
        }

        #allist img {
            height: 300px;
            width: 480px;
        }

    #iconlist {
        position: absolute;
        left: 120px;
        bottom: 0px;
    }

        #iconlist li {
            height: 22px;
            width: 16px;
            background: blueviolet;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            padding-left: 6px;
        }
</style>
<link rel="shortcut icon" href="https://cdn.segmentfault.com/v-5c78d357/global/img/favicon.ico" />
<script src="Jquery/1.11.0/jquery.min.js"></script>
<script>
    window.onload = function () {
        var imgs = document.getElementById("allist").getElementsByTagName("a");
        var icon = document.getElementById("iconlist").getElementsByTagName("li");
        var biglun = document.getElementById("banner");
        var m = 0;
        var count = imgs.length;//图片总数量
        var timer = setInterval(run, 2000);

        function run() {
            if (m >= count) {
                m = 0;
            }
            showPic(m);
            m++;
        }
        function con(n) {
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.display = "none";
            }
            imgs[n].style.display = "block";
        }

        function toy(n) {
            for (var i = 0; i < icon.length; i++) {
                icon[i].style.background = "";
            }
            icon[n].style.background = "magenta";
        }
        biglun.onmouseover = function () {
            clearInterval(timer);
        }
        biglun.onmouseout = function () {
            timer = setInterval(run, 2000);
        }

        for (var i = 0; i < icon.length; i++) {
            (function (i) {
                icon[i].onmouseover = function () {
                    showPic(i);
                    m = i + 1;
                }
            })(i)
        }
        //向左
        $("#pre").click(function () {
            if (m <= 0) {
                m = count;
            }
            m--;
            showPic(m);
        });
        //向右
        $("#next").click(function () {
            if (m >= count) {
                m = 0;
            }
            showPic(m);
            m++;
        });
        function showPic(i) {
            con(i);
            toy(i);
        }
    }
</script>

</head>
<body>
<div id="banner">
<div id="allist">
<a href="#" style="display: block;">
<img src="Images/海洋之心.jpg" /></a>
<a href="#">
<img src="Images/冰冠公主.jpg" /></a>
<a href="#">
<img src="Images/大秦宣太后.jpg" /></a>
<a href="#">
<img src="Images/地狱火.jpg" /></a>
<a href="#">
<img src="Images/电玩小子.jpg" /></a>
<a href="#">
<img src="Images/黄金射手座.jpg" /></a>
</div>
<ul id="iconlist">
<li style="background: magenta;"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</ul>
<span id="pre"><</span>
<span id="next">></span>
</div>
</body>
</html>

三人乐乐 | 园豆:4561 (老鸟四级) | 2019-03-07 16:08
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册