mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

点击放大手动轮播,jquery写出PC端轮播图实例

时间:2019-06-01 09:45来源:www.mg4377.com
近年来其他项目不是很忙,被安顿给合作社的官方网址项目做三个新的页面(从前没接触集团级军官方网址项目),个中有一个运用轮播图的地点,最起首想直接用swiper.js插件达成就好

近年来其他项目不是很忙,被安顿给合作社的官方网址项目做三个新的页面(从前没接触集团级军官方网址项目),个中有一个运用轮播图的地点,最起首想直接用swiper.js插件达成就好了,但是开掘官方网址项目里此前都尚未引进过swiper.js,后来想了想,就不引进它了,免得又得充实依次三遍互联网请求,项目里既然已经应用了jQuery,那就干脆用jQuery写二个轮播图吧。

jquery写出PC端轮播图实例,jquerypc

新近任何类型不是很忙,被布署给集团的官方网站项目做1个新的页面(在此以前没接触公司官网项目),个中有二个运用轮播图的地点,最开头想直接用swiper.js插件完成就好了,不过发掘官方网站项目里在此以前都不曾引入过swiper.js,后来想了想,就不引进它了,免得又得充实依次叁次网络请求,项目里既然已经使用了jQuery,那就干脆用jQuery写1个轮播图吧。

现行反革命把自个儿写的轮播图那块代码单独拿出去,做四个小demo写在此地记录一下(demo中轮播图的图纸网络随意找的)

点击放大手动轮播,jquery写出PC端轮播图实例。达成的效果:

壹、自动轮播(轮播时间距离在js代码中自定义)

二、点击左右边按键,完结手动切换

三、尾部小圆点依照切换图片的地方相应的呈现active状态

四、鼠标经过轮播图区域,甘休轮播,离开轮播图区域开端轮播

代码目录结果如下:

图片 1

一、index.html

注:这里以五张图纸为例,页面上实在轮播体现给用户阅览的是伍张不相同的图片,但是为了轮播效果的连贯性,所以在率先张图片后边增多上第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),而是要弹指间定位到第2张图片(其实是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)
})

4、效果图呈现

图片 2

图片 3

图片 4

最近其他种类不是很忙,被安插给商家的官方网站项目做3个新的页面(从前没接触公司官方网站项目),在那之中有...

特色:手提式有线电话机端轮播图,点击放大,点击遮罩层恢复生机到原本的金科玉律

jquery特效(三)—轮播图一(手动点击轮播),jquery

后天上班做设计做的胸口痛,就写了1个轮播图练练手,先写了贰个手动点击轮播的轮播图,随后小编会慢慢接着深远写自动轮播图和鼠标悬浮图片结束运动轮播图等~~就算明天自个儿破壳日,不过代码依然得写的,无法找借口放松自个儿,原地踏步也算后退~~~~

上面来探视最终做的手动点击轮播效果:

图片 5

哈哈,有未有看出来自己的四张图片都以美男儿哦~~找个痛快的图片真不轻巧,那样本事激励作者写轮播图的代码欲望,写出来就足以点击开关翻他们品牌了~~

 

 

一、原理表达

(一)首先是轮播图的框架结构,我利用了3个最外边的大div包住多个小div,四个小div里面放4张图纸,另1个小div里面放多个数字开关

(二)对最外边的大div设置的小幅度为图片的大幅度,高出大div宽度的都急需隐藏,可是对于盛放图片的小div设置宽度为两千px,大学一年级点便于四张图左浮动布局

(三)当数字开关点击时,获取开关的索引值,那样就足以驾驭每张图纸左移多厚

好呢,笔者感到纯文字表达有个别冷淡的忧伤,推测你们也不佳掌握,笔者闲的俗气就做了一张好笑的原理表明图,笔者要拓宽招了~~~~

图片 6

从地方的图能够看看,4张图片是浮动起来横着的布局,当数字按键被点击时,图片就要遵从数字按键的索引值引动N个图片的幅度达到父框架之中浮现,因为父框架外面包车型大巴图片都会被隐藏掉~设若您还看不懂原理的话,我只好喉痛了~~~~

 

 

2、上边来看主体程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>轮播图①(手动点击轮播)</title>
        <link type="text/css" rel="stylesheet" href="css/layout.css"  />
    </head>
    <body>
        <div class="slideShow">
            <!--图片布局开始-->
            <ul>
                <li><a href="#"><img src="img/picture01.jpg" /></a></li>
                <li><a href="#"><img src="img/picture02.jpg" /></a></li>
                <li><a href="#"><img src="img/picture03.jpg" /></a></li>
                <li><a href="#"><img src="img/picture04.jpg" /></a></li>
            </ul>
            <!--图片布局结束-->

            <!--按钮布局开始-->
            <div class="showNav">
                1
                2
                3
                4
            </div>
            <!--按钮布局结束-->
        </div>
        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/layout.js"></script>
    </body>
</html>

上面布局作者早就在常理中表达了,感兴趣的亲善看规律~~~~

 

 

三、CSS样式

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.slideShow{
    width: 346px;
    height: 210px;     /*其实就是图片的高度*/
    border: 1px #eeeeee solid;
    margin: 100px auto;
    position: relative;
    overflow: hidden;    /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
    width: 2000px;
    position: relative;     /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
}
.slideShow ul li{
    float: left;     /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
    width: 346px;
}
.slideShow .showNav{     /*用绝对定位给数字按钮进行布局*/
    position: absolute;
    right: 10px;
    bottom: 5px;
    text-align:center;
    font-size: 12px;    
    line-height: 20px;
}
.slideShow .showNav span{
    cursor: pointer;
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    background: #ff5a28;
    margin-left: 2px;
    color: #fff;
}
.slideShow .showNav .active{
    background: #b63e1a;
}

上边样式作者早就备注出来很关键的地点了,相信有基础的很轻松看懂,刚初叶动和自动小编在.slideShow ul样式里面忘了写position: relative;导致前边的jquery程序图片一贯无法移动,拖延了非常长日子才搜索这么些荒唐,希望大家能够小心那一个地点~~~

 

 

四、jQuery程序

$(document).ready(function(){
    var slideShow=$(".slideShow"),     //获取最外层框架的名称
        ul=slideShow.find("ul"),      
        showNumber=slideShow.find(".showNav span"),//获取按钮
        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度

        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件      
            $(this).addClass("active").siblings().removeClass("active");   //按钮被点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
            var index=$(this).index();  //获取哪个按钮被点击,也就是找到被点击按钮的索引值
            ul.animate({
                "left":-oneWidth*index,   //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值index确定
            })
        })
})

额,是否认为很简短,也是几句话就解决了手动点击的轮播效果,上面程序要求留意的是left属性是左移动,所以为负值~~~

写到这里小编是真的黔驴技穷了,要是你再看不懂的话,小编提出您去探视网页的根基布局以及JQuery的知识,自个儿才疏学浅只好写成这么了,方便今后刚出道像自己一样的学弟学妹看看吧~~明日延续浓厚写自动轮播图~~~

 

明天上班做安排做的感冒,就写了一个轮播图练练手,先写了多个手动点击轮播的轮播...

今昔把温馨写的轮播图那块代码单独拿出来,做3个小demo写在此间记录一下(demo中轮播图的图纸网络自由找的)

  (不会活动轮播,华为机亲测有效)

落到实处的作用:

 

一、自动轮播(轮播时间间隔在js代码中自定义)

 

二、点击左左侧开关,完结手动切换

图片 7

叁、底部小圆点依据切换图片的地点相应的突显active状态

 

编辑:www.mg4377.com 本文来源:点击放大手动轮播,jquery写出PC端轮播图实例

关键词: JS基础

  • 上一篇:没有了
  • 下一篇:没有了