Question

我在jquery上真的很新，我试图制作旋转旋转木马，我在互联网上找到了一个脚本，但它没有包含自动旋转脚本和悬停时的paus，所以这里＆＃39 ;代码：

＆＃13;

var carousel = $(".carousel"),
  currdeg = 0;

$(".next").on("click", {
  d: "n"
}, rotate);
$(".prev").on("click", {
  d: "p"
}, rotate);

function rotate(e) {
  if (e.data.d == "n") {
    currdeg = currdeg - 60;
  }
  if (e.data.d == "p") {
    currdeg = currdeg + 60;
  }
  carousel.css({
    "-webkit-transform": "rotateY(" + currdeg + "deg)",
    "-moz-transform": "rotateY(" + currdeg + "deg)",
    "-o-transform": "rotateY(" + currdeg + "deg)",
    "transform": "rotateY(" + currdeg + "deg)"
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

任何人都可以帮我添加自动旋转所需的代码并暂停悬停将是一个很大的帮助..谢谢你:)）

Answer 1

请尝试一下......

＆＃13;

  $(document).ready(function () {

      $('.bxslider').bxSlider({
         auto: true,
  	autoControls: true,
  	stopAutoOnClick: true,
  	pager: true,
  	slideWidth: 300
      });
  });

＆＃13;

body {
    background-color: lightblue;
    padding: 3em 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" type="text/css">

<ul class="bxslider">
    <li>
        <img src="http://lorempixel.com/1000/600/food/1/" title="Himn yammi!"/>
    </li>
    <li>
        <img src="http://lorempixel.com/1000/600/food/2/" title="I like food" />
    </li>
    <li>
        <img src="http://lorempixel.com/1000/600/food/3/" title="I like it!" />
    </li>
</ul>

＆＃13;

请使用bxslider尝试此操作 demo

悬停时JQuery自动旋转和暂停

1 个答案: