WEB代码：首页顶部：鼠标滑过特效、最简单的jQuery轮播图

最新推荐文章于 2025-05-17 12:59:03 发布

原创最新推荐文章于 2025-05-17 12:59:03 发布 · 647 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#WEB

Web 专栏收录该内容

80 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现前端页面的鼠标滑过特效，包括文字颜色变化、图标旋转以及侧边栏高亮效果。此外，还深入探讨了利用jQuery制作简单轮播图的方法，涵盖图片切换、导航点互动及自动播放等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首页顶部：鼠标滑过特效

index.html

<body>
    <div class="topHeader">
        <div class="topHeaderCon">
            <div class="topHeaderLeft">
                <p>欢迎来酒仙网！</p>
                <a href="https://login.jiuxian.com/login.htm" rel="nofollow">请登录</a>
                <a href="https://login.jiuxian.com/register.htm" rel="nofollow">免费注册</a>
            </div>
            <div class="topHeaderRight">

            </div>
        </div>

    </div>

</body>

index.css

* {
    font-family: 微软雅黑;
    margin: 0px;
    padding: 0px;
}

body {
    background: #F9F9F9;
}

.topHeader {
    height: 26px;
    background: #F2F2F2;
}

.topHeaderCon {
    width: 1200px;
    height: 100%;
    line-height: 26px;
    margin: 0 auto;
}

.topHeader .topHeaderLeft {
    float: left;
}

.topHeader .topHeaderRight {
    float: left;
}

.topHeaderLeft p,
.topHeaderLeft a {
    margin-right: 6px;
    float: left;
    line-height: 26px;
    color: #999;
    font-size: 12px;
}

.topHeaderLeft a:hover,
.topHeaderLeft p:hover {
    color: #cc0001;
}

index.js

$(function() {
    $('.myjiuxian').mouseenter(function() {
        $(this).find('.top').css({ 'background': '#fff' });
        $(this).find('.down').show();
        // alert(1);
    });
    $('.myjiuxian').mouseleave(function() {
        $(this).find('.down').hide();
        $(this).find('.top').css({ 'background': '#F2F2F2' });
        // alert(1);
    });

});

图标旋转角度

$(function() {
    $('.myjiuxian').mouseenter(function() {
        $(this).find('.top').css({ 'background': '#fff' });
        $(this).find('.down').show();
        $(this).find('.caret').css({ 'transform': 'rotate(180deg)' });
        // alert(1);
    });
    $('.myjiuxian').mouseleave(function() {
        $(this).find('.down').hide();
        $(this).find('.top').css({ 'background': '#F2F2F2' });
        $(this).find('.caret').css({ 'transform': 'rotate(0deg)' });
        // alert(1);
    });

});

鼠标滑过-左边红色线-右侧字动

.categoryBox li:hover {
    background: #f1f1f1;
    border-left: 3px solid #ce171f;
}

鼠标滑过-左边红色线-右侧字不动

*html*
<div class="catItemLeft"></div>

*css*
.categoryBox .catItemLeft {
    width: 3px;
    height: 77px;
    background: #ce171f;
    position: absolute;
    display: none;
}

*js*
$('.categoryBox li').mouseenter(function() {
        $(this).find('.catItemLeft').css({ 'display': 'block' });
        $(this).css({ 'background': '#F1F1F1' });
    });
    $('.categoryBox li').mouseleave(function() {
        $(this).find('.catItemLeft').css({ 'display': 'none' });
        $(this).css({ 'background': '#FFF' });
    });

最简单的jQuery轮播图

html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="public/css/index.css">
    <script src="public/js/jquery.min.js"></script>
    <script src="public/js/index.js"></script>
    <title>PPT</title>
</head>
<body>
    
    
    
        <div id="lunbobox">
                <div id="toleft">
                        &lt;</div>
                    <div class="lunbo">
                        <a href="#"><img src="public/img/ppt1.jpg"></a>
                        <a href="#"><img src="public/img/ppt2.jpg"></a>
                        <a href="#"><img src="public/img/ppt3.jpg"></a>
                        <a href="#"><img src="public/img/ppt4.jpg"></a>
                        <a href="#"><img src="public/img/ppt5.jpg"></a>
                    </div> 
                    <div id="toright">&gt;</div>
                    <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                    </ul>
                        
            </div>
           
</body>
<script>

</script>

</html>

CSS

#lunbobox{
    width: 100%;
    height: 470px;
    position: relative;

}
.lunbo{
    width: 100%;
    height: 470px;
}
.lunbo img{
    width: 100%;
    height: 470px;
    position: absolute;
    top: 0px;
    left: 0px;
}
#lunbobox ul{
width: 1000px;
position: absolute;
bottom: 10px;
right: 0px;
z-index: 5;
}
#lunbobox ul li{
cursor: pointer;
width: 20px;
height: 20px;
line-height: 20px;
float: left;
list-style: none;
background: #000;
text-align: center;
margin: 0px 8px 0px 0px;
border-radius: 50px;
box-shadow: 0 0 3px;
display: inline-block;
font-size: 12px;
color: #fff;
opacity: 0.8;
overflow: hidden;
}


#toleft{
    /* display: none; */
    width: 200px;
    height: 200px;
    font-size: 100px;
    line-height: 200px;
    text-align: center;
    color: rgb(252, 247, 247);
    position: absolute;
    top: 150px;
    left: 200px;
    cursor: pointer;
    z-index: 99;
    opacity: 0.2;
}
#toright{
      /* display: none; */
      width: 200px;
    height: 200px;
      font-size: 100px;
      line-height: 200px;
      text-align: center;
      color: rgb(252, 247, 247);
      position: absolute;
      top: 150px;
      right: 200px;
      cursor: pointer;
      z-index: 99;
      opacity: 0.2;
}
.lunbo a{
    cursor: default;
      display: none;

}

$(function(){
// 左右变色
//$("#toright").hide();
//$("#toleft").hide();
    $('#toright').hover(function(){
       
        $(this).css({'opacity':'0.8'});
    },function(){
       
        $(this).css({'opacity':'0.2'});
    });
    $('#toleft').hover(function(){
       
        $(this).css({'opacity':'0.8'});
    },function(){
        
        $(this).css({'opacity':'0.2'});
    });

   
    

// 点击鼠标，切换图片 
$("#lunbobox ul li").hover(function(){
    
    //添加 移除样式
    //$(this).addClass("lito").siblings().removeClass("lito"); 
    //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式   
    // 可以在样式中 用hover 来对li 实现
    $(this).css({
        "background":"#dd102e",
        
    }).siblings().css({
        "background":"#000",
        
    });
    //获取索引 图片索引与按钮的索引是一一对应的
    var index=$(this).index();
    // console.warn(index);

    // siblings  找到 兄弟节点(不包括自己）
    $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
});





/////////////上一张、下一张切换
$("#toleft").click(function() {
    //判断index<0的情况为：开始点击#toright  index=0时  
    // 再点击 #toleft 为负数了 会出错
    
    index--;
    if (index < 0)
    {
        index = 4;
    }
    console.log(index);
    $("#lunbobox ul li").eq(index).css({
        "background": "#dd102e"
        
    }).siblings().css({
        "background": "#000"
    })

    $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); 
    // siblings  找到 兄弟节点(不包括自己）必须要写
}); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换
$("#toright").click(function() {
   
    index++;
    if (index > 4) {
        index = 0
    }
    console.log(index);
    $(this).css({
        "opacity": "0.5"
    })
    $("#lunbobox ul li").eq(index).css({
        "background": "#dd102e"
        
    }).siblings().css({
        "background": "#000"
    })
    $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); 
    // siblings  找到 兄弟节点(不包括自己）
});
var t;
var index=0;
//自动播放
$("#lunbobox ul li").eq(index).css({
    "background": "#dd102e",
   
}).siblings().css({
    "background": "#000",
    
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);

t = setInterval(play, 3000)

function play() {
   
    
    index++;
    if (index > 4) {
        index = 0
    }
    
    $("#lunbobox ul li").eq(index).css({
        "background": "#dd102e",
       
    }).siblings().css({
        "background": "#000",
        
    })
    $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
}

///////鼠标移进  移出
$("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(
    ////////鼠标移进
    function() {
       
        clearInterval(t);

    },
    ///////鼠标移开
    function() {
        //$('#toright,#toleft').hide()
        //alert('aaa')

        // 自动轮播
        t = setInterval(play, 1000)

        function play() {
            
            index++;
            if (index > 4) {
                index = 0
            }
            $("#lunbobox ul li").eq(index).css({
                "background": "#dd102e",
               
            }).siblings().css({
                "background": "#000",
                
            })
            $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
        }
    })
})