qqbnb889
2016-09-10 04:58
采纳率: 87.5%
浏览 2.8k
已采纳

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 2016-09-10 08:25
    已采纳

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

    点赞 打赏 评论
  • cheeseC 2016-09-10 08: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 2016-09-10 09:00

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

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

    点赞 打赏 评论

相关推荐 更多相似问题