刚接触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>

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

转载于:https://www.cnblogs.com/hjzj/p/3508514.html

刚接触js不久，自己写的banner幻灯片效果。相关推荐

js计时器实现页面刷新和幻灯片效果
在网页的特效制作中,经常要用到定时器,比如:间隔一定时间后页面自动跳转,或者间隔一定时间出现某种效果,像网页上的飞雪连天,或者背景颜色的定时改变等等. 若要页面定时跳转,简单的可以在he ...
原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑
前言提到元素拖拽,通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现,它提供了一套完整的事件机制,看起来似乎是首选的解决方案,但实际却不是那么美好,主要是它的样式太过简陋, ...
第0课第2节_刚接触开发板之烧写裸板程序
第0课第2节_刚接触开发板之烧写裸板程序 tftp用法 q //退出菜单 help tftp print //显示IP set ipaddr 192.168.31.203 //设置开发板IP set ...
python框架django书籍_有Python基础，刚接触web框架的Django初学者。
本文面向:有Python基础,刚接触web框架的Django初学者. 环境:windows7 python3.5.1 pycharm Django 1.10版 pip3 一.Django简介百度百科 ...
学生卡变成普通卡_刚接触流量卡的小白看这一篇就够了！！！
最近询问流量卡(物联卡)的朋友越来越多了,有刚开始接触的小白问怎么避免踩坑? 有被不良商家坑过的人问怎样寻找稳定卡板??有遇到限速.虚量的朋友问这种情况该怎么解决??? 问的问题基本都差不多,但一一回 ...
python小案例程序安徽工程大学专用百词斩（刚接触python不喜勿喷）
import time#导入time dev=-1#初始化dev hj=0#练习的初始次数 hw=0#练习的初始次数 hz=0#添加单词的的初始个数 hn=0#挑战的初始次数 eng =[" ...
安卓微信支付踩坑，对刚接触安卓开发的小白绝对有帮助
刚接触安卓开发,就遇到了项目需要接入微信支付以及退款功能,根据自己iOS开发的经验,确定如下几个步骤,一步一步的来,有不对的地方多担待. 1.配置微信支付的环境,下载微信官方提供demo,把里面需要配 ...
myeclipse10中表单中的JS函数无法写return，onsubmit=return check();处出错
myeclipse10中表单中的JS函数无法写return,οnsubmit="return check();"处出错由于 myeclipse10.0自带的设置问题,在表单< ...
JS的手写TRIM函数
JS的手写TRIM函数转载于:https://www.cnblogs.com/vibratea/archive/2009/07/24/1530109.html

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

刚接触js不久，自己写的banner幻灯片效果。相关推荐

最新文章

热门文章