非常实用的焦点图/轮播图

最新推荐文章于 2022-07-29 22:20:06 发布

雪城以东

最新推荐文章于 2022-07-29 22:20:06 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/sinat_37566518/article/details/64906753

版权

直接上代码

html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jquery仿网易轮播图</title>
    <link rel="stylesheet" href="css/slide.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/slide.js"></script>
</head>
<body>
<div class="slide">
    <div class="img_box">
        <a href="javascript:;" class="cur"><img src="img/01.jpg" alt=""></a>
        <a href="javascript:;"><img src="img/02.jpg" alt=""></a>
        <a href="javascript:;"><img src="img/03.jpg" alt=""></a>
        <a href="javascript:;"><img src="img/04.jpg" alt=""></a>
        <a href="javascript:;"><img src="img/05.jpg" alt=""></a>
    </div>
    <div class="select_box" >
        <span class="prev"><</span>
        <span class="next">></span>
    </div>
    <div class="point_box">
        
    </div>
</div>
</body>
</html>

css样式

/*轮播盒子*/
.slide{
    width: 650px;
    height: 250px;
    /*padding:10px 15px;*/
    margin:100px auto;
    position: relative;
  /*  border:1px solid #12b6b0;*/
}
/*图片盒子*/
.img_box{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.img_box a{
    position: absolute;
    left:650px;
    width: 100%;
    height: 100%;
}
.img_box img{
    width: 100%;
    height: 100%;

}
.img_box a.cur{
    position: absolute;
    left:0;
}


/*上下选择盒子*/
.select_box{
   /* width: 650px;
    height: 50px;
    position: absolute;
    !*left: 15px;*!
    top: 100px;
    display: none;*/
}
.select_box span{
    display: none;
    width: 30px;
    height: 50px;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    font-size: 26px;
    font-family: "宋体";
    font-weight:bold;
    color: #fff;
    cursor: pointer;
    background-color: rgba(0,0,0,.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
    user-select:none;/*让切换键在多次点击下保持不被选中状态*/
}
.select_box span.prev{
    position: absolute;
    left:0;
    top:100px;
}
.select_box span.next{
    position: absolute;
    right:0;
    top:100px;
}



/*圆点盒子*/
.point_box{
    width: 650px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    left: 15px;
    bottom: 10px;
}
.point_box span{
    display: inline-block;
    width: 10px;
    height: 10px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    background-color: #dcdcdc;
    margin:0 5px;
    cursor: pointer;
}
.point_box span.cur{
    background-color: #12b6b0;
}

/**
 * Created by ASUS on 2017/3/16.
 */
$(document).ready(function () {
    var slide=$(".slide");//包裹整个轮播的盒子
    var img_box=$(".img_box");//包裹图片的盒子
    var img_a=img_box.find("a");//图片
    var select_box=$(".select_box");//图片切换选择盒子
    var select_span=select_box.find("span");//
    var prev=select_box.find(".prev");//前一个选择
    var next=select_box.find(".next");//下一个选择
    var point_box= $(".point_box");//小圆点盒子

   /* var num=a.size();*///图片的个数 和  img_a.length 相等


    /*自动轮播*/
    var timer=null;
    var now=0;
    timer=setInterval(autoPlay,2500);
    function autoPlay() {
        img_a.eq(now).animate({left:-img_box.width()},800);
        now++;
        if (now>img_a.length-1){
            now=0
        }
        img_a.eq(now).css({left:img_box.width()});
        img_a.eq(now).animate({left:0},800);
        point_box.find("span").eq(now).addClass("cur").siblings().removeClass("cur")
    }

    /*切换图片盒子*/
    slide.on("mouseenter",function () {
        clearInterval(timer);
        select_span.show()
    }).on("mouseleave",function () {
        timer=setInterval(autoPlay,2500);
        select_span.hide()
    });

    /*切换图片盒子点击事件*/
    var timer_prev=null;
    prev.on("click",function () {
        clearTimeout(timer_prev);
        timer_prev=setTimeout(function () {
            img_a.eq(now).animate({left:img_box.width()},200);
            now--;
            if (now<0){
                now=img_a.length-1
            }
            img_a.eq(now).css({left:-img_box.width()});
            img_a.eq(now).animate({left:0},200);
            point()
        },200);

    });
    var timer_next=null;
    next.on("click",function () {
        clearTimeout(timer_next);
        timer_next=setTimeout(function () {
            img_a.eq(now).animate({left:-img_box.width()},200);
            now++;
            if (now>img_a.length-1){
                now=0
            }
            img_a.eq(now).css({left:img_box.width()});
            img_a.eq(now).animate({left:0},200);
            point()
        },200);

    });


    /*圆点盒子*/

    /*根据图片的个数动态生成圆点*/
    for (var i=0;i<img_a.length;i++){
        var point_span= $("<span></span>");
        point_box.append(point_span);
        point()
    }

    /*圆点样式变化*/
    function point(){
        point_box.find("span").eq(now).addClass("cur").siblings().removeClass("cur")
    }

    /*鼠标放在圆点上切换图片*/
    var timer1=null;
    var timer2=null;
    point_box.find("span").on("mouseenter",function () {
        clearTimeout(timer1);
        clearTimeout(timer2);
        var $this=$(this);
        if ($this.index()>now){
           timer1=setTimeout(function () {
               img_a.eq(now).animate({left:-img_box.width()},200);
               now=$this.index();
               img_a.eq(now).css({left:img_box.width()});
               img_a.eq(now).animate({left:0},200);
               $this.addClass("cur").siblings().removeClass("cur")
           },200)
        }else if ($this.index()<now){
            timer2=setTimeout(function () {
                img_a.eq(now).animate({left:img_box.width()},200);
                now=$this.index();
                img_a.eq(now).css({left:-img_box.width()});
                img_a.eq(now).animate({left:0},200);
                $this.addClass("cur").siblings().removeClass("cur")
            },200)
        }
    }).on("mouseleave",function () {
        clearTimeout(timer1);
        clearTimeout(timer2);
    })




});

雪城以东

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
非常实用的焦点图/轮播图

直接上代码html代码html>lang="zh-CN"> charset="UTF-8"> jquery仿网易轮播图 rel="stylesheet" href="css/slide.css"> src="js/jquery-1.11.1.min.js"> src="js/slide.js">class="slide"> cl
复制链接

扫一扫