web前端使用jq实现无限循环窗口

最新推荐文章于 2023-05-03 07:25:10 发布

hhhhhhe！

最新推荐文章于 2023-05-03 07:25:10 发布

阅读量415

点赞数

分类专栏： web前端练手项目文章标签： css html jquery

本文链接：https://blog.csdn.net/lsl30522/article/details/104988969

版权

web前端练手项目专栏收录该内容

7 篇文章 3 订阅

订阅专栏

效果图：

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限循环广告</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 680px;
        height: 340px;
        background: #333333;
        margin: 100px auto;
       overflow: hidden;
    }
    ul{
        list-style: none;
        width: 1700px;
        height: 340px;
        background: #224455;
    }
    ul>li{
        float: left;
    }
    img{
        width: 340px;
        height: 340px;
    }
</style>
<script src="./lib/jquery-1.11.3/jquery-1.11.3/jquery.min.js">
</script>
<script>
$(function(){
    //定义变量保存偏移位
    var offset = 0;
    //让图片滚动起来
    var times ;
    function autoPlay(){
       times = setInterval(function(){
        offset+=-10;
        if(offset<=-1020){
            offset=0;
        }
       
        $("ul").css("marginLeft",offset);
    },50);
    }
    autoPlay();
    $("li").hover(function(){
        clearInterval(times);
        $("img").siblings().css("width","340px","heigth","340px");
        $("img").css("width","400px","heigth","400px");
        $(this).siblings().fadeTo(100,0.5);
        $(this).fadeTo(100,1);
    },function(){
        autoPlay();
        $("img").css("width","340px","heigth","340px");
        $("li ").fadeTo(100,1);
    })
})
</script>
<body>
    <div class="ad">
        <ul>
            <li><img src="./img/索隆1.jpg" alt=""></li>
            <li><img src="./img/索隆2.jpg" alt=""></li>
            <li><img src="./img/索隆3.jpg" alt=""></li>
            <li><img src="./img/索隆1.jpg" alt=""></li>
            <li><img src="./img/索隆2.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

hhhhhhe！

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端使用jq实现无限循环窗口

效果图：实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫

专栏目录