2 qqbnb889 qqbnb889 于 2016.09.10 12:58 提问

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

cheeseC
cheeseC   2016.09.10 16:25
已采纳

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

cheeseC
cheeseC   2016.09.10 16:42

<!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在上边网站都可以找到

cheeseC
cheeseC   2016.09.10 17:00

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

showbo
showbo   Ds   Rxr 2016.09.10 20:55

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

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:
支付平台架构设计评审核心要点与最佳实践
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。相信很多同学都在各种类型的网站上看过花样百出的轮播效果图,不少同学也想尝试下自己做出来一个,但网上的代码纰漏百出,不能学以致用,这里我将给大家介绍两种方式的图片轮播实现供大家参考。
jQuery实现层叠式炫酷图片轮播组件
功能一:进入界面,每4s图片切换 功能二:点击前后箭头能左右切换图片 功能三:点击下边的横线按钮能准确切换 功能四:点击相应图片也能切换 利用html+css3页面布局,其中用到了几个重要概念 1.position:absolut   脱离文档流概念 2.css3的新特性transform中的translate,使得图片能平滑平移,缩放 3.css3新特性transform-orig
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实现渐变式轮播图效果
<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实战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
Bootstrap V3版本轮播(滚动幻灯片)插件使用
首页大屏滚动幻灯片是网站常用表现手法,尤其企业展示型网站使用最多,下面针对Bootstrap V3版本幻灯片调用做详细分解记录,以便后期查阅。 一、首先引用Bootstrap源码的CSS和JS与相关的JQuery版本文件(V3版本匹配的JQ文件版本为1.9版本系列)。 二、书写轮播代码框架 首先写最外面的主题部分       ...这里
JQuery 制作文字轮播
文字轮播 公告栏的滚动效果思路: 先给li标签定位 然后通过JQuery 的animate()方法执行动画效果,是li标签的位置不断变化,从而实现从右到左的轮播效果先上html代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字轮播</title> <script src="js