您的位置：首页 > 其它

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

2017-03-22 11:36 363 查看

直接上代码

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);
})

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航