• 大家好

区块轮播

首页的三个区块轮播；不局限与图片轮播

dom

<ul class="button">
<li ><a class="current"
href="#">第一屏</a></li>
<li><a href="#">第二屏</a></li>
<li><a href="#">第三屏</a></li>
</ul>
<div class="wrap">
<ul class="content">
<li id="li1" style="background-color: bisque;">我是第一屏</li>
<li id="li2" style="background-color: chocolate;">我是第二屏</li>
<li id="li3" style="background-color: cadetblue;">我是第三屏</li>
</ul>
</div>

css样式

*{
padding:0;
margin:0;
}
img{
border:none;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
ol,dl,dd,dt,ul,li{
list-style:none;
}
.clear{
clear:both;
}
body{
font-family: "微软雅黑";
color: #666;
}
.wrap {
width: 900px;
overflow: hidden;
}
.wrap ul{
width: 3000px;
}
.wrap ul li{
font-size: 40px;
line-height: 300px;
text-align: center;
color: white;
width: 900px;
float: left;
height: 300px;
}
.button {
width: 900px;
height: 100px;
}
.button li{
float: left;
width: 300px;
line-height: 100px;
text-align: center;
}
.button li a{
color: #000000;
}
.button li .current{
color: red;
}

js代码

 var number = 1;
var indicator = '.button';//指示那一部分显示的指示容器
var elementWrap = '.content';//切换区块的容器
var b = 4000;//每帧停留时间
var c = 500;//切换所需时间
var a = $(indicator).children('li').length;
var liWidth = $(elementWrap).children('li').css('width');
liWidth = parseInt(liWidth);
$(document).ready(function(){
yScroll (indicator,elementWrap);
timer = setInterval("autoScroll(indicator,elementWrap)",b) ;
});
//
自动播放函数
function autoScroll(indicator,elementWrap){
if(number == a){
number = 0;
$(indicator).children('li').children('a').removeClass('current');
$(indicator).children('li').eq(number).children('a').addClass('current');
$(elementWrap).animate({marginLeft:-liWidth*number+'px'},c);
number=number+1;
}else{
$(indicator).children('li').children('a').removeClass('current');
$(indicator).children('li').eq(number).children('a').addClass('current');
$(elementWrap).animate({
marginLeft:-liWidth*number+'px'
},c);
number=number+1;
}
}
//
手动播放函数
function yScroll(indicator,elementWrap){
$(indicator).children('li').click(function(){
clearInterval(timer);
var bSerial = $(this).index();
number = bSerial
autoScroll(indicator,elementWrap)
timer = setInterval("autoScroll(indicator,elementWrap)",b) ;
})
};

最后

以上就是精明白昼为你收集整理的区块轮播区块轮播的全部内容，希望文章能够帮你解决区块轮播区块轮播所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。