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>

3个回答

直接用插件吧,限制很懂轮播插件很小,也方便加载

ee_Andy
ee_Andy http://www.bootcss.com/p/unslider/
大约 3 年之前 回复
qqbnb889
qqbnb889 请问如何调用除dots圆点导航?别的都有,就是圆点导航没有
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jQuery 轮播插件,如何绑定一个DIV实现跟IMG一样的轮播效果
网上摘的代码,简单的轮播jqn我想写一个新的DIV,绑定原来轮播div,跟原轮播div兄弟关系,但是能实现同步的轮播效果,显示轮播图1的时候同时显示新DIV1n,求助。。新手不懂改jQnn```n nnn n 无标题文档nn n n n n jquery轮播效果图 n n n n n n n n n n n n n n n n n n n n n n n 1 n 2 n 3 n 4 n n n < n > n n n n nnnnn```nn
jQuery 轮播插件,如何绑定一组DIV实现跟IMG一样的轮播效果
网上摘的代码,简单的轮播jqn我想写一个新一组DIV,绑定原来轮播div,跟原轮播div兄弟关系,但是能实现同步的轮播效果,显示轮播图1的时候同时显示新DIV1n,求助。。新手不懂改jQ,因为不懂js。。nnn```n nnn n 无标题文档nn n n n n jquery轮播效果图 n n n n n n n n n n n n n n n n n n n n n n n 1 n 2 n 3 n 4 n n n < n > n n n n nnnnn```nn
轮播插件轮播插件
一款很不错的轮播插件,支持键盘左右键控制,体验完美。
div 轮播插件
插件名称:jquery unslider 插件教程地址:http://www.jq22.com/jquery-info1940  
简单的jquery轮播效果
想要拥有jquery轮播的效果吗?本jquery轮播效果实现了轮播的核心功能,这个只是给出了轮播的一个简单的例子,以后会提供更简单、灵活的jquery轮播插件,敬请期待...
jQuery图片切换,轮播效果
用jQuery实现迅雷首页(http://xunlei.com/)FLASH 轮换的效果. 先看效果吧: http://www.koyoz.com/demo/html/autoplay_xunlei/play.html 特点: 与迅雷首页FLASH动画相似度达到99% 不使用FLASH, 完全由javascript实现控制 完美的图片渐变过渡效果(为兼容浏览器,未使用IE强大滤镜...
轮播效果 jquery
轮播效果 jquery框架已经上传 图片可自行下载切换
jQuery首页轮播效果
jQuery首页轮播效果,这款代码可以使一组图片或者新闻以连续的方式滚动播放,两边有相应的按钮,可以手动播放,可以在上面加入超链接使用。
JQuery轮播插件
基于jQuery的图片轮播插件,包括渐隐、上滑、左滑等效果
jquery轮播插件
最近的项目需要做图片轮播,为了达到需求,我试了好几个轮播插件。今天在这里总结一下,供大家根据需求作选择。 1.nivo silder 属性及方法说明 这个轮播插件基于实现,即利用img作为轮播单元,它的缺点显而易见:当我们需要对图片添加文字性说明或者图片有交互时,它便无能为力了。因此,这个轮播插件适合单纯的图片展示的应用场景中。当然,这个插件也是有优点的:它提供了11种切换效果。相对于其他轮播
jQuery轮播插件LoopShow.zip
这是我个人自己开发的jQuery的轮播插件,名字叫loopShow. 全称:jQuery.mgang.loopShow.js 标签:LoopShow
轮播+轮播插件
主要实现轮播功能机制,用户可控制图片大小,控制所需图片,控制位置,简单调用。
javascript实现DIV轮播或者图片和文字轮播效果
[img=http://kuaipai.webzzjc.com/1.gif][/img]rnrn源代码:rn rn rn rn 灵动快拍 rn 二维码行业第一品牌 采用前后台完全分离技术,通过标签(支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等)加模板技术.全站生成纯静态页。 rn ? ?rn rn rnrn可以在线查看源代码http://kuaipai.webzzjc.com/rnrn谢谢各位前辈、高僧了
如何实现这样效果的轮播
[img=https://img-bbs.csdn.net/upload/201709/19/1505801895_268660.png][/img]rn[img=https://img-bbs.csdn.net/upload/201709/19/1505801902_744111.png][/img]rnrnrn实现轮播,求大神写出完整js
两个img实现无缝轮播
javascript实现,两个img实现无缝轮播
如何实现JS JQUERY 轮播
如何实现文字轮播 //---------------------------------文字轮播---------------------- $(function() { var oUl = document.querySelector(‘ul’); //获取多个里的第1个 var oDiv = document.querySelectorAll(‘div’)[0]; var disTop = o...
vue2.0 实现轮播效果
使用vue2.0 实现的轮播效果,包括点击切换图片,自动轮播功能。
js实现轮播效果
利用js实现轮播效果 其中封装了一个简单的匀速动画函数
jquery+css实现轮播效果
&lt;style type="text/css"&gt; .slideBox { width: 100%; height: 200px; border: 1px #c0c0c0 solid; overflow: hidden } .slideBox img { width: 100%; height: 200px; border: 0; } .slideBox li { l...
UIScrollView实现轮播效果
var iFortime:CGFloat=0.0     var time=NSTimer() //轮播效果    time=NSTimer.scheduledTimerWithTimeInterval(2.0, target: self, selector: "changeImg", userInfo: nil, repeats: true)
ppt轮播效果实现
实现: 实现PPT轮播效果示例:<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js" type="text/javascript"></script> <script src="/assets/ppt/layer/layer.min.js" type="text/javascript"></script> <s
mui+vue+ajax实现轮播效果
mui结合vue实现轮播效果,在 Vue的生命周期钩子:updated 中 执行轮播。
轮播广告效果实现
由于看到每个电商网站的首页基本上都有轮播广告,所以我也写了一个简单的轮播广告效果,记录一下,以后用到的话可以直接使用了。 本篇主要介绍如何在我们的网页中快速实现轮播效果,js的原理部分在续篇中详细讲解。 一、首先在HTML中想要放轮播的地方加入以下代码: id="slider"> id="imgs"> id="indexs"> 二、在样式文件中加入以下样式:
原生JS实现 轮播效果
&amp;lt;div id=&quot;playImages&quot; class=&quot;play&quot;&amp;gt; &amp;lt;ul class=&quot;big_pic&quot;&amp;gt; &amp;lt;div class=&quot;prev&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div class=&quot;next&quot;&amp;gt;&amp;lt;/div&amp;
HTML+CSS+JS实现轮播效果
1.新建一个项目,里面新建一个CSS文件夹(在里面新建一个lunbo.css文件)和一个JS文件夹(在里面新建一个lunbo.js文件),新建一个lunbo.html文件。 2.lunbo.html代码: 大轮播
Axure实现轮播效果
利用Axure实现轮播 创建动态面版 拖拽到控制台 创建state 点击+号按钮即可增加state 创建 三个 然后增加三张图片在每个state下面 如下图所示 最后是添加事件 本文是onload事件 页面加载后触发 保存后 点击 preview 预览一下效果吧 怎么样 一个轮播就做好了 ...
jquery轮播特效(左右轮播)
html代码<div id="wrapper"><!-- 最外层部分 --> <div id="banner"><!-- 轮播部分 --> <ul class="imgList"><!-- 图片部分 --> <li><a href="#"><img src="http://i.mmcdn.cn/simba/img/TB1cQb6IpXXXXX3XVXXSutbFX
原生JS轮播+jQuery改写轮播
原生JS实现过程:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; .container{ width:600px; position: relative; overflow: hidden; } .arrows{
SuperSlide插件轮播的暂停与轮播
近来有这样一个需求, 需要实现SuperSlide轮播的暂停与播放的控制。 难点: mouseOverStop: false //重点1: (必须设置为false, 否则会干扰到 play 状态的切换) playStateCell 重点2: 需要模拟hover事件才能 增加/删除"pauseState"类名,而且需要解绑单击事件 取消j...
实现的简单的轮播插件
NULL 博文链接:https://llq056.iteye.com/blog/1513077
jquery中的小图轮播效果
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html xmlns=&quot; http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;&amp;gt; &amp;lt;tit
类走马灯效果轮播(jquery)
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; .proListSub {     width: 1190px;     margin: 0px auto;     po
banner无缝轮播jquery效果
简洁易懂的banner无缝轮播,详细的代码注释
jQuery首页轮播-淡入淡出效果
jQuery首页轮播-淡入淡出效果-大图.
轮播效果
上下轮播Demo效果: 左右轮播效果:   下载链接:http://pan.baidu.com/s/1i4ZhDjv
背景轮播效果+登录界面背景轮播效果
资源包含三个背景轮播效果和两个登录界面背景轮播效果,可以在web 开发中使用。响应式的布局,支持手机端使用。
一个轮播插件求助
请问各位,rn这个网址http://shops.godaddy.com/default.aspx?ci=12657上面的轮播插件是什么插件?哪里有下?
轮播——改img的display
轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种,比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍“改变img的display”这种方法。这种方法的实现原理是如此的简单,如下图:把div#pic的定位设置为position:relative;而div#pic中的5个img的定位设置为position:absolute;...
jquery焦点图轮播插件excoloSlider.zip
jquery焦点图轮播插件excoloSlider是一款单响应式jQuery焦点图切换图片轮播插件Excolo Slider,支持自动播放,按钮、圆点切换,支持重复播放,支持众多的参数配置功能。
基于jquery的轮播插件操作
基于jquery的轮播插件操作 轮播插件 a:focus{ outline:none; }
相关热词 c#检测非法字符 c#双屏截图 c#中怎么关闭线程 c# 显示服务器上的图片 api嵌入窗口 c# c# 控制网页 c# encrypt c#微信网页版登录 c# login 居中 c# 考试软件