jquery写出PC端轮播图实例

最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧。

现在把自己写的轮播图这块代码单独拿出来,做一个小demo写在这里记录一下(demo中轮播图的图片网上随意找的)

实现的效果:

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 style="text-align: center;">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)
})

四、效果图展示

(0)

相关推荐

  • JQuery和html+css实现带小圆点和左右按钮的轮播图实例

    是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;

  • jQuery按需加载轮播图(web前端性能优化)

    引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图! 思路 为什么说网上其他一些轮播图不符合我的要求?我的需求又是什么呢? 现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是,先把图片和链接的 HTML 写好,然后控制隐藏和显示来轮流展示当前的幻灯图片.但是对用户而言,我们始终只是看到当前的一张图片,那其他几张隐藏的图片为什么要事先加载

  • jQuery实现简洁的轮播图效果实例

    本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp

  • jQuery无缝轮播图代码

    本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下 html 代码 <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#">

  • 用jQuery实现优酷首页轮播图

    大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 思路 思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了 例如:我们点击第五个小圆点,让第五个图片跑到当前图片的后面,然后一起向左运动 当然了,如果你想要看前面的图片,让图片先跑到当前图片的左边,然后和当前图片一起向右运动 基本结构与样式 <div class="lunbo"> &

  • 原生Javascript和jQuery做轮播图简单例子

    接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮

  • jquery版轮播图效果和extend扩展

    本文实例为大家分享了jquery版本轮播图及extend扩展的具体代码,供大家参考,具体内容如下 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -w

  • jquery实现左右滑动式轮播图

    本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><

  • jQuery实现一个简单的轮播图

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>轮播图练习</title> <link rel="stylesheet" href="css/css.css" rel="external nofollow" type=&

  • jQuery制作全屏宽度固定高度轮播图(实例讲解)

    前端新手自己写的,练习一下基本功,也是留下的第一次记录 html部分 div class="cm-banner"> <div class="cm-banner-list"> <ul id="cm_banner_list"> <!--图片宽度和高度在css中定为1920x300--> <li><img src="cm-banner-01.png" /></l

  • jquery 实现轮播图详解及实例代码

    轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

  • jquery实现轮播图效果

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <style type="text/css"> *{ margin: 0; padding: 0; } #slideshow{ position: relative; wi

  • jquery实现左右轮播图效果

    我们经常看到购物网站上首页有轮播图,比如某东某京 如图我们打开网页就看到京东的轮播图 接下来,这个小案例就是要介绍如何实现这种效果,即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) 3重点内容**轮播图会自己向左滑动(里面有一个定时器自动播放) 分析完之后就是我们写代码(这个是仿京东的轮播图) HTML的内容 代码片 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多

随机推荐