2 qqbnb889 qqbnb889 于 2016.09.10 09:47 提问

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个回答

zuoyifeng1993
zuoyifeng1993   2016.09.12 09:35
已采纳

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

caozhy
caozhy   Ds   Rxr 2016.09.10 23:36
ee_Andy
ee_Andy http://www.bootcss.com/p/unslider/
接近 2 年之前 回复
qqbnb889
qqbnb889 请问如何调用除dots圆点导航?别的都有,就是圆点导航没有
接近 2 年之前 回复
ee_Andy
ee_Andy   2016.09.12 08:19
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
jQuery实现图片简单轮播——div自适应图片img
今天在网上找图片轮播插件,发现大多功能丰富又跨浏览器。自己也利用jQuery实现了一个。 1.实现的功能: 利用jQuery,也是跨平台了嘛div自适应图片,图片不失真循环播放 2.代码实现 2.1 HTML部分
jquery实现两种轮播效果
我想大家在浏览网页时都接触过轮播图。其实在bootstrap中也有相应的轮播插件,下面我们将抛开对其他JS库和框架的依赖,仅适用jquery来实现两种轮播效果。      第一种轮播图应该是大家最熟悉的传统轮播图,以淘宝为例:      这种轮播图的功能大致是这样的:点击左右箭头可以实现图片的切换效果,点击圆点圆点会变色,并快速指向对应的图片,此外,可以无限循环轮播,也就是你一直点图片会一
jQuery插件slides实现无缝轮播图特效
jQuery插件slides实现无缝轮播图特效 初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").slide({ slideContainer:
CSS3+jQuery实现3D轮播图
1、HTML和css代码部分 script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript">script> style> *{margin:0; padding:0; list-style:none;} .wrap{width: 600px;height: 300px
jQuery实现层叠式炫酷图片轮播组件
功能一:进入界面,每4s图片切换 功能二:点击前后箭头能左右切换图片 功能三:点击下边的横线按钮能准确切换 功能四:点击相应图片也能切换 利用html+css3页面布局,其中用到了几个重要概念 1.position:absolut   脱离文档流概念 2.css3的新特性transform中的translate,使得图片能平滑平移,缩放 3.css3新特性transform-orig
支付平台架构设计评审核心要点与最佳实践
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。相信很多同学都在各种类型的网站上看过花样百出的轮播效果图,不少同学也想尝试下自己做出来一个,但网上的代码纰漏百出,不能学以致用,这里我将给大家介绍两种方式的图片轮播实现供大家参考。
jquery实战2:轮播图和滑动导航效果
jquery实战2:轮播图和滑动导航效果                 Document      *{margin:0px;padding:0px;}    body{background:rgba(155,122,44,0.3)}   .nav{width:1200px;height:36px;margin:5px auto;border-bo
基于jquery实现的图片渐变轮播图
我认为有两种基本的轮播图一种是左右轮播的一种是层次渐变的今天就写一个层次渐变的轮播图:类似于爱思助手官网,腾讯云上的轮播图轮播的方式,其实这种轮播图轮播方式的网站有很多,再次就不一一举例(当然也举不完)接下来直接上代码:页面代码直接复制就可以用。兼容ie7+&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta cha...
jQuery实现渐变式轮播图效果
<div class="menu"> <div class="pic"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> </div>
JQuery 制作文字轮播
文字轮播 公告栏的滚动效果思路: 先给li标签定位 然后通过JQuery 的animate()方法执行动画效果,是li标签的位置不断变化,从而实现从右到左的轮播效果先上html代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字轮播</title> <script src="js