轮播图作业

最新推荐文章于 2024-03-14 19:48:19 发布

小松OVO

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量151

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/qq_50724455/article/details/116643528

版权

作业专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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

$(".adver").mouseover(function () {
    $(".arrowRight").show();
    $(".arrowLeft").show();
}).mouseout(function () {
    $(".arrowRight").hide();
    $(".arrowLeft").hide();
})




$(document).ready(

    function () {
        var i = 0;
        //轮播图片数组
        var images = new Array("adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg");

        var interval = null; //定义一个定时器

        //启动定时器方法
        function run() {
            interval = setInterval(right, "1500"); //定时的设置
        }
        //左边按钮
        function left() {

            if (i == 0) {
                i = images.length - 1;
                $(".adver").css("background", "url(images/" + images[i] + ")");
                $("li").eq(i).css("background", "orange"); //下一个 li 位置
                $("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
            } else {
                i--;
                $(".adver").css("background", "url(images/" + images[i] + ")");
                $("li").eq(i).css("background", "orange"); //下一个 li 位置
                $("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
            }
        }
        //右边按钮
        function right() {

            if (images.length - 1 == i) {
                i = 0;
                $(".adver").css("background", "url(images/" + images[i] + ")");
                $("li").eq(i).css("background", "orange"); //下一个 li 位置
                $("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
            } else {
                i++;
                $(".adver").css("background", "url(images/" + images[i] + ")");
                $("li").eq(i).css("background", "orange"); //下一个 li 位置
                $("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
            }
        }

        //默认启动定时器
        run();

        //左按钮单击事件
        $(".arrowLeft").click(function () {
            clearTimeout(interval); //关闭定时器
            window.setTimeout(run, 3000); //等待3秒继续自动轮播
            left(); //调用左边按钮方法
        });

        //右按钮单击事件
        $(".arrowRight").click(function () {
            clearTimeout(interval); //关闭定时器
            window.setTimeout(run, 3000); //等待3秒继续自动轮播
            right(); //调用右边按钮方法
        });
    }
)

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;
}

images
在这里插入图片描述

瞎做

小松OVO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图作业

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css"></head><body><div class="adver"> <ul>
复制链接

扫一扫