首页 > 代码库 > 图片轮播

图片轮播

2024-10-12 20:21:02   215人阅读

实现图片轮播

1、HTML代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="http://www.mamicode.com/css/style.css">
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script src="http://www.mamicode.com/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/carousel.js"></script>
</body>
</html>

css代码如下：

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "??????"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
    position: absolute;
    width: 30px;
    background:rgba(0,0,0,0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top:200px;
    z-index: 150;
    font-family: "??????";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
    background: orange;
}

jquery代码如下

$(document).ready(function(){
    var img=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
    $(".adver").mouseover(function(){
        $(".arrowLeft").show();
        $(".arrowRight").show();
    }).mouseout(function(){
        $(".arrowLeft").hide();
        $(".arrowRight").hide();
    });
    var num = 0;
    $(".arrowRight").click(function(){
            // 向左
            if(num==img.length-1){
                alert("已经是最后一张了");
            }else{
                num++;
            $(".adver").css("background","url(‘images/"+img [num]+"‘)");
            $("li:eq("+num+")").css("background","orange");
            $("li:eq("+num+")").siblings().css("background","#333");
            }
        
    });
    $(".arrowLeft").click(function(){
        // 向右
        if(num==0){
            alert("这已经是第一张了");
        }
        else{
        num--;
        $(".adver").css("background","url(‘images/"+img [num]+"‘)");
        $("li:eq("+num+")").css("background","orange");
        $("li:eq("+num+")").siblings().css("background","#333");}
});
    $("li").click(function(){
        // 点击数字
         num = $("li").index(this);
        $(".adver").css("background","url(‘images/"+img [num]+"‘)");
        $(this).css("background","orange");
        $(this).siblings().css("background","#333");    
    });
});

 

图片轮播


联系
我们