基於jquery的輪播外掛程式

最後更新：2017-08-14 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：doc utf-8 pointer animate pad timer splay null white

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的輪播外掛程式

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More