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

来源：互联网发布：十六进制转十进制算法编辑：程序博客网时间：2024/05/17 10:43

直接上代码

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 0