基于jquery的轮播插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于jquery的轮播插件相关的知识，希望对你有一定的参考价值。
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box; /
}
ul{
list-style: none;
}
.boxes{
position: relative;
overflow: hidden;
width: 100%;
display: block;
}
.boxes_pics{
position: relative;
white-space: nowrap;
/*transform: translate(-50%,0);*/
z-index: 4;
}
.boxes_pics .item{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
vertical-align: top;
white-space: normal;
margin-right: -5px;
}
.boxes_pics .item>a:not(.item){
line-height: 0;
position: relative;
display: block;
}
.boxes_pics .item>a>img{
width: 100%;
height: auto;
white-space: normal;
border: 0;
}
/*------------------*/
.boxes_dot{
position:absolute;
width:50%;
height: 45px;
left: 0;
right: 0;
bottom:15px;
margin:auto;
z-index: 5;
}
.boxes_dot>span{
display: block;
float: left;
width: 45px;
height: 45px;
margin: 0 5px;
border-radius: 50%;
background: #F1FBFD;
cursor:pointer;
}
.boxes_dot>span:hover,.boxes_dot .active{
background: #333333;
}
/*----------------*/
.boxes_btn{
width: 100%;
height: 45px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
padding:0 15px;
z-index: 5;
display: none;
}
.boxes_btn .up,.boxes_btn .next{
width: 45px;
height: 100%;
border-radius: 50%;
background: rgba(0,0,0,.5);
color: #FFF;
text-align: center;
line-height: 45px;
font-size: 25px;
transition: All 0.5s ease-in-out;
-webkit-transition: All 0.5s ease-in-out;
-moz-transition: All 0.5s ease-in-out;
-o-transition: All 0.5s ease-in-out;
cursor:pointer;
}
.boxes_btn .up{
float: left;
}
.boxes_btn .next{
float: right;
}
.boxes:hover .boxes_btn{
display: block;
}
.boxes_btn>div:hover{
background: rgba(0,0,0,.8);
}
</style>
</head>
<body>
<div class="div">
<div class="boxes lunb1">
<div class="boxes_pics">
<div class="item">
<a>
<img src="http://iph.href.lu/500x200?text=一"/>
</a>
</div>
<div class="item">
<a>
<img src="http://iph.href.lu/500x200?text=二"/>
</a>
</div>
<div class="item">
<a>
<img src="http://iph.href.lu/500x200?text=三"/>
</a>
</div>
<div class="item">
<a>
<img src="http://iph.href.lu/500x200?text=四"/>
</a>
</div>
<div class="item">
<a>
<img src="http://iph.href.lu/500x200?text=五"/>
</a>
</div>
<div class="item">
<a>
<img src="http://iph.href.lu/500x200?text=一"/>
</a>
</div>
</div>
<div class="boxes_dot">
<span class="active"></span><span></span><span></span><span></span>
<span></span>
</div>
<div class="boxes_btn">
<div class="up"><</div>
<div class="next">></div>
</div>
</div>
<hr />
</div>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.Slider.js"></script>
<script type="text/javascript">
$(function(){
$(".lunb1").slider(2000,500,55);
})
</script>
<script type="text/javascript">
</script>
</body>
</html>
js部分
$.fn.slider=function(tm,stm,my_w){
var $this=$(this);
var w=$this.width();
var dot=$this.children(".boxes_dot");
var pics=$this.children(".boxes_pics");
var span=dot.children("span");
var up=$this.children(".boxes_btn").children(".up");
var next=$this.children(".boxes_btn").children(".next");
var extent=pics.children(".item").length-1;
var timer=null,n=0,_in;
timer=setInterval(slider,tm);
dot.width(my_w*extent);
$this.mouseenter(function(){
clearInterval(timer);
})
$this.mouseleave(function(){
timer=setInterval(slider,tm);
})
span.click(function(){
clearInterval(timer);
_in=$(this).index();
n=_in;
yh();
})
up.click(function(){
ssh(-1);
})
next.click(function(){
ssh(1);
})
function ssh(y){
clearInterval(timer);
n=n+y;
if(n<=-1||n>=extent){
console.log("已经是第一张了");
n=n-y;
return;
}
yh();
}
function yh(){
pics.animate({
left:n*-w
},stm,function(){
if(n>=extent){
pics.css("left",0);
n=0;
}
span.removeClass("active").eq(n).addClass("active");
})
}
function slider(){
n++;yh();
}
}
以上是关于基于jquery的轮播插件的主要内容，如果未能解决你的问题，请参考以下文章