jquery 做的一个简单切换图片和内容的效果

最新推荐文章于 2020-05-13 00:38:43 发布
最新推荐文章于 2020-05-13 00:38:43 发布
阅读量915 收藏
点赞数
分类专栏： Jquery案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylbk_jie/article/details/11745621
版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SvnHostDemo.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   
    <style type="text/css">
        .tab {
            float:left;
            width:150px;
            height:30px;
            text-align:center;
            line-height:30px;
           border-top:1px solid Pink;
            border-left:1px solid Pink;
            border-bottom:1px solid black;
            cursor:pointer;
        }
        .div_1 {
            width:907px;
            border-right:1px solid Pink;
            height:370px;   
            margin-top:30px;
            margin-left:200px;
        }

        .div_2 {
             width:907px;
            height:340px;
            float:left;
            border-right:1px solid black;
            border-left:1px solid black;
            border-bottom:1px solid black;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".tab").each(function (index) {
                var t = "";
                if ($(this).hasClass('cue') == true) {
                    $(this).css("border-right", "1px solid black");
                    $(this).css("border-left", "1px solid black");
                    $(this).css("border-top", "1px solid black");
                    $(this).css("border-bottom", "0px solid black");
                    t = index;
                    $(".div_2").each(function (ert) {
                        $(this).css("display", "none");
                        $(this).addClass('cue');
                        if (t == ert) {
                          $(this).css("display", "block");
                          $(this).removeClass('cue');
                        }
                    });
                }
            });
            $(".tab").click(function () {
                var t =$(".tab").index($(this))
                $(".tab").each(function (index) {
                    if ($(this).hasClass('cue') == true) {
                        $(this).css("border-right", "0px solid Pink");
                        $(this).css("border-left", "1px solid Pink");
                        $(this).css("border-top", "1px solid Pink");
                        $(this).css("border-bottom", "1px solid black");
                        $(this).removeClass('cue');
                        $(".div_2").each(function (ert) {
                            if ($(this).hasClass('cue') == false) {
                                $(this).css("display", "none");
                                $(this).addClass('cue');
                            }
                            if (t == ert) {
                                $(this).css("display", "block");
                                $(this).removeClass('cue');
                            }
                        });
                    }
                });
                $(this).addClass('cue');
                $(this).css("border-right", "1px solid black");
                $(this).css("border-left", "1px solid black");
                $(this).css("border-top", "1px solid black");
                $(this).css("border-bottom", "0px solid black");
              
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="div_1">
        <div class="tab cue">111111111111</div>
        <div class="tab">222222222222</div>
        <div class="tab">333333333333</div>
        <div class="tab">444444444444</div>
        <div class="tab">555555555555</div>
        <div class="tab">666666666666</div>
        <div class="div_2">
                1111111111111111111111111111111111111111111111111111111
        </div>
        <div class="div_2">
                2222222222222222222222222222222222222222222222222222222
        </div>
        <div class="div_2">
                333333333333333333333333333333333333333333333333333333333
        </div>
        <div class="div_2">
                4444444444444444444444444444444444444444444444
        </div>
        <div class="div_2">
                55555555555555555555555555555555555555555555555555555555555555
        </div>
        <div class="div_2">
                66666666666666666666666666666666666666666666666666666666666666
        </div>
    </div>
    </form>
</body>
</html>

 

 

 

 

 

 

xiaohe345
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 点击图片切换内容
a_gust_wind的博客
07-01 210
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } .info{margin:50px auto;position: relative;width: 501px;} .
jquery简单实现图片切换效果的方法
10-24
jQuery作为一个非常流行的JavaScript库，提供了一种简单而强大的方式来操作DOM和实现动画效果。 ### jQuery图片切换效果实现要点： 1. **图片切换的HTML结构**： 首先，我们需要准备用于图片切换的HTML结构。在...
完美JQuery图片切换效果的简单实现
12-10
效果如下： css： body { font-family:"Microsoft Yahei"; } body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;} /***大图切换***/ .scroll_view{margin: 0px auto;overflow:hidden;position: relative;} .photo_view li{position:absolute;width: 100%;} .photo_view li em,.phot
jquery广告图片切换效果
jiangfeng08的专栏
05-21 3959
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Jquery 图片切换展示效果 - - yj511.container, .container * { margin:0; padding:0; }.container { width:408px; height:168px;
jQuery插件实现 鼠标悬停图片切换效果实现源代码
05-06
资源通过jQuery插件，实现图片切换的过渡的效果，当我们使用鼠标在焦点项悬停的时候，该项会显示出与其他项不同的效果，从而显得焦点项更为突出。大家可以替换图片以及修改格式，实现自己想要的结果，里面有一些详细的注释，可以参看。还是查看一下实例会更加直观！
使用 jquery 替换 网页某部分的图片内容
weixin_30527143的博客
09-21 196
这两天公司网站因为一张未经授权的图片被一家流氓公司搞上了法院，没办法只能赔钱 ，于是老板就提了这个把以前图片全部替换的需求，由于网站内容量庞大，不可能去一篇一篇的改内容，刚开始向的是用PHP正则匹配，但是想到效率的问题还是放弃了这种做法，转而使用js，查了资料后幸不辱命，完成了任务。 直接贴代码： 1 $(function(){ 2 //var str = $('.you_l...
jQuery做的一个简单的图片切换效果
07-11
在本项目中，我们将深入探讨如何使用jQuery实现一个简单的图片切换效果。这个效果通常应用于网站的轮播图或者产品展示部分，能够吸引用户的注意力并提升用户体验。 首先，我们需要理解HTML基础结构。`index.html`...
jquery简单图片切换显示效果实现方法
10-24
本文重点介绍了使用jQuery实现一个简单的图片切换显示效果的方法，通过具体实例演示了如何应用jQuery来完成图片的自动轮播效果。 知识点一：jQuery引入与文档就绪函数 在实现图片切换效果前，需要引入jQuery库，...
用jquery的attr方法实现图片切换效果
10-20
本文将详细介绍如何使用jQuery库中的attr方法来实现一个简单的图片切换效果。attr方法是jQuery中用于获取或设置HTML元素属性值的函数，通过该方法可以方便地实现元素属性的动态修改，进而达到图片切换的目的。 首先...
jquery实现的带数字标注的焦点图片切换
01-24
jquery实现的带数字标注的焦点图片切换
JQuery点击切换图片
weixin_44540343的博客
08-07 1249
功能效果图如下： 点击左右切换按钮时，图片左右按顺序切换。 我们直接把代码放出来吧：
jQuery实现图片切换效果
web开发自学
03-03 210
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
使用Jquery制作图片轮播
Binary的博客
05-13 243
这次只是简单地在网页中心加了div套入了图片，样式比较简单 效果图为： 这里边左右点击的为font图标，元素标签为<i></i> 下边的圆圈为div设置了boder和boder-radius 其中html代码为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title>
jQuery 实现图片切换
稻香的专栏
10-23 796
$.fn.imgtransition = function(o){ var defaults = { speed : 3000, animate : 1000 }; o = $.extend(defaults, o); return this.each(function(){ var arr_e = $("li", this); function shownext(
Jquery 超简单实现图片切换
Werty
05-15 1198
今天写代码实在不顺，好吧，我连自己比较输的Jquery都wang
Jquery 切换不同图片
huihuangjiuai的专栏
12-05 693
#sidebar div#live_chat a {     background: url("scroll/live_chat1.jpg") ;     height: 76px; } #sidebar div#live_chat a:hover {     background: url("scroll/live_chat2.jpg") ; } #sidebar div#cust
最简洁jQuery图片渐变切换
weixin_33735077的博客
03-15 613
2019独角兽企业重金招聘Python工程师标准>>> ...
JS基础之手动实现简易jQuery api
fengfangyuan的博客
06-09 226
今天主要实现以下两个api： addClass：给指定标签增加class setText:给指定标签设置文本内容(textContent) 第一版 第一版用到命名空间，命名空间相当于给自己的库一个名字，当函数名称冲突，不会会覆盖掉之前的函数。 var ffyjq = {}; // 作用：获取传入的节点的兄弟节点 ffyjq.getSiblings = function (node){ //...
做一个jQuery图片切换效果
最新发布
03-24
好的，以下是一个简单的 jQuery 图片切换效果的代码： HTML 代码： ``` <div class="slideshow"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` CSS 代码： ``` .slideshow { position: relative; height: 400px; } .slideshow img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow img.active { opacity: 1; } ``` jQuery 代码： ``` $(document).ready(function() { $('.slideshow img:first-child').addClass('active'); setInterval(function() { var current = $('.slideshow img.active'); var next = current.next(); if (next.length === 0) { next = $('.slideshow img:first-child'); } current.removeClass('active'); next.addClass('active'); }, 3000); }); ``` 这个代码会在页面加载完成后，将第一张图片设为 active，然后每隔 3 秒钟切换到下一张图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值