用jQuery如何制作自动轮播图，且鼠标经过停止轮播

时间2024-03-26 19:32:03发布访客分类其他前端知识浏览946

导读：在实际案例的操作过程中，我们可能会遇到“用jQuery如何制作自动轮播图，且鼠标经过停止轮播”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一...

在实际案例的操作过程中，我们可能会遇到“用jQuery如何制作自动轮播图，且鼠标经过停止轮播”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。

实现的效果：

1、自动轮播（轮播时间间隔在js代码中自定义）

2、点击左右侧按钮，实现手动切换

3、底部小圆点根据切换图片的位置相应的显示active状态

4、鼠标经过轮播图区域，停止轮播，离开轮播图区域开始轮播

代码目录结果如下：

一、index.html

注：这里以5张图片为例，页面上真正轮播展示给用户看到的是5张不同的图片，但是为了轮播效果的连贯性，所以在第一张图片前面添加上第五张图片，在第五张图片后面加上了第一张图片，所以demo结构里是7张图片，每张图片的尺寸必须都是一样的哦（这里宽高尺寸是720*350px）。

!DOCTYPE html>
    
html lang="en">
    
head>
    
 meta charset="UTF-8">
    
 title>
    PC-jquery版轮播图/title>
    
 link rel="stylesheet" href="css/style.css" rel="external nofollow" >
    
/head>
    
body>
    
div class="layout">
    
 h2 >
    PC-jquery版轮播图/h2>
    
 div class="slide" id="slide">
    
  div id="outer" class="outer">
    
   ul id="inner" class="inner">
    
    li>
    a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    p>
    图片-5/p>
    img src="images/slide-5.jpg">
    /a>
    /li>
    
    li>
    a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    p>
    图片-1/p>
    img src="images/slide-1.jpg">
    /a>
    /li>
    
    li>
    a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    p>
    图片-2/p>
    img src="images/slide-2.jpg">
    /a>
    /li>
    
    li>
    a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    p>
    图片-3/p>
    img src="images/slide-3.jpg">
    /a>
    /li>
    
    li>
    a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    p>
    图片-4/p>
    img src="images/slide-4.jpg">
    /a>
    /li>
    
    li>
    a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    p>
    图片-5/p>
    img src="images/slide-5.jpg">
    /a>
    /li>
    
    li>
    a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    p>
    图片-1/p>
    img src="images/slide-1.jpg">
    /a>
    /li>
    
   /ul>
    　　　　　　　!--底部小圆点-->
    
   ol class="dot" id="dot">
    
    li class="active">
    /li>
    
    li>
    /li>
    
    li>
    /li>
    
    li>
    /li>
    
    li>
    /li>
    
   /ol>
    
  /div>
    
　　　　 !--左右两侧的点击切换按钮-->
    
  div class="arrow-box">
    
   div class="arrow arrow-l" id="arrow_l">
    ‹/div>
    
   div class="arrow arrow-r" id="arrow_r">
    ›/div>
    
  /div>
    
 /div>
    
/div>
    
script src="js/jquery.min.js">
    /script>
    
script src="js/index.js">
    /script>
    
/body>
    
/html>

二、style.css

* {
    
 margin: 0;
    
 padding: 0;
    
 box-sizing: border-box;

}

.layout {
    
 width: 1000px;
    
 margin: 30px auto;

}

ul,ol,li {
    
 list-style: none;

}

.slide {
    
 position: relative;
    
 width: 900px;
    
 margin:auto;

}

.slide .outer {
    
 position: relative;
    
 margin: 30px auto;
    
 width: 720px;
    
 height: 400px;
    
 overflow: hidden;

}

.slide .outer .inner {
    
 width: 5040px;
    
 height: 350px;
    
 position: absolute;
    
 left: -720px;
    
 top: 0;

}

.slide .outer .inner li {
    
 float: left;
    
 height: 350px;

}

.slide .outer .inner li a {
    
 display: block;
    
 position: relative;
    
 width: 100%;
    
 height: 100%;

}

.slide .outer .inner li a p {
    
 position: absolute;
    
 left: 0;
    
 bottom: 0;
    
 color: #fff;
    
 font-size: 18px;
    
 width: 720px;
    
 height: 80px;
    
 line-height: 80px;
    
 padding-left: 50px;
    
 background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));

}

.slide .outer .dot {
    
 margin-top: 365px;
    
 text-align: center;

}

.slide .outer .dot li {
    
 height: 6px;
    
 width: 6px;
    
 border-radius: 3px;
    
 background-color: #d2cbcb;
    
 display: inline-block;
    
 margin: 0 3px;

}

.slide .outer .dot li.active {
    
 background-color: #6e5ca5;

}

.slide .arrow-box {
    
 position: absolute;
    
 width: 900px;
    
 height: 60px;
    
 top: 150px;
    
 left: 0;

}

.slide .arrow-box .arrow {
    
 width: 60px;
    
 height: 60px;
    
 line-height: 60px;
    
 text-align: center;
    
 border-radius: 30px;
    
 background-color: #dde2e6;
    
 font-size: 60px;
    
 color: #999;
    
 cursor: pointer;

}

.slide .arrow-box .arrow.arrow-l {
    
 float: left;

}

.slide .arrow-box .arrow.arrow-r {
    
 float: right;

}

三、index.js

注：js代码中，每个变量均已给了注释。为了防止快速多次点击，而出现动画不停的现象，这里在每次切换图片的时候先调用stop(false,true)。但是注意在向左侧滚动的时候，滚动到最后一张图图片后，再次切换时就不要用stop(false,true)，而是要瞬间定位到第一张图片（其实是dom结构中的第二张）的位置，同样，向右侧滚动时，当滚动到第一张图片后，再次切换时就不用stop(false,true)，而是要瞬间定位到最后一张图片（其实是dom结构中的倒数第二张）的位置。

var interval = 3000;
        //轮播间隔时间
var arrowL = $('#arrow_l');
       //左侧箭头
var arrowR = $('#arrow_r');
       //右侧箭头

var slideBox = $('#slide');
       //轮播图区域
var innerBox = $('#inner');
       //内层大盒子
var img = innerBox.children('li');
     //每个图片
var dot = $('#dot');
        //小圆点盒子

var imgW = $(img[0]).outerWidth();
     //每个li标签的宽度

var imgCount = 5;
         //总图片个数（不同图片的个数）（实际dom上是有7张）
var i = 0;
           //初始化为第0张图片
timer = null;
      //定时器

//自动轮播
timer = setInterval(function () {
    
 i++;

 innerBox.stop(false, true).animate({
'left':-i*imgW+'px'}
    ,300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i >
 imgCount){

  innerBox.animate({
'left':-1*imgW+'px'}
    ,0);
    
  dot.find('li').removeClass('active').eq(0).addClass('active')
  i = 1;

 }

}
,interval)

//点击右侧箭头，播放下一张
arrowR.click(function () {
    
 i++;

 innerBox.stop(false, true).animate({
'left':-i*imgW+'px'}
    ,300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i >
 imgCount){

  innerBox.animate({
'left':-1*imgW+'px'}
    ,0);
    
  dot.find('li').removeClass('active').eq(0).addClass('active')
  i = 1;

 }

}
)

//点击左侧箭头，播放上一张
arrowL.click(function () {
    
 i--;

 innerBox.stop(false, true).animate({
'left':-i*imgW+'px'}
,300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i  1){

  innerBox.animate({
'left':-imgCount*imgW+'px'}
    ,0);
    
  dot.find('li').removeClass('active').eq(imgCount-1).addClass('active')
  i = imgCount;

 }

}
)
//鼠标经过轮播图区域时，清除定时器，停止自动轮播
slideBox.mouseenter(function () {
    
 clearInterval(timer);

}
)

//鼠标离开轮播图区域时，重新启动自动轮播
slideBox.mouseleave(function () {

 timer = setInterval(function () {
    
  i++;

  innerBox.stop(false, true).animate({
'left':-i*imgW+'px'}
    ,300)
  dot.find('li').removeClass('active').eq(i-1).addClass('active')
  if(i >
 imgCount){

   innerBox.animate({
'left':-1*imgW+'px'}
    ,0);
    
   dot.find('li').removeClass('active').eq(0).addClass('active')
   i = 1;

  }

 }
,interval)
}
    )

四、效果图展示

关于“用jQuery如何制作自动轮播图，且鼠标经过停止轮播”的内容就介绍到这，感谢各位的阅读，相信大家对用jQuery如何制作自动轮播图，且鼠标经过停止轮播已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处：用jQuery如何制作自动轮播图，且鼠标经过停止轮播
本文地址： https://pptw.com/jishu/653711.html

PHP如何检查空值？一文教你四种方法 PHP下怎么样比较两个日期？有什么方法？