自动图像悬停效果

时间：2018-12-08 10:32:15

标签： javascript html css

我要滑动这些图像而没有悬停效果 因为在智能手机中没有鼠标悬停效果。所以我想自动滑动图像，即图像接连出现。我添加了可以完全运行的HTML和CSS文件**
请帮助我添加javascript函数

  

这是CSS代码

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
.box{
    width: 900px;
    height: 400px;
    background-color: brown;
    margin: 10% auto;
    overflow: hidden;
    cursor: move;
    box-shadow: 2px 2px 10px 1px;
}
.box ul li{
    position: relative;
    width: 160px;
    float: left;    
    transition: all 0.5s;
}
.box ul:hover li{
    width: 40px;
}
.box ul li:hover{
    width: 640px;
}
.box ul li img{
    width: 900px;
    height: 400px;
    display: block;
}
.box-set{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
    height: auto;
    opacity: 0.8;
    background-color: black;
}
.box-set>a{
    display: block;
    padding: 25px;
    color: white;
    text-decoration: none;
}
.box-set-4{
    width: 900px;
}
    <html>
        <head>
            <meta charset="utf-8">
            <title>Slider 3D</title>
            <link href="./slider.css" rel="stylesheet">
        </head>
        <body>
            <div class="box">
                <ul>
                    <li><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm" alt="Image 1"></a>
                    </li>
                    <li><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/SEP2016/embed7-601057996.jpg" alt="Image 2"></a>
                    </li>
                    <li><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="http://www.apimages.com/Images/ssAP964769062229.jpg" alt="Image 3"></a>
                    </li>
                    <li><div class="box-set box-set-4"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyzAJ4mD7unUBnqj4-AtFtrxL1ssJ7tGqJt17qIXxAECoeh7ma" alt="Image 4"></a>
                    </li>
                </ul>
            </div>
        </body>
    </html>

2 个答案:

答案 0 :(得分：0)

这些代码可以为您提供帮助，但是上一张幻灯片中存在一个小问题： 我选择悬停类，并在每张幻灯片的javascript代码中进行设置

function doSetTimeout(i) {
  setTimeout(function () {
$('li').removeClass('hover');
        $("#slide"+i).addClass('hover');
    }, i*1000); 
}


for (var i = 1; i <= 4; ++i)
  doSetTimeout(i);
@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
.box{
    width: 900px;
    height: 400px;
    background-color: brown;
    margin: 10% auto;
    overflow: hidden;
    cursor: move;
    box-shadow: 2px 2px 10px 1px;
}
.box ul li{
    position: relative;
    width: 160px;
    float: left;    
    transition: all 0.5s;
}
.box .hover li{
    width: 40px;
}
.box ul .hover{
    width: 640px;
}
.box ul li img{
    width: 900px;
    height: 400px;
    display: block;
}
.box-set{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
    height: auto;
    opacity: 0.8;
    background-color: black;
}
.box-set>a{
    display: block;
    padding: 25px;
    color: white;
    text-decoration: none;
}
.box-set-4{
    width: 900px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
        <head>
            <meta charset="utf-8">
            <title>Slider 3D</title>
            <link href="./slider.css" rel="stylesheet">
        </head>
        <body>
            <div class="box">
                <ul>
                    <li id="slide1"><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm" alt="Image 1"></a>
                    </li>
                    <li id="slide2"><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/SEP2016/embed7-601057996.jpg" alt="Image 2"></a>
                    </li>
                    <li id="slide3"><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="http://www.apimages.com/Images/ssAP964769062229.jpg" alt="Image 3"></a>
                    </li>
                    <li id="slide4"><div class="box-set box-set-4"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyzAJ4mD7unUBnqj4-AtFtrxL1ssJ7tGqJt17qIXxAECoeh7ma" alt="Image 4"></a>
                    </li>
                </ul>
            </div>
        </body>
    </html>

答案 1 :(得分：0)

我通过使用jQuery库解决了这个问题。 希望对您有所帮助。

    <html>
        <head>
            <meta charset="utf-8">
            <title>Slider 3D</title>
            <style type="text/css">
            @charset "utf-8";
                *{
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    list-style: none;
                }
                .box{
                    width: 900px;
                    height: 400px;
                    background-color: brown;
                    margin: 10% auto;
                    overflow: hidden;
                    cursor: move;
                    box-shadow: 2px 2px 10px 1px;
                }
                .box ul li{
                    position: relative;
                    width: 160px;
                    float: left;    
                    transition: all 0.5s;
                    overflow: unset !important;
                }
                .box ul:hover li{
                    width: 40px;
                }
                .box ul li:hover{
                    width: 640px;
                }
                .box ul li img{
                    width: 900px;
                    height: 400px;
                    display: block;
                }
                .box-set{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 640px;
                    height: auto;
                    opacity: 0.8;
                    background-color: black;
                }
                .box-set>a{
                    display: block;
                    padding: 25px;
                    color: white;
                    text-decoration: none;
                }
                .box-set-4{
                    width: 900px;
                }
        </style>

        <script  src="https://code.jquery.com/jquery-3.3.1.js"  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>

        </head>
        <body>
            <div class="box">
                <ul>
                    <li><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm" alt="Image 1"></a>
                    </li>
                    <li><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/SEP2016/embed7-601057996.jpg" alt="Image 2"></a>
                    </li>
                    <li><div class="box-set"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="http://www.apimages.com/Images/ssAP964769062229.jpg" alt="Image 3"></a>
                    </li>
                    <li><div class="box-set box-set-4"><a href="#">Lorem Ipsum</a></div>
                        <a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyzAJ4mD7unUBnqj4-AtFtrxL1ssJ7tGqJt17qIXxAECoeh7ma" alt="Image 4"></a>
                    </li>
                </ul>
            </div>
            <script type="text/javascript">
                $(function(){
                    var tempObj;
                    setVirtualHover(0);
                    function setVirtualHover(id){
                        setTimeout(function(){

                            const index = id % 4;
                            for(var i=0; i < 4; i++){
                                if(i == index){
                                    $("li").eq(i).animate({
                                        width:"640px",
                                    },{ duration: 500, queue: false });
                                }else{
                                    $("li").eq(i).animate({
                                        width:"40px",
                                    },{ duration: 500, queue: false });   
                                }
                            }
                            setVirtualHover(id + 1);

                        },2000);
                    }

                });

                
            </script>
        </body>

    </html>

相关问题
最新问题