您的位置：首页 > Web前端 > JQuery

jQuery Carousel Demo — 基于jQuery的焦点轮播demo

2016-04-29 13:20 656 查看

基于jQuery的焦点轮播demo

jQuery Carousel Demo

最近在学习javaScript最流行之一的类库：jQuery，学习之余，写了项目中经常会用到的焦点轮播，请直接看下面代码。

目录

基于jQuery的焦点轮播demo
目录
CSS部分

jQuery部分

HTML部分

截屏

CSS部分

*{
margin:0;
padding:0;
list-style:none;
}
img{
border:none;
}
#banner{
height:320px;
width:852px;
position:relative;
margin:30px auto;
}
.imgs li{
height:320px;
width:852px;
position:absolute;
left:0;
top:0;
}
.nav{
position:absolute;
bottom:15px;
right:15px;
}
.nav li{
width:20px;
height:20px;
opacity:0.6;
background:#fff;
color:#000;
border:1px solid #000;
font:bold 12px 'Microsoft Yahei';
text-align:center;
line-height:20px;
margin-left:2px;
float:left;
cursor:pointer;
}
.nav li.cur{
background:#000;
border:1px solid #fff;
color:#fff;
}


jQuery部分

$(function(){
var sColor='0123456789ABCDEF',
iColor=sColor.length,
fnRan=function(){
return ~~(Math.random()*iColor);
},
fnColor=function(){//为了演示方便，这里封装一个生成随机颜色的函数
var s='#';
for(var i=0;i<6;i++){
s += sColor[fnRan()];
}
return s;
};

var navLi = $('#banner .nav li'),  //导航

imgsLi = $('#banner .imgs li'),   //图片

duration = 2000,                //停留时间ms

timer = null;                  //定时器

imgsLi.each(function(){
$(this).css('background',fnColor());
});
imgsLi.hide().eq(0).show();//图片初始化
navLi.removeClass('cur').eq(0).addClass('cur');//导航初始化
function next(){
var index = $("#banner .nav li.cur").prevAll().length;//索引
if(index == navLi.length-1){
navLi.removeClass('cur').eq(0).addClass('cur');
imgsLi.fadeOut().eq(0).fadeIn();
}
else{
navLi.removeClass('cur').eq(index+1).addClass('cur');
imgsLi.fadeOut().eq(index+1).fadeIn();
}
}
timer = setInterval(function(){next()},duration)
navLi.click(function(){
if($(this).hasClass("cur"))return false;//屏蔽多次点击
var index = $(this).prevAll().length;//索引
navLi.removeClass('cur').eq(index).addClass('cur');
imgsLi.fadeOut().eq(index).fadeIn();
});
$('#banner').mouseover(function(){clearInterval(timer)});
$('#banner').mouseout(function(){timer=setInterval(function(){next()},duration)});

});


HTML部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基于jQuery的焦点轮播</title>

<!--当然别忘了引用jquery-->
<script src='http://libs.baidu.com/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<div id="banner">

<!--为了演示方便，这里预先放置了部分内容，在实际的项目中可以动态创建-->
<ul class="imgs">
<li>我是1111</li>
<li>我是2222</li>
<li>我是3333</li>
<li>我是4444</li>
<li>我是5555</li>
</ul>
<ul class="nav">
<li class='cur'>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>


截屏



注：以上，仅供参考，欢迎留言，互相交流。另外废话一句，发现markdown编辑器还真TM简单又酷炫！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航