刚接触js不久,自己写的banner幻灯片效果。

来源:转载

 对于我这种菜鸟来讲,刚接触项目。叫我用插件,其实我说插件太臃肿不想用,倒不如说我是看不懂那些插件。。。- -(更愿意自己写点看得懂的代码,顺便也是个学习的过程)

 所以自己花了些时间,自己来写了个demo, 效果很简单。(求轻喷-_-)

下面我就直接贴上代码了

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=1024" />

<meta name="description" content="" />

<meta name="Keywords" content="" />

<title>cfjc</title>

<!--[if lt IE 9]><script type="text/javascript" src="http://www.ruifox.com/resouce/js/company/html5.js"></script><![endif]-->

<style type="text/css">

.left{float:left;}

.right{float:right;}

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

body{margin:0; padding:0;}

ul{margin:0; padding:0;}

.wp {width:1000px; margin:0 auto;position:relative;}

li{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

.nobrder{border-right:none;}

#banner{width:100%; height:500px; position:relative;}

#banner ul {position:relative; min-width:4000px;height: 500px;z-index: 0}

.bnnwp {position:relative;overflow:hidden; width:100%; z-index:40;}

#banner ul li{float:left; min-width:1000px; height:500px;}

#banner ul .b1{background:#423134 url(../images/banner01.jpg) no-repeat center center;}

#banner ul .b2 {background:#45239A;}

#banner ul .b3 {background:#45123A;}

#banner ul .b4{background:#46193A;}

#banner .nextbtn{position:absolute; top:40%;right:50px; z-index:43}

#banner .prvebtn{position:absolute; top:40%;left:50px;z-index:43}

.nextbtn{width:22px; height:43px; background:url(../images/next_hover.png) no-repeat; cursor:pointer; font-size:28px; color:#fff;}

.nextbtn:hover{ background:url(../images/next.png) no-repeat;}

.prvebtn{width:22px; height:43px; background:url(../images/prev.png) no-repeat;cursor:pointer; font-size:28px; color:#fff;}

.prvebtn:hover{ background:url(../images/prev_hover.png) no-repeat;}

#bancontr{position:absolute;bottom:20px; right:100px;z-index:42;}

.heighlight_tip span{display:inline-block;*zoom:1; font-size:28px; color:#fff; *display:inline; width:14px;height:14px; border-radius:50%; text-indent:6px; color:#fff; background:#61676C; line-height:21px; margin-left:10px;cursor:pointer; behavior: url(../images/pie/PIE.htc);}

.heighlight_tip .current{background:#006ba4; no-repeat;}

</style>

</head>

<body>

<section id="banner">

<div class="bnnwp"><ul class="clearfloat">

<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106014754577.jpg") no-repeat center "></li>

<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041757808.jpg") no-repeat center"></li>

<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041812272.jpg") no-repeat center"></li>

<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041820216.jpg") no-repeat center"></li>

</ul>

</div>

<div class="prvebtn"><</div>

<div class="nextbtn">></div>

<div id="bancontr">

<div class="heighlight_tip">

<span class="current" ></span>

<span></span>

<span></span>

<span></span>

<div style="clear:both"></div>

</div>

</div>

</section>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

var index="";

var timer="";

var index="";

var leng=$("li").size();

testLiw(); //banner ——UL宽度设置; 用于自适应屏幕宽度!

$(window).resize(function() {

testLiw();

});

function testLiw(){

Lwith=$("body").width();

xl=(leng+2)*Lwith;

$("#banner ul").width(xl);

$("#banner ul li").width(Lwith);

showpicSet(index);

}

var sWidth=$("li").width(Lwith);

$("#banner ul").css("width", Lwith*(leng+2)); //设置ul的宽度;

$("#banner ul").prepend($("#banner ul li:last").clone()); //为了实现滑动更好的效果你懂的、

$("#banner ul").append($("#banner ul li:eq(1)").clone());

$("#banner ul").css("left", -Lwith+"px"); //初始化幻灯片的位置!

$(".heighlight_tip span").mouseover(function(){

index=$(".heighlight_tip span").index(this);

showpic(index);

}).eq(0).click(); //class="current" 初始化按钮位置!

$(".prvebtn").click(function(){prve();});

$(".nextbtn").click(function(){next();});

function next(){

if(index==leng-1){

index=0;

showlast();

}else{

index++;

showpic(index); }} ; //下一页

function prve(){

if(index==0){index=leng-1;

showfirst();

}

else{

index--;

showpic(index);}} //上一页

function showpicSet(index){ //我也不知道为什么把这个函数写在这下面了,--用来调整在幻灯片播放过程中,自适应屏幕本身的宽度。

var nowLeft= (-index-1)*Lwith;

$(".bnnwp ul").stop(true,false).css('left',nowLeft);

}

function showpic(index){

var nowLeft= (-index-1)*Lwith;

$("#banner ul").stop(true,true).animate({'left':nowLeft},700);

$(".heighlight_tip span").removeClass("current").eq(index).addClass("current");

}

function showlast(){ //最后一张跳到第一张的函数

var nowLeft=(-leng-1)*Lwith;

$("#banner ul").stop(true,false).animate({'left':nowLeft},700,function(){

$("#banner ul").css('left',-Lwith+'px');

})

$(".heighlight_tip span").removeClass("current").eq(0).addClass("current");

}

function showfirst(){ //第一张跳到最后一张的函数

var nowleft=(-leng)*Lwith;

$("#banner ul").stop(true,false).animate({'left':"0px"},700,function(){

$("#banner ul").css('left',nowleft+'px');

})

$(".heighlight_tip span").removeClass("current").eq(leng-1).addClass("current");

}

$("#banner").hover(function(){

clearInterval(timer);},

function(){timer=window.setInterval(function(){next();},6000); }).mouseout();

</script>

</body>

</html>

 


 



//自己都觉得代码写的太冗长了,还请各位大神们多多批评啊,帮小弟我指出些错误。。- -


分享给朋友:
您可能感兴趣的文章:
随机阅读: