欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuey实现轮播图效果

程序员文章站 2022-03-06 10:29:44
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片上,自动切换轮播图停止 3. 指示点划过切换对应的图片,图片切换时提示点跟随切换 4. 点击上一页下 ......

再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式

首先介绍一下,本文实现的轮播图的基本效果  

  1. 3s自动切换图片,图片切换时提示点跟随切换
  2. 鼠标划到图片上,自动切换轮播图停止
  3. 指示点划过切换对应的图片,图片切换时提示点跟随切换
  4. 点击上一页下一页按钮切换图片
  5. 图片切换时有渐变的效果

 

下表面开始代码的书写

 

css代码

jQuey实现轮播图效果
/*初始化浏览器默认样式*/
*{
    margin: 0;
    padding: 0;
}
/*sowingmap*/
.sowingmap{
    width: 800px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
/*imgpart*/
.imgpart{
    width: 800px;
    height: 500px;
    position: absolute;
}
/*imgswitch*/
.imgswitch{
    width: 800px;
    height: 500px;
    position: absolute;
    list-style: none;
    display: none;
    cursor: pointer;
}
.imgswitch img{
    width: 100%;
    height: 500px;
}
.imgshow{
    display: block;
}
/*spotpart*/
.spotpart{
    position: absolute;
    bottom: 0;
    height: 40px;
    left: 36%;
}
.spotpart p{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
    float: left;
    margin-left: 20px;
    cursor: pointer;
}
/*提示点的选中颜色*/
.spotpart .spotcolor{
    background-color: #f00;
}
/*上一张下一张切换部分*/
.preimg , .nextimg{
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 70px;
    font-size: 30px;
    color: #f5f5f5;
    position: absolute;
    top: 190px;
    cursor: pointer;
    display: none;
}
.preimg{
    left: -35px;
    text-indent: 25px;
}
.nextimg{
    right: -35px;
    text-indent: -25px;
}
css代码块

 

html代码

<div class="sowingmap">
        <ul class="imgpart">
            <li class="imgswitch imgshow"><img src="img/1.jpg"/></li>
            <li class="imgswitch"><img src="img/2.jpg"/></li>
            <li class="imgswitch"><img src="img/3.jpg"/></li>
            <li class="imgswitch"><img src="img/4.jpg"/></li>
            <li class="imgswitch"><img src="img/5.jpg"/></li>
      </ul>
      <div class="spotpart">
            <p class="spotcolor"></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
      </div>
      <div class="loopchange">
             <p class="preimg">&lt;</p>
             <p class="nextimg">&gt;</p>
      </div>
</div>

 

轮播图功能实现的js代码

//获取元素的个数
var count = $('.imgswitch').length;
var num = 0;
var start = null;
//业务1:实现3s钟自动循环切换图片,图片切换时提示点跟随切换,图片切换时有渐变的效果
function loopstart() {
    clearinterval(start);
    start = setinterval(function() {
        //首先清楚所有样式
        $('.imgswitch').hide();
        //取余方式对num取值进行判断
        num = (num + 1) % count;
        //图片渐入
        $('.imgswitch').eq(num).fadein(1000);
        $('.spotpart p').eq(num).addclass("spotcolor").siblings().removeclass("spotcolor");
    }, 2000);
}
loopstart();

//业务2:鼠标划到图片上,轮播图停止自动切换,划出后继续播放
$('.imgswitch').mouseover(function() { //鼠标划过停止
    clearinterval(start);
});
$('.imgswitch').mouseout(function() { //鼠标划出
    loopstart();
});

//业务三:指示点划过切换对应的图片,图片切换时提示点跟随切换
$('.spotpart p').mouseover(function() {
    clearinterval(start);
    //首先清楚所有样式
    $('.imgswitch').hide();
    $('.imgswitch').eq($(this).index()).fadein(1000);
    $('.spotpart p').eq($(this).index()).addclass("spotcolor").siblings().removeclass("spotcolor");
});
$('.spotpart p').mouseout(function() {
    loopstart();
});
//业务四:点击上一页下一页切换
$('.sowingmap').mouseover(function() {
    clearinterval(start);
    $('.loopchange p').show();
});
$('.sowingmap').mouseout(function() {
    loopstart();
    $('.loopchange p').hide();
});
$('.preimg').click(function() {
    $('.imgswitch').hide();
    if(num <= 0) {
        num = 4;
        $('.imgswitch').eq(num).fadein(1000);
        $('.spotpart p').eq(num).addclass("spotcolor").siblings().removeclass("spotcolor");
    }
    else if(num <= 4) {
        $('.imgswitch').eq(num-1).fadein(1000);
        $('.spotpart p').eq(num-1).addclass("spotcolor").siblings().removeclass("spotcolor");
        num--;
    }
});
$('.nextimg').click(function() {
    $('.imgswitch').hide();
    if(num >= 4) {
        num = 0;
        $('.imgswitch').eq(num).fadein(1000);
        $('.spotpart p').eq(num).addclass("spotcolor").siblings().removeclass("spotcolor");
    }
    else if(num >= 0) {
        $('.imgswitch').eq(num+1).fadein(1000);
        $('.spotpart p').eq(num+1).addclass("spotcolor").siblings().removeclass("spotcolor");
        num++;
    }
});

 

 

注意,不要忘记引入jquery的语法库,不然会报错的哟!!!

 

对于上述索引范围的判断,介绍一种简单的办法,此种办法,使用的时一个数取于所获的元素的length值,不管如何,他的范围只是会0~a.length之间

num = (num + 1) % count;

 

 

ok,很方便的使用jquery实现了轮播图效果,欢迎您提出宝贵的意见!!!