javascript写淡入淡出效果的轮播图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:590px;
            height: 470px;
            position: relative;
            border: 1px solid;
            margin: 100px auto;
        }
        #imgList{
            width: 590px;
            height: 470px;
            position: relative;
            list-style: none;
        }
        #imgList li{
            width: 590px;
            height: 470px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #num{
            width: 590px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #fdd;
            line-height: 50px;
        }
        #num i{
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 10px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }
        #prve,#next{
            width: 45px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            cursor: pointer;
        }
        #next{
            right: 0;
        }
        #box .on{
            background-color:aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="imgList">
            <li style="display: block;"><a href="#"><img src="img/1.jpg"></a></li>
            <li><a href="#"><img src="img/2.jpg"></a></li>
            <li><a href="#"><img src="img/3.jpg"></a></li>
            <li><a href="#"><img src="img/4.jpg"></a></li>
        </ul>
        <div id="num">
            <i class="on"></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div id="prve"><</div>
        <div id="next">></div>
    </div>
 
    <script src="js/tools.js"></script>
    <script>
        var imgs = $("li"),//所有的照片
            len = imgs.length,//照片的数量
            currentIndex = 0,//默认显示第一张
            nextIndex = 1,//下一张显示的照片
            nums = $("i");//所有的小圆点
        // 自动轮播
        var timer = setInterval(move,2000);
        // 鼠标移入自动轮播暂停
        $("#box").onmouseenter = function(){
            clearInterval(timer);
        }
        // 鼠标移出启动计时器进行自动轮播
        $("#box").onmouseleave = function(){
            timer = setInterval(move,2000);
        }
        // 定义图片运动的函数
        function move(){
            fadeOut(imgs[currentIndex],1000);
            fadeIn(imgs[nextIndex],1000);
            nums[currentIndex].className = "";
            nums[nextIndex].className = "on";
            currentIndex = nextIndex;
            nextIndex++;
            if(nextIndex === len)
                nextIndex = 0;
        }
        // 单击上一个和下一个的事件
        $("#prve").onclick = function(){
            nextIndex = currentIndex-1;
            if(nextIndex<0)
                nextIndex = len-1;
            move();

 

 

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599165

posted @ 2022-04-15 19:08  忘川信使  阅读(93)  评论(0)  编辑  收藏  举报