跳至主要內容
检测 元素查找 元素操作

html示例代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>获取元素</title>
  <style type="text/css">
    *{
     /*padding:0px;
     margin:0px;*/
     list-style:none;
     text-decoration:none;
     font-family:microsoft yahei;
    }
    #all{
     padding:10px;
     width:800px;
     height:auto;
     border:solid 1px #333;
     margin:0 auto;
     
    }
    #menu a{font-size:14px;}
    #header{width:97%;height:80px;border:solid 1px #444;margin:10px;}
    #section{width:97%;height:auto;border:solid 1px #444;margin:10px;}
    
    #footer{width:97%;height:50px;border:solid 1px #444;margin:10px;}
    #header ul{height:auto;overflow:hidden;padding-left:100px;}
    #header ul li{width:60px;height:30px;float:left;border:solid 1px #456;text-align:center;line-height:30px;}
    
    #logo{width:200px;height:auto;float:left;position:relative;}
    #logo img{margin-top:-40px;}
    #section ul{height:auto;overflow:hidden;padding:20px;}
    #section li{width:200px;height:150px;float:left;border:solid 2px pink;padding:10px;margin-right:21px;margin-bottom:21px;}
    #img{width:100px;float:left;}
    #copy{height:auto;overflow:hidden;padding-left:100px;}
    #move{width:80px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;}
    #allmove{width:80px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;}
    #recovery{width:80px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;}
 
    /*这里添加的类并且增加的属性*/
    #images .cur{width:400px;height:400px;border:solid 2px blue;}
  </style>
  <script type="text/javascript">
  window.onload = function(){
    var lis = images.getElementsByTagName('li');//获取所有的li
    // for(var i=0;i<lis.length;i++){   
    // lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
    // }
    
    move.onclick = function(){
     for(var i=0;i<lis.length;i++){   
       lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
     }
     return false;
    }
    allmove.onclick = function(){
     var d = 0;
     var inte = setInterval(function(){
       document.body.style.transform = 'rotate('+d+'deg)';
       d+=10;
       if(d > 360){
         clearInterval(inte);
       }
     },10)
    }
    recovery.onclick = function(){
     for(var i=0;i<lis.length;i++){   
       lis[i].style.transform = 'rotate(0deg)';
     }
     return false;
    }
  }
  </script>
</head>
<body>
  <!-- 内容 start -->
  <div id="all">
    <!-- 头部 start -->
    <div id="header">
     <div id="logo"><img src="./sunli/logo.png" alt="" width="100%"></div>
     <ul id="menu">
       <li><a href="国内">国内</a></li>
       <li><a href="国外">国外</a></li>
       <li><a href="科技">科技</a></li>
       <li><a href="生活">生活</a></li>
     </ul>
    </div>
    <!-- 头部 end -->
    
    <!-- 内容 start -->
    <div id="section">
     <ul id="images">
       <li class="w"><a href=""><img src="./sunli/1.jpg" alt="" width="100%"></a></li>
       <li class="w"><a href=""><img src="./sunli/2.jpg" alt="" width="100%"></a></li>
       <li class="w"><a href=""><img src="./sunli/3.jpg" alt="" width="100%"></a></li>
       <li><a href=""><img src="./sunli/4.jpg" alt="" width="100%"></a></li>
       <li id='one'><a href=""><img src="./sunli/5.jpg" alt="" width="100%"></a></li>
       <li><a href=""><img src="./sunli/6.jpg" alt="" width="100%"></a></li>
       <li name="y"><a href=""><img src="./sunli/7.jpg" alt="" width="100%"></a></li>
       <li name="y"><a href=""><img src="./sunli/8.jpg" alt="" width="100%"></a></li>
       <li name="y"><a href=""><img src="./sunli/9.jpg" alt="" width="100%"></a></li>
     </ul>
    </div>
    <!-- 内容 end -->
    
    <!-- 底部 start -->
    <div id="footer">
     <div id="img"><img src="./sunli/logo.png" alt="" width="100%"></div>
     <div id="copy">© Copyright 2014. All Rights Reserved.</div>
    </div>
    <!-- 底部 end -->
  
  </div>
  <!-- 内容 end -->
  <div id="move">Image</div>
  <div id="allmove">Body</div>
  <div id="recovery">Recovery</div>
 
 
  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  
</body>
  <script type="text/javascript">
  //检测引入是否成功
  //alert($);
  //或者
  //alert(jQuery);
 
  //通过id获取
  //$('#logo').css('border','solid 2px blue ');
 
  //var logos=$('#logo');
 
  //logos.css('border','solid 2px blue ');
 
  //通过类名方式获取
  //$('.w').css('border','solid 2px blue');
 
  //通过标签名
  //$('li').css('width','500px');
 
  //逗号 并列获取
  //$('#logo,.w').css('border','solid 2px blue');
 
  //层级关系
  //$('#menu li').css('border','dashed 1px green');
 
  //获取第一个元素
  //$('#images li:first').css('border','dashed 1px green');
 
  //最后一个元素
  //$('#images li:last').css('border','dashed 3px purple');
  //$('#images li').last().css('border','dashed 1px purple');
 
  //even 偶数  ********按照索引值*********
  //$('#images li:even').css('border','dashed 3px purple');
 
  //odd 奇数  ********按照索引值*********
  //$('#images li:odd').css('border','dashed 3px purple');
 
  //eq  指定选择 *********按照顺序选取*************
  /*$('#images li:eq(4)').click(function(){
    alert('1234');
  });
*/
  //gt  大于(某值) 不包含该值 ******按照索引**********
  //$('#images li:gt(3)').css('border','dashed 3px purple');
 
  //lt  小于(某值) 不包含该值 ******按照索引**********
  //$('#images li:lt(3)').css('border','dashed 3px purple');
 
  //获取images里面所有的子元素
  //$('#images').children().css('border','solid 1px orange');
 
  //获取images 里面第一个子元素
   //$('#images li:first-child').css('border','solid 2px blue');
 
  //nth-child 选择子元素******按顺序**********
  //$('#images li:nth-child(2)').css('border','solid 2px blue');
 
  //获取同辈的下一个元素
  //$('#one').next().css('border','solid 2px blue');
 
  //获取同辈的上一个元素
  //$('#one').prev().css('border','solid 2px blue');
 
  //获取父级
  //$('#one').parent().css('border','solid 2px blue');
 
  //获取先辈级 ^^^^^^^^^非常有用^^^^^^^^^^^^^
  //$('#one').parents().css('border','solid 1px yellow');
 
  //获取同辈元素
  //$('#one').siblings().css('border','solid 1px yellow');
 
  //查找元素属性  获取元素属性
  //想要全部获取需要遍历 ^^^^^^^^^^^^^非常有用^^^^^^^^^^^^
  //console.log($('#images').find('img').attr('src'));
 
  //设置属性
   //$('#menu li:first').attr('name','www');
 
    //查找子类标签
    /*var as = $('#menu').find('a').last();
 
    // console.log(as);
    //获取属性值
     console.log(as.attr('href'));*/
     //获取属性添加事件
    /*$('#images li:first').click(function(){
 
     //删除属性
     var imgs = $('#images').find('img').first();
 
     // console.log(imgs);
     imgs.removeAttr('src');
 
    })*/
 
    //添加类名
     //$('#images li').eq(4).addClass('cur');
 
    //移除类名
    //只是移除值
    //$('#images li:nth-child(2)').removeClass('w');
    //将类名与值全部移除
    //$('#images li:nth-child(2)').removeAttr('class');
  </script>
</html>
游鹄君2025/8/24大约 57 分钟jqueryjquery前端
其他操作(获取高宽和偏移量)1offset01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>其他操作(获取高宽和偏移量)</title>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #all{width:400px;height:400px;border:solid 1px blue;position:absolute;left:100px;top:50px;}
    #dvs{width:150px;height:200px;border:solid 1px green;position:absolute;left:30px;top:20px;}
  </style>
</head>
<body style="width:1600px; height:1600px">
  <div id='all'>
    <div id='dvs'></div>
  </div>
</body>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
  
  //获取相对于文档的偏移量
  var a =$('#dvs').offset();
  console.log(a);
    //向下偏移
  console.log(a.top);
    //向右偏移
  console.log(a.left);
  
  //获取相对父级的偏移
  var b=$('#dvs').position();
  console.log(b);
    //向下偏移
  console.log(b.top);
    //向右偏移
  console.log(b.left);
 
  // 获取或设置滚动条的位置
  //设置文档的隐藏的距离--->带参数
  $(window).scrollTop(100);
  $(window).scrollLeft(200);
  //获取文档的隐藏的距离--->不带参数
  var c=$(window).scrollTop();
  var d=$(window).scrollLeft();
 
  console.log(c);
  console.log(d);
 
  //获取可视区域的宽和高
  var e=$(window).width();
  var f=$(window).height();
 
  console.log(e);
  console.log(f);
 
  //获取文档的宽和高
  var g=$(document).width();
  var h=$(document).height();
 
  console.log(g);
  console.log(h);
 
  //获取标签元素的宽和高
 
  var i=$('#all').width();
  var j=$('#all').height();
 
  console.log(i);
  console.log(j);
 
 
</script>
</html>
游鹄君2025/8/24大约 1 分钟jqueryjquery前端
节点操作3jiedian01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节点操作</title>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #all{width:800px;height:300px;border:solid 1px blue;margin:30px auto;overflow:auto;}
    .cur{width:100px;height:100px;float:left;margin:5px;border-radius:50%;}
  </style>
</head>
<body>
  <button>尾部插入节点</button>
  <button>头部插入节点</button>
  <button>外部尾部插入节点</button>
  <button>外部头部插入节点</button>
  <button>删除节点</button>
  <button>清空节点</button>
  <button>替换节点</button>
  <button>克隆节点</button>
  <button>包裹节点</button>
  <button>解除包裹</button>
  
  <div id='all'></div>
 
</body>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
  //封装创建div节点函数
  function createDiv()
  {
    //创建div节点
    var dvs=$('<div class="cur"></div>');
    //添加随机的背景颜色 
    //注意使用css时 如果要添加多个样式属性$(element).css({名:"值",名:"值"})的方式
    dvs.css({background:'rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')',border:'solid 10px rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')'});
    return dvs;
  }
 
  //随机数
  function rand(m,n)
  {
    return Math.ceil(Math.random()*(n-m+1))+(m-1);
  }
 
  //在操作的元素内 相对于创建的节点尾部插入节点
  $('button').eq(0).click(function(){
    //alert(1234);
    var dv=createDiv();
    //第一种
    //$('#all').append(dv);
    //第二种
    dv.appendTo('#all');
  });
 
  //在操作的元素内 相对于创建的节点头部插入节点
  $('button:eq(1)').click(function(){
    var dv=createDiv();
    //第一种
    //$('#all').prepend(dv);
    //第二种
    dv.prependTo('#all');
  });
 
  //在操作的元素外 相对操作的节点尾部插入节点
 
  $('button:nth-child(3)').click(function(){
    var dv=createDiv();
    //第一种
    //$('#all').after(dv);
    //第二种
    dv.insertAfter('#all');
  });
 
  //在操作的元素外 相对操作的节点头部插入节点
  $('button:nth-child(4)').click(function(){
    var dv=createDiv();
    //第一种
    //$('#all').before(dv);
    //第二种
    dv.insertBefore('#all');
  });
  
  //在操作的元素内 删除节点
  $('button:nth-child(5)').click(function(){
 
    $('#all div').first().remove();
  });
 
  //在操作的元素内 清除节点
  $('button:eq(5)').click(function(){
 
    $('#all').empty();
  });
 
  //在操作的元素内 替换节点
  $('button:nth-child(7)').click(function(){
 
    //alert(1234);
 
    $('#all div').eq(1).replaceWith(createDiv());
  });
 
  //克隆节点
  $('button:nth-child(8)').click(function(){
    //第一种
    //$('#all div').eq(2).clone(true).appendTo('#all');
    //第二种
    //获取元素
    var dv=$('#all div').eq(2);
    //克隆
    var dvc=dv.clone(true);
    //确定克隆节点位置
    //dvc.prependTo('#all');
    dvc.insertAfter('#all');
  });
 
  //包裹节点
  $('button:nth-child(9)').click(function(){
    $('#all').wrap('<div class="info"></div>');
    $('.info').css({width:'100%',height:'auto',border:'solid 2px rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')',padding:'5px'});
  });
 
  //解除包裹
  $('button:nth-child(10)').click(function(){
    $('#all').unwrap();
  });
</script>
</html>
游鹄君2025/8/24大约 2 分钟jqueryjquery前端
克隆4clone01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery 克隆</title>
  <style type="text/css">
    li{width:120px;height:40px;border:solid 2px orange;text-align:center;line-height:40px;list-style:none;cursor:pointer;}
  </style>
</head>
<body>
  <button>克隆</button>
  <li><a href="#">军事</a></li>
</body>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
  $('button').on('click',function(){
    
    //alert(1234);
    //克隆
    //注意:重点^^^^^^^^^^^ 只有JQuery的clone(true),才可以将元素本身的事件一起克隆
    //没有true或者原生有true都没有办法克隆事件^^^^^^^^^^^^^^^^
    //第一种办法   
   //$('li').first().clone(true).appendTo('body');
 
    //第二种办法 拆开写
    var lis=$('li').eq(0).clone(true);
 
    $('body').append(lis);
  });
 
  //li元素添加事件
  $('li').click(function(){
    alert(1234);
  });
</script> 
</html>
游鹄君2025/8/24小于 1 分钟jqueryjquery前端
5元素节点选取操作实例5xuanxiang01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元素节点选取操作实例</title>
  <style type="text/css">
  *{margin:0px;padding:0px;}
  table{width:500px;height:300px;margin:0px auto;margin-top:30px;border-collapse:collapse}
  table td{text-align:center;}
  </style>
</head>
<body>
  <table border='1'>
    <caption><h1>人民艺术家排行榜</h1></caption>
    <tr>
     <th></th>
     <th>序号</th>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
     <th>作品</th>
     <th>操作</th>     
    </tr>
    <tr>
     <td><input type="checkbox" name='ids[]'></td>
     <td>1</td>
     <td>宋江</td>
     <td>男</td>
     <td>38</td>
     <td>水浒传</td>
     <td><button class='del'>删除</button></td>
    </tr>
    <tr>
     <td><input type="checkbox" name='ids[]'></td>
     <td>2</td>
     <td>孙悟空</td>
     <td>男</td>
     <td>500</td>
     <td>西游记</td>
     <td><button class='del'>删除</button></td>
    </tr>
    
    <tr>
     <td><input type="checkbox" name='ids[]'></td>
     <td>3</td>
     <td>诸葛亮</td>
     <td>男</td>
     <td>49</td>
     <td>三国演义</td>
     <td><button class='del'>删除</button></td>
    </tr>
    <tr>
     <td><input type="checkbox" name='ids[]'></td>
     <td>4</td>
     <td>薛宝钗</td>
     <td>男</td>
     <td>30</td>
     <td>红楼梦</td>
     <td><button class='del'>删除</button></td>
    </tr>
    <tr>
     <td><input type="checkbox" name='ids[]'></td>
     <td>5</td>
     <td>苍老师</td>
     <td>女</td>
     <td>不详</td>
     <td>太多了</td>
     <td><button class='del'>删除</button></td>
    </tr>
    <tr>
     <td colspan='7'>
     <button id='all'>全选</button>
     <button id='noall'>全不选</button>
     <button id='fall'>反选</button>
     <button id='pall'>批量删除</button>
     </td>
    </tr>     
  </table>
</body>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
  <script type="text/javascript">
 
    //全选
    $('#all').click(function(){
     //alert('1234');
     //第一种
     //$(':checkbox').attr('checked','checked');
     //第二种
     $(':checkbox').attr('checked',true);
 
    });
 
    //全不选
    $('#noall').on('click',function(){
     //第一种
     //$(':checkbox').removeAttr('checked');
     //第二种
     $(':checkbox').attr('checked',false);
 
    });
 
    //反选
    $('#fall').on('click',function(){
     //遍历
     $(':checkbox').each(function(){
       //第一种方法
       /*var ce=$(this).attr('checked');
       if(ce)
       {
         $(this).attr('checked',false);
       }
       else
       {
         $(this).attr('checked',true);
       }*/
       //第二种方法
       this.checked=!this.checked;
     });
    });
 
    //删除
    $('.del').click(function(){
     //alert(1234);
     //检测那个checked是否被选中
     var ce=$(this).parents('tr').find(':checkbox');
     //console.log(ce);//数组对象 因为可以设置多个属性
     if(ce[0].checked)
     {
       //删除整行
       $(this).parents('tr').remove();
     }
     
    });
 
    //批量删除
    $('#pall').on('click',function(){
     //alert(1234);
     //遍历
     $(':checkbox').each(function(){
       //检测是否被选中
       if(this.checked)
       {
         //删除
         $(this).parents('tr').remove();
       }
     });
    });
  </script>
</html>
游鹄君2025/8/24大约 2 分钟jqueryjquery前端
6JQuery事件1event01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuety 事件</title>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
</html>
  <style type="text/css">
    li{width:100px;height:40px;border:solid 1px red;}
  </style>
</head>
<body> 
  <script type="text/javascript">
    //alert($);
    //页面文档加载事件
    // 第一种样式
    /*$(document).ready(function(){
     $('button').click(function(){
       alert(1234);
     })
    });
    */
    //第二种样式
    $(function(){
     //基本事件
     /*$('button').click(function(){
       alert(1234);
     })*/
     //方法事件
     /*$('button').bind('click',function(){
       alert(11234);
     });
*/
     //解绑
     /*$('button').unbind();*/
 
     //动态绑定事件 据说只有低版本能用 不同于clone
     $('button').click(function(){
       $('<li>军事</li>').appendTo('body');
     })
 
     $('li').live('click',function(){
       alert(1234);
     })
    })
  </script>
  <button >单击</button>
  <li>体育</li>
</body>
</html>
游鹄君2025/8/24小于 1 分钟jqueryjquery前端
ajax

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax</title>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
</head>
<body>
  <button>get方式</button>
  <button>post方式</button>
  <button>ajax通用方式异步</button>
  <button>ajax通用方式同步</button>
  
  <script type="text/javascript">
  //get方式
  $('button').eq(0).click(function(){
    //alert(1234);
    //1.参数 服务器的地址脚本
    //2.参数  参数
    //3.参数  回调函数  data 是服务器返回的结果 
    //4可选参数 'json' 解析返回的json字符串
    $.get('2ajax_get.php',{id:100,name:'www'},function(data){
     //console.log(data);
     //第一种方法
     //eval('var arr ='+data);
     //console.log(data);
 
     //第二种方法 JSON.parse();
     /*JSON.parse(data);
     console.log(data);*/
 
     //第三种方法 可选参数
     console.log(data);
     console.log(data.id);
     console.log(data.name);
 
 
    },'json')
  })
 
  //post方式
  $('button').eq(1).click(function(){
 
    $.post('2ajax_post.php',{id:20,pid:100},function(data){
       console.log(data);
       console.log(data.id);
       console.log(data.pid);
    },'json')
  })
 
  //ajax 通用方式 异步
  $('button').eq(2).click(function(){
    $.ajax({
     url:"2ajax_self.php",
     data:"id=30&&name=shuang",
     dataType:'json',
     type:"GET",
     success:function(data){
 
         consol.log(data);
     },
     error:function(){
       alert('error');
     },
     timeout:3000,
     async:true
 
    })
    
  })
 
  //ajax 通用方式 同步
  var i=100;
  $('button').eq(3).click(function(){
    $.ajax({
     url:"2ajax_self.php",
     data:"id=30&&name=shuang",
     //dataType:'json',
     type:"GET",
     success:function(data){
         console.log(i=i + parseInt(data));
     },
     error:function(){
       alert('error');
     },
     timeout:3000,
     async:false
 
    })
    alert(i);
  })
  </script>
</body>
</html>
游鹄君2025/8/24大约 1 分钟jqueryjquery前端
特效3texiao01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>特效</title>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
  <script type="text/javascript" src='jquery-color.js'></script>
  <style type="text/css"> 
    
    #dvs{
    width:300px;
    height:300px;
    border:solid 2px blue;
    background:orange;
    position:absolute;
  }
 
  </style>
</head>
<body>
  <button>显示</button>
  <button>隐藏</button>
  <button>渐隐</button>
  <button>渐显</button>
  <button>向下显示</button>
  <button>向上隐藏</button>
  <button>动画效果</button>
  <button>延时</button>
  <button>停止</button>
  <div id='dvs'></div>
</body>
  <script type="text/javascript">
    //隐藏
    $('button').eq(1).click(function(){
     //alert(1234);
     //$('#dvs').hide();
     //缩放渐变隐藏
     $('#dvs').hide(3000);
    })
 
    //显示
    $('button').eq(0).click(function(){
     //alert(1234);
     //$('#dvs').show();
     //缩进渐变显示
     $('#dvs').show(2000);
    })
 
    //渐隐
    $('button').eq(2).click(function(){
     
     //$('#dvs').fadeOut('fast');
     
     $('#dvs').fadeOut(3000);
    })
 
    //渐现
    $('button').eq(3).click(function(){
 
     //$('#dvs').fadeIn('slow');
     
     $('#dvs').fadeIn(3000);
    })
 
    //向下显示
    $('button').eq(4).click(function(){
     
     //$('#dvs').slideDown('fast');
     $('#dvs').slideDown(5000);    
    })
 
    //向上隐藏
    $('button').eq(5).click(function(){
 
     //$('#dvs').slideUp('slow');
     $('#dvs').slideUp(5000);  
    })
 
    //动画效果
    $('button').eq(6).click(function(){     
     $('#dvs').animate({
       left:'600px',
       top:'100px',
       borderRadius:'50%',
       backgroundColor:'blue'
     },5000);  
    })
 
    //延时
    $('button').eq(7).click(function(){
     $('#dvs').slideUp(2000).delay(1000).fadeIn(1000);
    })
 
    //停止
    $('button').eq(8).click(function(){
     $('#dvs').stop();
    })
  </script>
</html>
游鹄君2025/8/24小于 1 分钟jqueryjquery前端
轮播4lunbo01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
  <script type="text/javascript" src='jquery-color.js'></script>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #all{position:absolute;}
    #uls{position:absolute;left:100px;top:50px;list-style:none;}
    #uls li{width:1190px;height:410px;position:absolute;}
    #dian{width:180px;height:40px;list-style:none;background:rgba(255,255,255,0.5);position:absolute;left:590px;top:400px;text-align:center;line-height:40px;border-radius:10px;}
    #dian li{width:15px;height:15px;float:left;background:white;border-radius:50%;margin:15px 10px 10px 5px;cursor:pointer;}
    #dian .cur{background-color:#db192a;}
  </style>
</head>
<body>
  <div>
  <!-- 轮播图 -->
  <ul id='uls'>
    <li><img src="./lunbo/1.jpg" alt="" width='100%'></li>
    <li><img src="./lunbo/2.jpg" alt="" width='100%'></li>
    <li><img src="./lunbo/3.jpg" alt="" width='100%'></li>
    <li><img src="./lunbo/4.jpg" alt="" width='100%'></li>
    <li><img src="./lunbo/5.jpg" alt="" width='100%'></li>
    <li><img src="./lunbo/6.jpg" alt="" width='100%'></li>
  </ul>
 
  <!-- 点控制器 -->
  <ul id='dian'>  
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  </div>
</body>
  <script type="text/javascript">
 
 
    //1让图片第一张显示出来 其他图片隐藏 后面还需要用到封装函数
    //调用
    show(0);
    function show(i)
    {
     $('#uls li').eq(i).show();
     $('#uls li').eq(i).siblings().hide();
 
     //4让点改变颜色(因为显示哪张图,哪个对应的点就应该改变颜色)
     $('#dian li').eq(i).addClass('cur');
     $('#dian li').eq(i).siblings().removeClass('cur');
    }
    //2让图片动起来 
    var i=1;//因为已经调用过一次,所以这里设置为1
     //7为了停止轮播在这里声明一个变量
    var into=null;
    //9封装轮播功能
    function moves()
    {
     into = setInterval(function(){
       //分析是让显示函数的i值增加即可
       show(i++);
       //防止越界 实现轮播
       if(i>5)
       {
         i=0;
       }
     },2000);
    }
    //调用函数
    moves();
    //3给图片加点控制器 分析为了方便定位在最外层再套一层div
 
    //5实现点控制器功能 也就是鼠标移入 移出事件
    $('#dian li').hover(function(){
     //6先停止 轮播
     clearInterval(into);
     //7分析要分辨出那个点,就是要获取那个点的下标
     i=$(this).index();
     //调用函数 这里需要填入i++ 先用后加,因为当鼠标移走后需要继续轮播
     show(i++);
    },function(){
     //8因为移走后又需要轮播 所以封装轮播函数
     moves();
    });
  </script>
</html>
游鹄君2025/8/24大约 2 分钟jqueryjquery前端
小例子5xiaolizi01.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>小例子</title>
  <style type="text/css">
    #uls{display:none;position:absolute;}
  </style>
</head>
<body>
  <marquee id='text' behavior="" direction="left" style='font-size:40px;width:800px;margin-left:300px'>热烈庆祝中国人民解放军建军90周年</marquee>
  <!-- <marquee id='text' behavior="" direction="right" style='font-size:40px;width:800px;margin-left:300px'>热烈庆祝中国人民解放军建军90周年</marquee> -->
 
  <ul id='uls'>
    <li>韩部署剩余萨德再激化矛盾 乐天在华已损失千亿</li>
    <li>中国空军惊现抄底式改装：由歼7战机直接用上歼10B</li>
    <li>中国受美军SR72威胁有多大 加速研发一新型武器应对</li>
    <li>人民日报:《战狼2》为啥火得“不像话”</li>
    <li>百度外卖或将卖给饿了么 外卖价格可能上涨</li>
    <li>北京试点身份证自助申请办理 照片不满意可重拍</li>
    <li>男子把10吨雕像立小区门口 只为朋友串门好认路</li>
    <li>乐视手机维修点陆续关闭，贾跃亭仍身处美国</li>
    <li>魅族PRO 7系列发布 没有摆脱“万年联发科”的帽子</li>
  </ul>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
  <script type="text/javascript">
  setInterval(function(){
    //从下向上滚动效果
    //$('#uls li').last().hide().slideDown(1000).prependTo('#uls');
 
    //自下向上的滚动效果
    /*$('#uls li').first().hide(1000).slideUp(1000,function(){
         $(this).appendTo('#uls').show(1000);
    })*/
    
    //$('#uls').slideDown(2000).hide(1000);
 
    $('#uls').slideDown(1000).animate({top:'150px'},1200).fadeOut('fast');
  
    
  },4000)
  
  </script>
</body>
</html>
游鹄君2025/8/24大约 1 分钟jqueryjquery前端
游鹄君的博客
Copyright © 2025 游鹄君