学员操作:制作广告切换效果

制作广告图片轮播切换效果，默认第1个数字背景颜色为橙色，其他背景为#333333，数字颜色为白色
鼠标移至图片上出现左右箭头，鼠标移出图片时，左右箭头消失
单击左历右箭头时，显示上一个/下一个图片，当前数字背景为橙色，其他数字背景为#333333，第一个/最后一个图片显示时，单击箭头时弹出提示

主体

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作广告图片轮播切换效果</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="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 type="text/javascript" src="js/carousel.js"></script>

</body>
</html>

 

js(还要一个使用jquery-1.12.4.js)

 

$(document).ready(function () {

    var img=Array('123.jpg','234.jpg','345.jpg','567.jpg','456.jpg','678.jpg');
    var flag=0;
    //右侧按钮
    $('.arrowRight').click(function () {
        if(flag==img.length-1){
            alert('最后一张图片');
        }else {
            flag++;
            var i=flag+1;
            $('.adver').css('background','url(img/'+img[flag]+')');
            $('li:nth-of-type('+i+')').css('background','orange');
            $('li:nth-of-type('+i+')').siblings().css('background','#333333');
        }
    });

    //左侧按钮
    $('.arrowLeft').click(function () {
        if(flag==0){
            alert('第一张图片');
        }else {
            flag--;
            var i=flag+1;
            $('.adver').css('background','url(img/'+img[flag]+')');
            $('li:nth-of-type('+i+')').css('background','orange');
            $('li:nth-of-type('+i+')').siblings().css('background','#333333');
        }
    });

    //切换图片
    $('.adver').mousemove(function () {
        $('.arrowRight').show();
        $('.arrowLeft').show();
    }).mouseout(function () {
        $('.arrowRight').hide();
        $('.arrowLeft').hide();
    });
});

 

css

ul,li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.adver {
    margin: 0 auto;
    width: 590px;
    overflow: hidden;
    height: 470px;
    position: relative;
    background: url("../img/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: 40px;
    line-height: 40px;
    text-align: center;
    top: 200px;
    z-index: 150;
    font-family: "微软雅黑";
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    color:snow;
}

.arrowLeft {
    left: 10px;
}

.arrowRight {
    right: 10px;
}

.bg{
    background: orange;
}

 

图片自己插入

 

posted @ 2020-06-23 19:23  燃子  阅读(774)  评论(0)    收藏  举报