jQuery 轮播插件,如何绑定一组DIV实现跟IMG一样的轮播效果

网上摘的代码,简单的轮播jq
我想写一个新一组DIV,绑定原来轮播div,跟原轮播div兄弟关系,但是能实现同步的轮播效果,显示轮播图1的时候同时显示新DIV1
,求助。。新手不懂改jQ,因为不懂js。。

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jquery轮播效果图 </title> 
<script src="file:///C|/Users/qqbnb/Desktop/web/js/jquery-3.1.0.js"></script> 
<style type="text/css"> 
 * { 
  padding: 0px; 
  margin: 0px; 
 } 
 a { 
  text-decoration: none; 
 } 
 ul { 
  list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
  width: 650px; 
  height: 413px; 
 } 
 .slider { 
  text-align: center; 
  margin: 30px auto; 
  position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
  position: absolute; 
  z-index: 8; 
 } 
 .slider-panel { 
  position: absolute; 
 } 
 .slider-panel img { 
  border: none; 
 } 
 .slider-extra { 
  position: relative; 
 } 
 .slider-nav { 
  margin-left: -51px; 
  position: absolute; 
  left: 50%; 
  bottom: 4px; 
 } 
 .slider-nav li { 
  background: #3e3e3e; 
  border-radius: 50%; 
  color: #fff; 
  cursor: pointer; 
  margin: 0 2px; 
  overflow: hidden; 
  text-align: center; 
  display: inline-block; 
  height: 18px; 
  line-height: 18px; 
  width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
  background: blue; 
 } 
 .slider-page a{ 
  background: rgba(0, 0, 0, 0.2); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
  color: #fff; 
  text-align: center; 
  display: block; 
  font-family: "simsun"; 
  font-size: 22px; 
  width: 28px; 
  height: 62px; 
  line-height: 62px; 
  margin-top: -31px; 
  position: absolute; 
  top: 50%; 
 } 
 .slider-page a:HOVER { 
  background: rgba(0, 0, 0, 0.4); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
  left: 100%; 
  margin-left: -28px; 
 } 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  var length, 
   currentIndex = 0, 
   interval, 
   hasStarted = false, 
   t = 3000;  
  length = $('.slider-panel').length; 
  $('.slider-panel:not(:first)').hide(); 
  $('.slider-item:first').addClass('slider-item-selected'); 
  $('.slider-page').hide(); 
  $('.slider-panel, .slider-pre, .slider-next').hover(function() { 
   stop(); 
   $('.slider-page').show(); 
  }, function() { 
   $('.slider-page').hide(); 
   start(); 
  }); 
  $('.slider-item').hover(function(e) { 
   stop(); 
   var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
   currentIndex = $(this).index(); 
   play(preIndex, currentIndex); 
  }, function() { 
   start(); 
  }); 
  $('.slider-pre').unbind('click'); 
  $('.slider-pre').bind('click', function() { 
   pre(); 
  }); 
  $('.slider-next').unbind('click'); 
  $('.slider-next').bind('click', function() { 
   next(); 
  }); 
  function pre() { 
   var preIndex = currentIndex; 
   currentIndex = (--currentIndex + length) % length; 
   play(preIndex, currentIndex); 
  } 
  function next() { 
   var preIndex = currentIndex; 
   currentIndex = ++currentIndex % length; 
   play(preIndex, currentIndex); 
  } 
  function play(preIndex, currentIndex) { 
   $('.slider-panel').eq(preIndex).fadeOut(500) 
    .parent().children().eq(currentIndex).fadeIn(1000); 
   $('.slider-item').removeClass('slider-item-selected'); 
   $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
  } 
  function start() { 
   if(!hasStarted) { 
    hasStarted = true; 
    interval = setInterval(next, t); 
   } 
  } 
  function stop() { 
   clearInterval(interval); 
   hasStarted = false; 
  } 
  start(); 
 }); 
</script> 
</head> 
<body> 
 <div class="slider"> 
  <ul class="slider-main"> 
   <li class="slider-panel"> 
    <img src="http://img4.imgtn.bdimg.com/it/u=533187501,2953408843&fm=206&gp=0.jpg">
   </li> 
   <li class="slider-panel"> 
  <img src="http://img5.imgtn.bdimg.com/it/u=3704303780,566844591&fm=206&gp=0.jpg">
   </li> 
   <li class="slider-panel"> 
    <img src="<img src="http://img5.imgtn.bdimg.com/it/u=1614013440,1930745513&fm=206&gp=0.jpg">
   </li> 
   <li class="slider-panel"> 
      <img src="http://img3.imgtn.bdimg.com/it/u=1133907788,3208642985&fm=206&gp=0.jpg">
   </li> 
  </ul> 
  <div class="slider-extra"> 
   <ul class="slider-nav"> 
    <li class="slider-item">1</li> 
    <li class="slider-item">2</li> 
    <li class="slider-item">3</li> 
    <li class="slider-item">4</li> 
   </ul> 
   <div class="slider-page"> 
    <a class="slider-pre" href="javascript:;;"><</a> 
    <a class="slider-next" href="javascript:;;">></a> 
   </div> 
  </div> 
 </div> 
</body> 
</html>
<body>
</body>
</html>

4个回答

你看是要这种效果吗,只不过不是滑动 是自己轮播 http://www.swiper.com.cn/api/Controller/2015/0308/216.html

<!DOCTYPE html>



Swiper demo
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">

<!-- Demo styles -->
<style>
html, body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
.swiper-container1,.swiper-container2 {
    width: 100%;
    height: 100px;
    margin-bottom:20px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
</style>



<!-- Swiper -->


Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10


<!-- Add Pagination -->

<div class="swiper-container2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>


<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.swiper-container1', {
    autoplay: 3000,
});
 var swiper2 = new Swiper('.swiper-container2', {
});

swiper1.params.control = swiper2;//需要在Swiper2初始化后,Swiper1控制Swiper2
swiper2.params.control = swiper1;//需要在Swiper1初始化后,Swiper2控制Swiper1
</script>



这个是可以直接用的,然后那里边引用的js在上边网站都可以找到

上边没传好,你看下这个吧,把引用的东西下载下来放到对应的文件夹内就直接能用了http://download.csdn.net/my

存在2个以上播放实例,应该做成类的形式
js图片特效
jquery焦点图

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jQuery 轮播插件,如何绑定一个DIV实现跟IMG一样的轮播效果

网上摘的代码,简单的轮播jq 我想写一个新的DIV,绑定原来轮播div,跟原轮播div兄弟关系,但是能实现同步的轮播效果,显示轮播图1的时候同时显示新DIV1 ,求助。。新手不懂改jQ ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轮播效果图 </title> <script src="file:///C|/Users/qqbnb/Desktop/web/js/jquery-3.1.0.js"></script> <style type="text/css"> * { padding: 0px; margin: 0px; } a { text-decoration: none; } ul { list-style: outside none none; } .slider, .slider-panel img, .slider-extra { width: 650px; height: 413px; } .slider { text-align: center; margin: 30px auto; position: relative; } .slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8; } .slider-panel { position: absolute; } .slider-panel img { border: none; } .slider-extra { position: relative; } .slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px; } .slider-nav .slider-item-selected { background: blue; } .slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: "simsun"; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; } </style> <script type="text/javascript"> $(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, t = 3000; length = $('.slider-panel').length; $('.slider-panel:not(:first)').hide(); $('.slider-item:first').addClass('slider-item-selected'); $('.slider-page').hide(); $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); }); function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } function stop() { clearInterval(interval); hasStarted = false; } start(); }); </script> </head> <body> <div class="slider"> <ul class="slider-main"> <li class="slider-panel"> <img src="http://img4.imgtn.bdimg.com/it/u=533187501,2953408843&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="http://img5.imgtn.bdimg.com/it/u=3704303780,566844591&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="<img src="http://img5.imgtn.bdimg.com/it/u=1614013440,1930745513&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="http://img3.imgtn.bdimg.com/it/u=1133907788,3208642985&fm=206&gp=0.jpg"> </li> </ul> <div class="slider-extra"> <ul class="slider-nav"> <li class="slider-item">1</li> <li class="slider-item">2</li> <li class="slider-item">3</li> <li class="slider-item">4</li> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div> </div> </body> </html> <body> </body> </html> ```

前端jquery 图片自动轮播

我想要实现图片的自动轮播,并且可以点击图片在新页面查看图片,刚开始的一次循环点击图片可以跳转新页面,可是之后的点击却无效 ``` ``` <!doctype ``` html> <html> <head> <meta charset="UTF-8"> <title>Demo13-2</title> <style> .container{width:300px;height:150px;margin:200px auto;} .left,.right{width:10%;height:100%;line-height:150px;text-align: center;float:left} .picbox{width:80%;height:100%;float:left;overflow: hidden;} .pic{position:relative;width:720px;overflow:visible} img{width:100%;height:100%} .img{width:240px;height:150px;float:left} </style> <script src="js/jquery-3.3.1.js"></script> <script> $(function(){ var stop =false; var index = -1; var pics = ["1","2","3"]; $.each(pics,function(index,value){ $(".pic").append($("<div class='img'><a href='img/"+value+".jpg'><image src='img/"+value+".jpg' /></a></div>")); }) $(".pic").hover(function(){stop=true;},function(){stop=false;}); setInterval(function(){ if(stop) return; var left = parseInt($(".pic").css("left"))-1; //alert(left); $(".pic").css({left:left}); if(left % 240 ==0) { index++; var w = parseInt($(".pic").css("width")) +240 ; $(".pic").css({"width":w}) $(".pic").append($("<div class='img'><image src='img/"+pics[index%pics.length]+".jpg' /></div>")); } },10); }) </script> </head> <body> <div class="container"> <div class="left"></div> <div class="picbox"> <div class="pic"></div> </div> <div class="right"></div> </div> </body> </html> ```

JQurey轮播图最后一张图片与第一张图片如何做到无缝轮播?并且轮播顺序能和前几张图片轮播顺序一样?

``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>opp手机官网3</title> <style> *{margin:0; padding:0;} li{list-style:none;} img{border:none;} a{color:#FFF; text-decoration:none;} .pic{width:1920px; height:630px; position:relative; overflow:hidden;} .pic ul{/*width:5760px;*/ position:absolute; left:0; border:1px solid #000;} .pic ul li{float:left;} .pic li img{ position:relative;} .pic .Tab{width:100%; text-align:center;position:absolute; bottom:5px;} .pic .Tab a.active{color:#F30;} </style> <script src="js/jquery.js"></script> <script> $(document).ready(function() { ​ var timer=null; ​ var oUl=$(".pic ul"); ​ var aLi=$(".pic ul li"); ​ var aImg=$(".pic ul li img"); ​ var imgWidth=1920; ​ oUl.css("width",imgWidth * aImg.length + 'px'); ​ var i=0; ​ timer=setInterval(function(){ ​ ​ i++; ​ ​ if(i==aImg.length){ ​ ​ ​ i=0; ​ ​ } ​ ​ oUl.animate({"left":"-"+imgWidth*i + 'px'},500); ​ },2000); }); </script> </head> <body> <div class="pic" id="pic"> <ul> <li> <img src="images/bg1.jpg"> </li> <li> <img src="images/bg2.jpg"> </li> <li> <img src="images/bg3.jpg"> </li> </ul> </div> </body> </html> ```

java web无法实现轮播功能

``` ```<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的首页</title> <link href="css/mian.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div id="fwslider" style="height:554px;"> <div class="slider_container"> <div class="slide" style="opacity:1; z-index:0; display:none;"> <img id="img1" src="img/img1.jpg"></div> <div class="slide" style="opactiy:1; z-index:1; display:block;"> <img id="img2" src="img/img2.jpg"></div> <div class="slide" style="opacity:1; z-index:0; display:none;"> <img id="img3" src="img/img3.jpg"></div> <div class="slide" style="opactiy:1; z-index:0; display:none;"> <img id="img4" src="img/img4.jpg"></div> <div class="slide" style="opacity:1; z-index:0; display:none;"> <img id="img5" src="img/img5.jpg"></div> </div> <div class="times" style="width:180px:"></div> <div class="slidePrev" style="left:0px;top=252px;"><span></span></div> <div class="slideNext" style="right:0px;top:252px;opacity:0.5;"><span></span></div> </div> </body> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/fwdlider.js"></script> </html> ``` ``` _打开网页只会显示一张图片,无法实现轮播功能。**** Eclipse2019 03 tomcat8.5_

一段关于轮播的jquery代码有些问题

老师实验指导书中给了这样一段代码 html: <DOCTYPE html> <html> <head> <title>实验2</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="slide.js"></script> <style type="text/css"> .slider { list-style: hidden; } .slider ul { list-style: none; margin: 0; padding: 0; } .slider ul li { margin: 0; padding: 0; display: block; list-style: none; } .slideitem { position: relative; } .tag { position: relative; } </style> </head> <body> <div class='slider'> <ul> <li id='li1' data-title='行到水穷处,坐看云起时'><a href='#'><img src='1.jpg' /></a></li> <li id='li2' data-title='远处蔚蓝天空下涌动着金色的麦浪...'><a href='#'><img src='2.jpg' /></a></li> <li id='li3' data-title='xyzxyzxyzxyz'><a href='#'><img src='3.jpg' /></a></li> </ul> </div> </body> </html> <script>$(".slider").slider();</script> js: $.fn.slider = function () { $(this).addClass('slider'); var id = $(this).attr('id'); var lis = $('.slider ul li'); var len = lis.length; var w = $('.slider').width(); var h = $('.slider').height(); $(lis).addClass('slideitem').each( function (i) { $(this).css({left: !i ? 0 : w, top: -i * h, 'z-index':i}); $(this).append("<div class='tag'>" + $(this).data('title') + "</div>"); }); var q = []; var i; for (i = 2; i <= len; ++i) q.push(i); q.push(1); $('#li1').addClass('cur'); setInterval(function(){ var cur = q.shift(); var zz = len; for (x in q) { var liid = '#li' + q[x]; $(liid).css({'z-index': zz--}); } q.push(cur); var liid = '#li' + cur; $('.cur').animate({left: -w}, 500); $(liid).animate({left: 0}, 500, function () { $('.cur').removeClass('cur').css({left: w, 'z-index': 0}); $(this).addClass('cur'); }) }, 2000); } 运行之后只能看见一张图片在轮播,求教

关于用jquery做的轮播图

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图展示</title> <style> * { padding: 0; margin: 0; border: none; list-style: none; } .box{ width:100%; height: 340px; position: relative; overflow: hidden; } .box ul{ position: relative; width:500%; height: 340px; } .box ul li{ float: left; width:20%; height:100%; z-index: 1; } li img{ width:100%; height:100%; } span{ width: 50px; height: 50px; font-size:180px; position: absolute; color: white; z-index: 4; } span:nth-of-type(1){ left: 50px; } span:nth-of-type(2){ right: 100px; } </style> </head> <body> <div class="box"> <span>&lt;</span> <span>&gt;</span> <ul> <li><img src="images/01.png" alt=""></li> <li><img src="images/02.png" alt=""></li> <li><img src="images/03.png" alt=""></li> <li><img src="images/04.png" alt=""></li> <li><img src="images/01.png" alt=""></li> </ul> </div> <script src="js/jquery-3.1.1.js"></script> <script> $(function (){ function moveL(){ $("ul").stop().animate({ left:"-="+parseInt($(".box").width())+"px" }); if($("ul").position().left<=-4*$(".box").width()){ $("ul").css("left",0); } } function moveR(){ $("ul").animate({ left:"+=1000px" }) } var timer = setInterval(moveL,1000); }) </script> </body> </html> ``` 代码是这些,问题很奇怪,当轮播到临界值的时候,css赋值left为0的时候会失败,通过输出left的值确实为0,可是图片竟然不会回到原位,如果把浏览器切换一下,就是最小化个1秒后打开就可以了,很莫名其妙,有大神懂吗

PHP jquery轮播位置

<div class="post-text" itemprop="text"> <p>I'm using php pagination to load different data from a text file. I am using a jquery carousel <a href="http://tympanus.net/Development/Elastislide/index4.html" rel="nofollow">http://tympanus.net/Development/Elastislide/index4.html</a> that is featured on each page created from the pagination. What I would like to do is, depending on which page you are on, the carousel will load in a different position. To get this working, I'm thinking I would need to change the jquery which loads on each created page?</p> <pre><code>&lt;script type="text/javascript"&gt; $('#carousel').elastislide({ imageW : 110, margin : 20, border : 4, easing : 'easeInBack', current : 12 }); &lt;/script&gt; </code></pre> <p>So if the pagination is on the page.php?p=12, the carousel would be on thumbnail 12? Example html:</p> <pre><code>&lt;div id="carousel" class="es-carousel-wrapper"&gt; &lt;div class="es-carousel"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="page.php?p=1"&gt;&lt;img src="images/img1.jpg" width="100" height="130" alt="image01" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="page.php?p=2"&gt;&lt;img src="images/img2.jpg" width="100" height="130" alt="image02" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>the pagination i'm using:</p> <pre><code>&lt;?php $data=file("students.txt"); $pages=0; foreach($data as $temp){ $x=explode("|",$temp); if($x[0]&gt;0){ $pages=$pages+1; } } if($_GET['p']){ $page=$_GET['p']; } if($_GET['i']){ $index=$_GET['i']; } if($index == "p"){ $page=$page-1; } if($index == "n"){ $page=$page+1; } if($page &lt; 1){ $page=1; } if($page &gt; $pages){ $page=$pages; } $line=$data[$page-1]; $fields=explode("|",$line); ?&gt; </code></pre> <p>I'm new to PHP and I really don't have a clue on how to put this together...</p> <p>Does anyone have any ideas how to make this work? :(</p> </div>

json数据库使用while循环轮播类型jquery json获取json的图像设置数据

<div class="post-text" itemprop="text"> <p>i have an problem where can i get the jquery code for this? i have a database with image i want a jquery like this to output in my website </p> <p>i will make a slider that will output like that</p> <p>it will give me a slide that gives me that output i already have a database and php code that is working </p> <p><img src="https://i.stack.imgur.com/ujajm.png" alt="australia"></p> <p>this is an australian government for missing person and our site is like this i want a jquery like this but i don't have the code of the original to do that</p> <p>missingpersons australia is the link below i can't post here the link because it violate the rules of posting links :D</p> <p>tried</p> <p>jquery from search,div,table to output basic jquery don't know advance commands for jquery</p> <p>tried this link the only problem is the while loop for the data</p> <blockquote> <p><a href="http://demo1.krablekod.ru/agile_carousel/examples/agile_carousel_multiple_slides_visible_example.html" rel="nofollow noreferrer">jquerydata</a></p> </blockquote> <p>i edited the carousel the problem is how will i put it?</p> <pre><code>&gt; &lt;?php &gt; include_once('includes/dbConnect.php'); &gt; &gt; &gt; ?&gt; &gt; &lt;?php &gt; &gt; $query=mysql_query("select * from persons order by rand()"); &gt; &gt; while($test = mysql_fetch_array($query)) { &gt; &gt; } &gt; &gt; &gt; ?&gt; &gt; [ &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='banner_bike.jpg' alt='Bike'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; }, &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='banner_paint.jpg' alt='Paint'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; }, &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='banner_bike.jpg' alt='Bike'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; }, &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='banner_paint.jpg' alt='Paint'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; }, &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='banner_bike.jpg' alt='Bike'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; }, &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='banner_paint.jpg' alt='Paint'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; }, &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='Penguins.jpg' alt='Tunnel'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; }, &gt; { &gt; "content": "&lt;div class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' src='Penguins.jpg' alt='Tunnel'&gt;&lt;/a&gt;&lt;a &gt; class='caption' href='#'&gt;Sample Carousel Pic Goes Here And The Best &gt; Part is that...&lt;/a&gt;&lt;/div&gt;", &gt; "content_button": "&lt;div class='thumb'&gt;&lt;img src='f2_thumb.jpg' alt='bike is nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place &gt; Holder&lt;/p&gt;" &gt; } &gt; &gt; ] </code></pre> <p>here's the query of my image and name</p> <pre><code>&gt; $query=mysql_query("select * from persons order by date desc LIMIT &gt; 0,10 "); &gt; &gt; &gt; &lt;img height=200 width=200 src=' upload/". $test['Image'] ."'/&gt; &lt;a href &gt; &gt; ='profile.php?PersonID=$id'&gt; ".$test['LastName'].", ". $test['FirstName']." ". $test['MiddleName']."&lt;/a&gt; </code></pre> <p>i'm using this while loop for my search and it calls correctly. </p> <p>and here's the json code </p> <pre><code>&gt; &lt;script&gt; &gt; &gt; $.getJSON("agile_carousel_data.php", function (data) { &gt; &gt; $("#multiple_slides_visible").agile_carousel({ &gt; carousel_data: data, &gt; carousel_outer_height: 230, &gt; carousel_height : 200, &gt; slide_height : 200, &gt; carousel_outer_width : 480, &gt; slide_width : 260, &gt; number_slides_visible: 3, &gt; transition_time : 330, &gt; control_set_1: "previous_button,next_button", &gt; control_set_2: "group_numbered_buttons", &gt; persistent_content: "&lt;p class='persistent_content'&gt;Agile Carousel Example: Multiple Slides Visible&lt;/p&gt;" &gt; }); &gt; &gt; }) &gt; &gt; &lt;/script&gt; </code></pre> <p>this is the content of my $data in data.php</p> <pre><code>&gt; `&lt;?php include_once('includes/dbConnect.php'); $data = array(); while &gt; ($test = mysql_fetch_array($query)) { $data[]['content'] = "&lt;div &gt; class='slide_inner'&gt;&lt;a class='photo_link' href='#'&gt;&lt;img class='photo' &gt; src='{$test['image']}' alt='Bike'&gt;&lt;/a&gt;&lt;a class='caption' &gt; href='#'&gt;Sample Carousel Pic Goes Here And The Best Part is &gt; that...&lt;/a&gt;&lt;/div&gt;" $data[]['content_button'] = "&lt;div &gt; class='thumb'&gt;&lt;img src='{$test['thumb']}' alt='bike is &gt; nice'&gt;&lt;/div&gt;&lt;p&gt;Agile Carousel Place Holder&lt;/p&gt;" } echo &gt; json_encode($data); ?&gt; ` </code></pre> <p>the code above won't give me anything i included my database connection but still nothing won't output anything here's the link again <a href="http://demo1.krablekod.ru/agile_carousel/examples/agile_carousel_multiple_slides_visible_example.html" rel="nofollow noreferrer">link for the original website</a></p> </div>

是不是在服务器上img标签不能显示本地图片啊

[code="html"] <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.6.2.js"></script> <script language="javascript"> $(function(){ $("#f1").change(function(){ $("#img1").attr("src","file:///"+$("#f1").val()); alert("12dqwdwq"+"file:///"+$("#f1").val()) }) }); </script> <style type="text/css"> #large{position:absolute;display:none;z-index:999;} </style> </head> <body> <div id="demo"> <input id="f1" name="f1" type="file" /> <img id="img1" width="60" height="60"> </div> </body> </html>[/code] 点击浏览图片功能,为什么静态情况下就可以,发布到服务器上就不可以了呢

点击事件怎么触发另一个事件

``` <div class="whitetitle"> <span class="wtitle1">鸥迪足道室内装饰/</span> <span class="wtitle2">INTERIOR DECORATION</span> <div class="arrowlr"> <img src="../images/3g/quyewenhua/z.png" onclick="left()"/> <img src="../images/3g/quyewenhua/y.png" onclick="right()"/> </div> </div> <div class="clear"></div> <div id="slider"> <ul class="slides clearfix"> <li> <img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"><img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"> <img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"><img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"> </li> <li> <img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"><img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"> <img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"><img class="responsive" src="../images/3g/quyewenhua/culture_03.jpg"> </li> </ul> <ul class="controls"> <li><img src="../images/3g/quyewenhua/z.png" alt="previous" ></li> <li><img src="../images/3g/quyewenhua/y.png" alt="next" ></li> </ul> </div> 我想通过点击class=arrowlr下的left()和right() 去触发class=controls下的img的点击效果,这两个img点击有图片轮播的效果 谢谢啦 ```

轮播图只能点击最后一个连接,其他的不跟随轮播点击

``` <script type="text/javascript"> ;(function($){ $.fn.lubo=function(options){ var defaults={ } var options=$.extend(defaults,options); return this.each(function(){ var _lubo=jQuery('.lubo'); var _box=jQuery('.lubo_box'); var _this=jQuery(this); var luboHei=_box.height(); var Over='mouseover'; var Out='mouseout'; var Click='click'; var Li="li"; var _cirBox='.cir_box'; var cirOn='cir_on'; var _cirOn='.cir_on'; var cirlen=_box.children(Li).length; var luboTime=2000; var switchTime=400; cir(); Btn(); function cir(){ _lubo.append('<ul class="cir_box"></ul>'); var cir_box=jQuery('.cir_box'); for(var i=0; i<cirlen;i++){ cir_box.append('<li style="" value="'+i+'"></li>'); } var cir_dss=cir_box.width(); cir_box.css({ left:'50%', marginLeft:-cir_dss/2, bottom:'0' }); cir_box.children(Li).eq(0).addClass(cirOn); function Btn(){ _lubo.append('<div class="lubo_btn"></div>'); var _btn=jQuery('.lubo_btn'); _btn.append('<div class="left_btn"><</div><div class="right_btn">></div>'); var leftBtn=jQuery('.left_btn'); var rightBtn=jQuery('.right_btn'); leftBtn.bind(Click,function(){ var cir_box=jQuery(_cirBox); var onLen=jQuery(_cirOn).val(); _box.children(Li).eq(onLen).stop(false,false).animate({ opacity:0 },switchTime); if(onLen==0){ onLen=cirlen; } _box.children(Li).eq(onLen-1).stop(false,false).animate({ opacity:1 },switchTime); cir_box.children(Li).eq(onLen-1).addClass(cirOn).siblings().removeClass(cirOn); }) rightBtn.bind(Click,function(){ var cir_box=jQuery(_cirBox); var onLen=jQuery(_cirOn).val(); _box.children(Li).eq(onLen).stop(false,false).animate({ opacity:0 },switchTime); if(onLen==cirlen-1){ onLen=-1; } _box.children(Li).eq(onLen+1).stop(false,false).animate({ opacity:1 },switchTime); cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn); }) } int=setInterval(clock,luboTime); function clock(){ var cir_box=jQuery(_cirBox); var onLen=jQuery(_cirOn).val(); _box.children(Li).eq(onLen).stop(false,false).animate({ opacity:0 },switchTime); if(onLen==cirlen-1){ onLen=-1; } _box.children(Li).eq(onLen+1).stop(false,false).animate({ opacity:1 },switchTime); cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn); } _lubo.bind(Over,function(){ clearTimeout(int); }); _lubo.bind(Out,function(){ int=setInterval(clock,luboTime); }); jQuery(_cirBox).children(Li).bind(Over,function(){ var inde = jQuery(this).index(); jQuery(this).addClass(cirOn).siblings().removeClass(cirOn); _box.children(Li).stop(false,false).animate({ opacity:0 },switchTime); _box.children(Li).eq(inde).stop(false,false).animate({ opacity:1 },switchTime); }); }); } })(jQuery); <script type="text/javascript"> $(function(){ $(".lubo").lubo({ }); }) </script> <div class="lubo"> <ul class="lubo_box"> <li style=" opacity: 1;filter:alpha(opacity=100);"><a href=""><img src="1.jpeg"></a></li> <li><a href="2.html"><img src="2.jpeg"></a></li> <li><a href="2.html"><img src="3.jpeg"></a></li> <li><a href="2.html"><img src="4.jpeg"></a></li> <li><a href="2.html"><img src="5.jpeg"></a></li> <li><a href="2.html"><img src="2.jpeg"></a></li> <li><a href="2.html"><img src="3.jpeg"></a></li> <li><a href="2.html"><img src="4.jpeg"></a></li> <li><a href="1.html"><img src="5.jpeg"></a></li> </ul> </div> ```

怎么把网页1的导航完美移植到网页2的轮播图上边的位置使导航和轮播图结合成一个网页

网页1带导航的 <!DOCTYPE html> <html> <head> <link rel="icon" href="images/favicon.ico" type="img/x-ico" /> <title>山东金泽网络科技有限公司</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name="keywords" content="" /> <script type="application/x-javascript"> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" /> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link href="css/simpleLightbox.css" rel='stylesheet' type='text/css' /> <link href="css/fontawesome-all.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Poppins:100i,200,200i,300,400,400i,500,500i,600,600i,700,700i,800" rel="stylesheet"> </head> <body> <header> <div class="header_top" id="home"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <a class="navbar-brand" href="index.html"> <i class="fab fa-digital-ocean"></i> 金泽科技</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto tp-nav text-center"> <li class="nav-item active"> <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">关于</a> </li> <li class="nav-item"> <a class="nav-link" href="了解银豹.html">解决方案</a> </li> <li class="nav-item"> <a class="nav-link" href="blog.html">博客</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">联系我们</a> </li> </ul> <form action="#" method="post" class="form-inline my-2 my-lg-0 search"> <input class="form-control mr-sm-2" type="search" placeholder="点击输入搜索..." name="Search" required> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button> </form> </div> </nav> </div> </header> <!--//header--> </body> </html> ``` 网页2 轮播图代码: ``` <!DOCTYPE html> <html> <head> <link rel="icon" href="images/favicon.ico" type="img/x-ico" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>山东金泽网络科技有限公司</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="c-banner"> <div class="banner"> <ul> <li><img src="img/lunbo1.jpg"></li> <li><img src="img/lunbo2.jpg"></li> <li><img src="img/lunbo3.jpg"></li> </ul> </div> <div class="nexImg"> <img src="img/nexImg.png" /> </div> <div class="preImg"> <img src="img/preImg.png" /> </div> <div class="jumpBtn"> <ul> <li jumpImg="0"></li> <li jumpImg="1"></li> <li jumpImg="2"></li> </ul> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> //定时器返回值 var time=null; //记录当前位子 var nexImg = 0; //用于获取轮播图图片个数 var imgLength = $(".c-banner .banner ul li").length; //当时动态数据的时候使用,上面那个删除 // var imgLength =0; //设置底部第一个按钮样式 $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //页面加载 $(document).ready(function(){ // dynamicData(); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }); //点击上一张 $(".preImg").click(function(){ //清楚定时器 clearInterval(time); var nowImg = nexImg; nexImg = nexImg-1; console.log(nexImg); if(nexImg<0){ nexImg=imgLength-1; } //底部按钮样式设置 $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nowImg).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); //轮播淡入淡出 $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){ $(".c-banner ul li").eq(nowImg).css("display","none"); }); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }) //点击下一张 $(".nexImg").click(function(){ clearInterval(time); intervalImg(); time =setInterval(intervalImg,3000); }) //轮播图 function intervalImg(){ if(nexImg<imgLength-1){ nexImg++; }else{ nexImg=0; } //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){ $(".c-banner .banner ul li").eq(nexImg-1).css("display","none"); }); $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); } //轮播图底下按钮 //动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用 $(".c-banner .jumpBtn ul li").each(function(){ //为每个按钮定义点击事件 $(this).click(function(){ clearInterval(time); $(".c-banner .jumpBtn ul li").css("background-color","white"); jumpImg = $(this).attr("jumpImg"); if(jumpImg!=nexImg){ var after =$(".c-banner .banner ul li").eq(jumpImg); var befor =$(".c-banner .banner ul li").eq(nexImg); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); after.css("display","block"); after.stop().animate({"opacity":1},1000); befor.stop().animate({"opacity":0},1000,function(){ befor.css("display","none"); }); nexImg=jumpImg; } $(this).css("background-color","black"); time =setInterval(intervalImg,3000); }); }); //动态数据轮播图 //动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据 // function dynamicData(){ // $.ajax({ // url:"js/test.json", // type:"get", // dataType:"json", // success:function(data){ // if(data.code==1){ // var data = data.data; // $.each(data,function(i){ // $(".c-banner .banner ul").append('<li><img src="'+this.img+'"></li>'); // $(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>') // }) // } // //获取图片总数量 // imgLength = $(".c-banner .banner ul li").length; // //为底部按钮定义单击事件 // $(".c-banner .jumpBtn ul li").each(function(){ // //为每个按钮定义点击事件 // $(this).click(function(){ // clearInterval(time); // $(".c-banner .jumpBtn ul li").css("background-color","white"); // jumpImg = $(this).attr("jumpImg"); // if(jumpImg!=nexImg){ // var after =$(".c-banner .banner ul li").eq(jumpImg); // var befor =$(".c-banner .banner ul li").eq(nexImg); // // //将当前图片试用绝对定位,下一张图片试用相对定位 // $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); // $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); // // after.css("display","block"); // after.stop().animate({"opacity":1},1000); // befor.stop().animate({"opacity":0},1000,function(){ // befor.css("display","none"); // }); // nexImg=jumpImg; // } // $(this).css("background-color","black"); // time =setInterval(intervalImg,3000); // }); // }); // } // }) // } </script> <div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html> ``` ```

用jquery写了个图片切换效果,想让鼠标悬停图片时候图片停止切换,没有悬停则自动切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>幻灯效果</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script> <script type="text/javascript"> var scrollDuration = 1000;//切换速度 var timeDuration = 2000;//等待时间 var scrollEasing = 'quadratic'; $(function() { $('#content').carouFredSel({ direction: 'down',//滑动方向 width: 480, height: 264, items: { visible: 1, width: 480, height: 264 }, scroll: { fx: 'directscroll', duration: scrollDuration, timeoutDuration: timeDuration, easing: scrollEasing, onBefore: function( data ) { data.items.old.animate({ 'margin-left': -140 }, scrollDuration, scrollEasing); data.items.visible.css({ 'margin-left': 264 }).animate({ 'margin-left': 10 }, scrollDuration, scrollEasing); } }//scroll end }) }) </script> <style type="text/css"> #box{ width:480px; height:264px; margin:-132px 0 0 -240px; position:absolute; top:50%; left:50%; overflow:hidden; } #content { position:absolute; width:480px; height:260px; bottom:0; left:0; } #content img { display:block; margin-right:10px; float:left; } </style> </head> <body> <div id="box"> <div id="content"> <img src="img/bg1.jpg" width="480" height="264" border="0" /> <img src="img/bg2.jpg" width="480" height="264" border="0" /> <img src="img/bg3.jpg" width="480" height="264" border="0" /> <img src="img/bg4.jpg" width="480" height="264" border="0" /> </div> </div> </body> </html>

html中怎么实现当鼠标移动到一张图片上后,在另一个div中显示与之相符的段落?

![图片说明](https://img-ask.csdn.net/upload/201906/02/1559451935_483636.png) 就是当我把鼠标移到左边的图片上以后,右边的div则显示该图片的信息? (左边是一个轮播图,右边我想介绍每张图片的信息,但又不能让每张图的信息都同时显示在右边)

一个js轮播器,可以用用但是性能差

html------------------------ ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style/main.css"> <script src="jquery-1.11.2.js" ></script> <script src="demo.js"></script> </head> <body> <div class="banner"> <img src="" alt="第一张轮播器" class="first"> <img src="" alt="第二张轮播器" class="second"> <img src="" alt="第三张轮播器" class="third"> <ul> <li></li> <li></li> <li></li> </ul> <span></span> <strong></strong> </div> </body> </html> ``` css-------------------------------- ``` *{padding: 0;margin: 0;} ul{list-style-type: none;} .first{ width: 800px; height: 400px; background: red; } .second{ width: 800px; height: 400px; background: green; } .third{ width: 800px; height: 400px; background: yellow; } .banner{ width: 800px; height: 400px; position: relative; margin: 0 auto; } img{ position: absolute; top: 0; left: 0; z-index:1; } ul{ position: absolute; top:380px; left: 300px; z-index: 4; } ul li{ float: left; width: 30px; height: 20px; display: block; border: 1px solid #000; margin-left: 20px; text-align: center; line-height: 20px; cursor:pointer; } span{ width: 800px; height: 20px; display: block; position: absolute; top: 380px; left: 0; background: #ccc; z-index:3; opacity:0.6; } strong{ width: 800px; height: 20px; display: block; position: absolute; top: 380px; left: 0; z-index: 4; } ``` js---------------------------------- ``` $(function () { $("img").css("display","none"); $("img").eq(0).css("display","block"); $(".banner ul li").eq(0).css("background","red"); $(".banner strong").html($("img").eq(0).attr("alt")); $("ul li").hover( function() { $("img").css("display","none"); $("img").eq($(this).index()).css("display","block"); $("ul li").css("background","#fff"); $("ul li").eq($(this).index()).css("background","red"); $(".banner strong").html($("img").eq($(this).index()).attr("alt")) },function(){ }) }) ``` 我看视频做的一个轮播器,用是可以用。不过性能很低,要很久才能反应过来。求大婶指教。

这是我做的轮播效果图,给添加超链接后出现了问题,纠错,求指点

``` <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery带文字动画图片轮播代码 - 站长素材</title> <link rel="stylesheet" href="__PUBLIC__/Css/indexca.css"/> <script type="text/javascript" src="__PUBLIC__/Js/jquery-2.1.1.min.js"></script> <style> .box{width:1920px;height:660px;margin:0 auto;position:relative} .box img{width:100%;height:100%;position:absolute;display:none} .box ul {list-style:none;position:absolute;right:30px;bottom:10px;} .box ul li{width:30px;height:20px;border:1px solid #0037fd;float:left;margin-left:10px;text-align:center;line-height:20px;} .ys{background:#0037fd} .left{width:30px;height:40px;background:rgba(255,255,255,0.5);position:absolute;top:310px;left:10px;font-size:30px;line-height:40px;text-align:center} .right{width:30px;height:40px;background:rgba(255,255,255,0.5);position:absolute;top:310px;right:10px;font-size:30px;line-height:40px;text-align:center} </style> </head> <body> <include file="Public/header"/> <div class="box"> <a href="__APP__/Home/product/product_g"><img src="__PUBLIC__/Imager/589453510254609459.png" style="display:block"></a> <a href="__APP__/Home/product/product_a"><img src="__PUBLIC__/Imager/p1_bg.jpg"></a> <a href="__APP__/Home/product/product_b"><img src="__PUBLIC__/Imager/p2_bg.jpg"></a> <a href="__APP__/Home/product/product_c"><img src="__PUBLIC__/Imager/p3_bg.jpg"></a> <a href="__APP__/Home/product/product_d"><img src="__PUBLIC__/Imager/p4_bg.jpg"></a> <a href="__APP__/Home/product/product_e"><img src="__PUBLIC__/Imager/diancan_bg6.jpg"></a> <a href="__APP__/Home/product/product_f"><img src="__PUBLIC__/Imager/fenxiao_bg2.jpg"></a> <ul> <li class="ys">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <div class="left"><</div> <div class="right">></div> </div> <script> var q=0; //alert($); //焦点图切换(焦点背景颜色的切换) $(".box ul li").mouseover(function(){ //划上当前li让其添加背景颜色,其余同级移除背景颜色 $(this).addClass("ys").siblings().removeClass("ys"); //定义变量获取当前li的索引值; q=$(this).index(); //alert(q) //通过当前索引匹配对应图片并进行显示,其余同级图片进行隐藏; $(".box a").eq(q).show().siblings(".box a").hide() }) //轮播图 function autoplay(){ times=setInterval(function(){ if(q>=6){q=0} else{q++} $(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys"); $(".box a img").eq(q).fadeIn(800).siblings(".box a img").fadeOut(800) },2000) } autoplay(); //鼠标划上停止轮播,划离启动轮播 $(".box").mouseover(function(){ clearInterval(times); }).mouseout(function(){ autoplay(); }) //右按钮 $(".right").click(function(){ if(q>=6){q=0} else{q++} $(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys"); $(".box img").eq(q).show().siblings(".box img").hide() }) //左按钮 $(".left").click(function(){ if(q<=0){q=6} else{q--} $(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys"); $(".box img").eq(q).show().siblings(".box img").hide() }) </script> <include file="Public/tail"/> </body> </html> ```

点击显示隐藏中的div中图片左右滚动

点击显示隐藏中的div中图片左右滚动,当显示时一行只出现一张图片,剩下的图片并列显示在下边了?请问这个该怎么解决? 下面是我写的代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js制作产品图片展示选项卡tab内嵌图片左右滚动代码 -B5教程网</title> <style> li{list-style-type:none;float: left;} .TTSliderPic{width: 910px;padding: 13px 33px;border: 2px solid #C3C5C7;position: relative;height: 180px;z-index: 1} .TTSliderPicList{position: relative;width:890px;overflow: hidden;height:180px;} .TTSliderPic ul{position: absolute;display: none;top:3px;left: 0} .TTSliderPic ul.show{display: block;} .TTSliderPic li img{width:150px } .TTSliderPic li{width: 150px;padding: 0 14px;height: 180px;} .TTSliderPic li a{display: block;height: 150px;overflow: hidden;} .TTSliderPic li p{height: 30px;line-height: 30px;text-align: center;color: #ED0A0A} .TTSliderPrevBtn,.TTSliderNextBtn{height: 100%;width: 45px;position: absolute;z-index: 999;top: 0;text-align: center;} .TTSliderPrevBtn{left:0} .TTSliderNextBtn{right: 0;} .TTSliderPrevBtn a,.TTSliderNextBtn a{height: 30px;width: 20px;display: inline-block;background: url(./images/btn.png) no-repeat;margin-top: 75px} .TTSliderNextBtn a{background: url(./images/btn.png) no-repeat -30px 0} </style> </head> <body> <div onclick="ShowDiv()">ddddd</div> <div id="g1_father" class='TTSliderPic' style="display:none;"> <div href='javascript:;' id='TTSliderPrevBtn' class='TTSliderPrevBtn'><a href='javascript:;'></a></div> <div href='javascript:;' id='TTSliderNextBtn' class='TTSliderNextBtn'><a href='javascript:;'></a></div> <div class='TTSliderPicList'> <ul class='show'> <li class='on'><div><img src='images/1.jpg'/></div></li> <li><img src='images/2.jpg'/></li> <li><img src='images/3.jpg'/></li> <li><img src='images/4.jpg'/></li> <li><img src='images/5.jpg'/></li> <li><img src='images/11.jpg'/></li> <li><img src='images/22.jpg'/></li> <li><img src='images/33.jpg'/></li> <li><img src='images/44.jpg'/></li> <li><img src='images/55.jpg'/></li> </ul> </div> </div> <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js";;></script> <script type="text/javascript"> function ShowDiv(){ var content=document.getElementById("g1_father"); content.style.display="block"; } </script> <script type="text/javascript"> window.onload=function() { var oTTSliderNextBtn=document.getElementById('TTSliderNextBtn'); var oTTSliderPicList=getByClass('TTSliderPicList',null,'div')[0]; var aItem=oTTSliderPicList.getElementsByTagName('ul'); var len=aItem.length; var showIndex=aItemImgWidth=iNow=0; var aEle=[]; for(var i=0;i<len;i++) { var aItemImgs=aItem[i].getElementsByTagName('li'); if(!aItemImgWidth) { aItemImgWidth=aItemImgs[0].offsetWidth; } aEle.push(aItemImgs); //存入数组,考虑到有多个轮播,且每个轮播里面的图片个数可能一致. } for(var i=0;i<len;i++) { var num=aEle[i].length; if(aItem[i].className=='show') { showIndex=i; } aItem[i].style.width=num*(aItemImgWidth)+'px' } oTTSliderNextBtn.onclick=function() { var maxNum=aEle[showIndex].length-1; aItem[showIndex].insertBefore(aEle[showIndex][maxNum],aEle[showIndex][0]); aItem[showIndex].style.left=-aItemImgWidth+'px'; doMove(aItem[showIndex],0); } function doMove(o,t,fn) { clearInterval(o.timer); o.timer=setInterval(function(){ var is= (t-getStyle(o,'left'))/8; is= is>0?Math.ceil(is):Math.floor(is); if(t==o.offsetLeft) { clearInterval(o.timer); (typeof fn==='function') && fn(); } else { o.style.left=o.offsetLeft+is+'px'; } },30) } function getStyle(o,a) { return o.currentStyle ? parseFloat(o.currentStyle[a]) : parseFloat(getComputedStyle(o,false)[a]); } function getByClass(s,p,e) { var reg=new RegExp('(\\b)'+s+'(\\b)'); var aElement=(p||document).getElementsByTagName(e||'*'); var aResult=[]; for(var i=0;i<aElement.length;i++) { reg.test(aElement[i].className) && aResult.push(aElement[i]); } return aResult; } } </script> </body> </html>

div fixed定位之后,加animation,被父元素遮盖,如何取消,内详

下面有完整代码,一个网上摘得轮播插件,文字跟图片同时出现,以文字加到图片子元素中,但是位置不同,所以用fixed解决,但是后续中我给文字加animation后,文字被图片遮盖,只能在动画播放完才能出现,求大大们解决~ 下面有代码。。和图片事宜,图片画质有点渣 ![图片说明](https://img-ask.csdn.net/upload/201609/11/1473596538_402978.gif)完整代码。。 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>an</title> <script src="../web/js/jquery-3.1.0.js"></script> <script> $(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 length = $('.slider-panel').length; //将除了第一张图片隐藏 $('.slider-panel:not(:first)').hide(); //将第一个slider-item设为激活状态 $('.slider-item:first').addClass('slider-item-selected'); //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 $('.slider-panel').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); }); /** * 向前翻页 */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } /** * 向后翻页 */ function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } /** * 从preIndex页翻到currentIndex页 * preIndex 整数,翻页的起始页 * currentIndex 整数,翻到的那页 */ function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } /** * 开始轮播 */ function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止轮播 */ function stop() { clearInterval(interval); hasStarted = false; } //开始轮播 start(); }); </script> <style> @keyframes myfirst{ 0% {margin-left:0px;opacity: 1;} 50%{margin-left:-60px;opacity: 0;} 100% {margin-left:0%;opacity: 1;} } @-moz-keyframes myfirst{ 0% {margin-left:0px;opacity: 1;} 50%{margin-left:-60px;opacity: 0;} 100% {margin-left:0%;opacity: 1;} } @-webkit-keyframes myfirst{ 0% {margin-left:0px;opacity: 1;} 50%{margin-left:-60px;opacity: 0;} 100% {margin-left:0%;opacity: 1;} } * { margin: 0; padding: 0; height:100%; box-sizing: border-box; overflow: hidden; } a{ text-decoration:none } .slider { position:fixed; top:7.77%; left:58.3333%; width:33.3333%; height:88%; z-index:1; } .img1{ max-width:100%; max-height:100%; background-image:url(http://img2.imgtn.bdimg.com/it/u=3224860512,2623772592&fm=206&gp=0.jpg); background-position:center; background-repeat:no-repeat; background-size:cover; margin:0 auto; } .img2{ max-width:100%; max-height:100%; background-image:url(http://img5.imgtn.bdimg.com/it/u=4106917366,2081124773&fm=206&gp=0.jpg); background-position:center; background-repeat:no-repeat; background-size:cover; margin:0 auto; } .word{ position:fixed; color:#333; margin-left:10px; font:92px/100px Futura; letter-spacing:8px; top:33%; left:24.5%; height:200px; animation:myfirst 2s; } </style> </head> <body> <div class="slider"> <ul class="slider-main"> <li class="slider-panel img1"> <a href="h#"><span class="word">WORD ANIMATE</span></a> </li> <li class="slider-panel img2"> <a href="h#"><span class="word">DO<br />DESGIN</span></a> </li> </ul> </div> <div id="chose"> <ul class="slider-nav"> <li class="slider-item"></li> <li class="slider-item"></li> </ul> </div> </body> </html> ```

新手上路,求教jquery知识

<html> <head> <title>图片轮播</title> <meta charset="utf-8"> <style type="text/css"> div{ border:1px solid black; width:500px; height:210px; margin:0 auto; position:relative; overflow:hidden; padding:0 0; } img{ width:500px; height:200px; position:relative; align:center; padding:0 0; margin:0 0; } ul{ padding:0 0; margin:0 0; } ul li{ list-style-type:none; padding:0; padding:0 0; margin:0 0; } #num{ position:absolute; right:5px; bottom:0px; padding:0; } #num li{ width:20px; height:20px; border:1px solid black; float:left; background-color:red; margin-left:5px; text-align:center; } </style> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ var a1; var index=0; var timer; timer = setInterval(function(){ for(var i=0;i<5;i++){ a1=i*200+7; $("img").animate({bottom:a1+"px"},2000); if(i==5){ $("img").animate({bottom:"0px"},2000); } } },10000); $("div").hover(function() { clearInterval(timer); }, function(){}).trigger("mouseleave"); }); </script> </head> <body> <div id="scr"> <ul id="adv"> <li><img src=images/LoadScreen_8.jpg></li> <li><img src=images/LoadScreen_10.jpg></li> <li><img src=images/LoadScreen_11.jpg></li> <li><img src=images/LoadScreen_12.jpg></li> <li><img src=images/LoadScreen_16.jpg</li> </ul> <ul id="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html> 自己用jquery写的图片轮播的代码,鼠标悬停停不了啊,求解

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

ArrayList源码分析(入门篇)

ArrayList源码分析 前言: 写这篇博客的主要原因是,在我上一次参加千牵科技Java实习生面试时,有被面试官问到ArrayList为什么查找的速度较快,插入和删除的速度较慢?当时我回答得不好,很大的一部分原因是因为我没有阅读过ArrayList源码,虽然最后收到Offer了,但我拒绝了,打算寒假学得再深入些再广泛些,下学期开学后再去投递其他更好的公司。为了更加深入理解ArrayList,也为

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

String s = new String(" a ") 到底产生几个对象?

老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才! 上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有了”宜春”对象,如果没有则在常量池中创建一个此字符串对象,然后堆中再创建一个常量池中此”宜春”对象的拷贝对象。 也就是说准确答案是产生了一个或两个对象,如果常量池中原来没有 ”宜春” ,就是两个。...

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

玩转springboot启动banner定义所得

最近接手了一个springboot项目,不是不熟悉这个框架,启动时打印的信息吸引了我。 这不是我熟悉的常用springboot的打印信息啊,我打开自己的项目: 还真是的,不用默认的感觉也挺高大上的。一时兴起,就去研究了一下源代码,还正是有些收获,稍后我会总结一下。正常情况下做为一个老程序员,是不会对这种小儿科感兴趣的,不就是一个控制台打印嘛。哈哈! 于是出于最初的好奇,研究了项目的源代码。看到

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

你打算用Java 8一辈子都不打算升级到Java 14,真香

我们程序员应该抱着尝鲜、猎奇的心态,否则就容易固步自封,技术停滞不前。

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《经典算法案例》01-08:如何使用质数设计扫雷(Minesweeper)游戏

我们都玩过Windows操作系统中的经典游戏扫雷(Minesweeper),如果把质数当作一颗雷,那么,表格中红色的数字哪些是雷(质数)?您能找出多少个呢?文中用列表的方式罗列了10000以内的自然数、质数(素数),6的倍数等,方便大家观察质数的分布规律及特性,以便对算法求解有指导意义。另外,判断质数是初学算法,理解算法重要性的一个非常好的案例。

立即提问
相关内容推荐