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

Jquery制作--轮播

2015-11-23 02:34 316 查看 
HTML代码:

<!doctypehtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<title>banner图</title>
<linkhref="css/style.css"rel="stylesheet"/>
<scriptsrc="js/jquery-1.9.1.min.js"></script>
<scriptsrc="js/common.js"></script>
</head>
<body>
<divclass="wrap">
<divclass="banner">
<divclass="bannerCon">
<ulclass="imgListclearfix">
<li><ahref="#"><imgsrc="images/banner01.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/banner02.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/banner03.jpg"alt=""/></a></li>
</ul>
<ulclass="btnListclearfix">
<liclass="cur"><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<spanclass="pre-nexprev"><</span>
<spanclass="pre-nexnext">></span>
</div>
</div>
</div>
</body>
</html>

CSS样式:

body,p,ul,ol,li{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
img{border:none;}
a,button{outline:none;}
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:"";
clear:both;
height:0;
}
/*具体样式*/
.banner{
position:relative;
height:400px;
overflow:hidden;
}
.banner.bannerCon{
position:absolute;
top:0;
left:50%;
width:800px;
height:400px;
margin-left:-400px;
overflow:hidden;
}
.bannerCon.imgList{
position:absolute;
top:0;
left:0;
width:99999px;
height:400px;
}
.bannerCon.imgListli{
float:left;
width:800px;
height:400px;
}
.bannerCon.imgListlia{
position:relative;
display:block;
height:100%;
}
.bannerCon.imgListliimg{
width:800px;
height:400px;
}
.bannerCon.pre-nex{
display:none;
position:absolute;
top:50%;
width:40px;
height:60px;
margin-top:-40px;
font:bold40px/60pxSimsun;
color:#ccc;
text-align:center;
border:none;
background:rgba(0,0,0,.30);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000,endColorStr=#4c000000);
cursor:pointer;
z-index:3;
}
.bannerCon.pre-nex.show{display:inline-block;}
.bannerCon.prev{left:13%;}
.bannerCon.next{right:13%;}
.bannerCon.btnList{
position:absolute;
left:0;
bottom:20px;
width:100%;
height:12px;
text-align:center;
z-index:2;
_overflow:hidden;
}
.bannerCon.btnListli{display:inline;}
.bannerCon.btnListlispan{
display:inline-block;
width:12px;
height:12px;
margin:05px;
border-radius:6px;
background-color:#14829e;
cursor:pointer;
}
.bannerCon.btnListli.curspan{background-color:#f30;}

js代码:

functionScroll(obj,speed,interval){//父级容器，轮播速度，切换间隔
$("."+obj).each(function(){
var$box=$(this),
$imgUl=$box.children(".imgList"),
$imgLi=$imgUl.children("li"),
$btnUl=$box.children(".btnList"),
$btnLi=$btnUl.children("li"),
$btnPreNex=$box.children(".pre-nex"),
$btnPre=$box.children(".prev"),
$btnNex=$box.children(".next"),
n=$imgLi.length,
width=$imgLi.width(),
left=parseFloat($imgUl.css("left")),
k=0,
Player;
$imgUl.css("width",n*width);
functionscroll(){//轮播事件
$imgUl.stop().animate({left:-width},speed,function(){
k+=1;
$imgUl.css("left",0);
$imgUl.children("li:first").appendTo($(this));
$btnLi.removeClass('cur');
if(k>=n){
k=0;
}
$btnUl.children("li").eq(k).addClass('cur');
});
}
$btnLi.click(function(){//小圆点点击事件
varindex=$btnLi.index(this);
$(this).addClass('cur').siblings("li").removeClass('cur');
if(index>=k){
vardif=index-k;
left=-dif*width;
$imgUl.stop().animate({left:left},speed,function(){
$imgUl.css("left",0);
$imgUl.children("li:lt("+dif+")").appendTo($imgUl);
});
}
else{
varj=n-(k-index);
$imgUl.css("left",(index-k)*width);
$imgUl.children("li:lt("+j+")").appendTo($imgUl);
$imgUl.stop().animate({left:0},speed);
}
k=index;
});
$btnPreNex.click(function(){//左右按钮点击事件
varindex=$btnLi.index(this);
if($(this).hasClass('next')){
if(!$imgUl.is(":animated")){
k+=1;
$imgUl.animate({left:-width},speed,function(){
$imgUl.css("left",0);
$imgUl.children("li:first").appendTo($(this));
if(k>=n){
k=0;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
});
}
}
else{
if(!$imgUl.is(":animated")){
k+=-1;
$imgUl.css("left",-width);
$imgUl.children("li:last").prependTo($imgUl);
$imgUl.stop().animate({left:0},speed);
if(k<0){
k=n-1;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
}
}
});
$box.hover(//鼠标移入、移出事件
function(){
clearInterval(Player);
$btnPreNex.addClass('show');
},
function(){
Player=setInterval(function(){scroll()},interval);
$btnPreNex.removeClass('show');
}
);
Player=setInterval(function(){scroll()},interval);
});
}
$(function(){//读取轮播事件
Scroll("bannerCon",600,4000);
});



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航