JavaScript Jquery 首页图片轮流播放

来源:互联网 发布:python turtle填色 编辑:程序博客网 时间:2024/03/29 12:51

图片轮播效果:

(这里需要引入Jquery)

代码:

CSS:

/*banner*/.banner_index{height:355px;position: relative;overflow:hidden;width:960px; margin:0 auto; margin-top:55px;}.banner_index .btn,.banner_pro .bBtn{position: absolute;top:105px;width: 56px;height: 78px;display: block;z-index: 3;}.banner_index .btnPre,.banner_pro .bPre{background: url(../images/bg_btnPre_index.png) no-repeat 0 0;left:20px;}.banner_index .btnPre:hover,.banner_pro .bPre:hover{background: url(../images/bg_btnPre_index_hover.png) no-repeat 0 0;}.banner_index .btnNext,.banner_pro .bNext{background: url(../images/bg_btnNext_index.png) no-repeat 0 0;right: 20px;}.banner_index .btnNext:hover,.banner_pro .bNext:hover{background: url(../images/bg_btnNext_index_hover.png) no-repeat 0 0;}.banner_index .banner_wrap{position: absolute;left:0px;top: 0px; z-index: 2;}.banner_index .banner_wrap li{width:960px; height:295px;float: left;}.indexBanner_num{width:960px;margin: 0 auto;padding:0px;text-align: center; margin-top:-35px; position:relative; z-index:9999;} .indexBanner_num a{width: 10px;height: 10px;display: inline-block;_zoom:1;background: url(../images/bg_num.png) no-repeat 0 0;font-size: 0px;line-height: 0px;margin:0 3px;}.indexBanner_num a.on,.indexBanner_num a:hover{background: url(../images/bg_num_on.png) no-repeat 0 0;}.qie_left{ width:660px; height:355px; float:left; overflow:hidden; text-indent:0.25em }.qie_right{ width:300px; height:355px; float:left; overflow:hidden; color:#333;}.qie_kong{ width:300px; height:355px; position:relative; z-index:22;}.qie_bg{ width:300px; height:355px; background:#ffffff;filter:alpha(opacity=70);opacity:0.7; position:relative; top:-355px; z-index:1;}.qie_right span{ display:block; float:left;}.qr_left{ width:240px; height:200px; margin-bottom:15px; margin-left:36px; _margin-left:33px; margin-top:60px;overflow:hidden;}.qr_left p{ font-size:14px; font-family:"微软雅黑","黑体","宋体"; text-align:justify; line-height:20px; text-indent:24px;}.qr_left b{ font-size:16px; font-family:"微软雅黑","黑体","宋体";}.qr_left font{ margin-left:40px; font-size:14px; font-weight:bold;}.qr_tit{ height:30px; margin-bottom:10px;}.qr_right{ width:150px; height:295px; overflow:hidden;}.qr_right img{ margin-left:50px; margin-top:75px;}.index_con{ width:960px;padding-left:5px; height:250px; margin:0 auto; overflow:hidden;}.index_con ul{ width:240px; height:auto; overflow:hidden; float:left; font-size:14px; font-family:"微软雅黑","黑体","宋体"; color:#2b2b2b; margin-top:40px;}.index_con ul li{ width:220px; height:26px; overflow:hidden;}/*新加更多代码及字体变小*/.index_ctit{ font-size:16px; font-weight:bold; padding-bottom:15px;}.in_tt{ margin-right:90px;}.in_ta{ font-size:14px; font-weight:100;}/*新加更多代码及字体变小*/


JavaScript:

/*幻灯片切换*/function ShowPre(o){var that= this;this.box = $("#"+o["box"]);this.btnP = $("#"+o.Pre);this.btnN= $("#"+o.Next);this.v = o.v||1;this.c = 0;var li_node = "li";this.loop = o.loop||false;//循环生成domif(this.loop){this.li =  this.box.find(li_node);this.box.append(this.li.eq(0).clone(true));};this.li = this.box.find(li_node);this.l = this.li.length;//滑动条件不成立if(this.l<=this.v){this.btnP.hide();this.btnN.hide();};this.deInit = true;this.w = this.li.outerWidth(true);this.box.width(this.w*this.l);this.maxL = this.l - this.v;//要多图滚动 重新计算变量this.s = o.s||1;if(this.s>1){this.w = this.v*this.w;this.maxL = Math.floor(this.l/this.v);this.box.width(this.w*(this.maxL+1));//计算需要添加数量var addNum = (this.maxL+1)*this.v-this.l;var addHtml = "";for(var adN = 0;adN < addNum;adN++){addHtml += "<li class='addBox'><div class='photo'></div><div class='text'></div></li>";};this.box.append(addHtml);};//生成状态图标this.numIco = null;if(o.numIco){this.numIco  = $("#"+o.numIco);var numHtml = "";numL = this.loop?(this.l-1):this.l;for(var i = 0;i<numL;i++){numHtml+="<a href='javascript:void(0);'>"+i+"</a>";};this.numIco.html(numHtml);this.numIcoLi = this.numIco.find("a");this.numIcoLi.bind("click",function(){if(that.c==$(this).html())return false;that.c=$(this).html();that.move();});};this.bigBox = null;this.loadNumBox = null;if(o.loadNumBox){this.loadNumBox = $("#"+o.loadNumBox);};//当前序号设置this.allNumBox = null;if(o.loadNumBox){this.allNumBox = $("#"+o.allNumBox);if(o.bBox){var cAll = this.l<10?("0"+this.l):this.l;}else{var cAll = this.maxL<10?("0"+(this.maxL+1)):(this.maxL+1);};this.allNumBox.html(cAll);};//大图按钮点击操作if(o.bBox){this.bigBox = $("#"+o.bBox);this.li.each(function(n){$(this).attr("num",n);var cn = (n+1<10) ? ("0"+(n+1)):n+1;$(this).find(".text").html(cn);});this.loadNum = 0;this.li.bind("click",function(){if(that.loadNum==$(this).attr("num"))return false;var test = null;if(that.loadNum>$(this).attr("num")){test = "pre";};that.loadNum = $(this).attr("num");that.loadImg(test);});that.loadImg();if(o.bNext){that.bNext = $("#"+o.bNext);that.bNext.bind("click",function(){that.loadNum<that.l-1 ?that.loadNum++:that.loadNum=0;that.loadImg();});};if(o.bPre){that.bPre = $("#"+o.bPre);that.bPre.bind("click",function(){that.loadNum> 0? that.loadNum--:that.loadNum=that.l-1 ;that.loadImg("pre");});};};//滑动点击操作(循环or不循环)if(this.loop){this.btnP.bind("click",function(){if(that.c<=0){that.c = that.l-1;that.box.css({left:-that.c*that.w});};that.c --;that.move(1);});this.btnN.bind("click",function(){if(that.c>=(that.l-1)){that.box.css({left:0});that.c = 0;};that.c++;that.move(1);});}else{this.btnP.bind("click",function(){that.c> 0? that.c--:that.c=that.maxL ;that.move(1);});this.btnN.bind("click",function(){that.c<that.maxL ?that.c++:that.c=0;that.move(1);});};that.timer = null;if(o.auto){that.box.bind("mouseover",function(){clearInterval(that.timer);});that.box.bind("mouseleave",function(){that.autoPlay();});that.autoPlay();};this.move();}ShowPre.prototype = {move:function(test){ //滑动方法var that = this;var pos = this.c*this.w;//document.title = (test&&that.timer);if(test&&that.timer){clearInterval(that.timer);};//当前序号图标if(that.numIco){ that.numIcoLi.removeClass("on");var numC = that.c;if(that.loop&&(that.c==(this.l-1))){numC= 0;};that.numIcoLi.eq(numC).addClass("on");};this.box.stop();this.box.animate({left:-pos},function(){if(test&&that.auto){that.autoPlay();};if(that.loop&&that.c==that.maxL){that.c = 0;that.box.css({left:0})};});if(that.bigBox)return false;//设置大图加载序号if(that.loadNumBox){var loadC = parseInt(that.c)+1;loadC = loadC<10?"0"+loadC:loadC;that.loadNumBox.html(loadC);};},loadImg:function(test){ //加载大图方法var that = this;var _src = this.li.eq(that.loadNum).attr("bsrc"),bigTh3=null,bigTh4=null,bigText=null;if(that.li.eq(that.loadNum).attr("data-h")){//$("#bigT h3").html(that.li.eq(that.loadNum).attr("data-h"));var bigTh3 = $("#bigT h3");$("#bigT").hide();bigTh3.html("");};if(that.li.eq(that.loadNum).attr("data-m")){//$("#bigT h4").html(that.li.eq(that.loadNum).attr("data-m"));var bigTh4 = $("#bigT h4");$("#bigT").hide();bigTh4.html("");};if(that.li.eq(that.loadNum).attr("data-text")){//$("#bigText").html(that.li.eq(that.loadNum).attr("data-text"));var bigText = $("#bigText");bigText.html("").hide();};var img = new Image();$(img).hide();//loading dom操作(分首次加载和后面加载,根据点击操作设置运动方向)if(that.deInit){var le = 0;that.deInit = false;that.bigBox.html("<div class='loading'></div><div class='loading'></div>");}else{if(test!="pre"){var le = -1230;that.bigBox.append("<div class='loading'></div>");}else{var le = 1230;that.bigBox.find(".loading").before("<div class='loading'></div>");that.bigBox.css({"margin-left":-1230});le = 0;};};that.bigBox.animate({"margin-left":le},function(){$(img).bind("load",function(){//判断出现方向if(test!="pre"){var n = 1,oldN = 0;}else{var n = 0,oldN = 1;};that.bigBox.find(".loading").eq(n).html(img);that.bigBox.find(".loading").eq(oldN).remove();that.bigBox.css({"margin-left":0});$(this).fadeIn(200,function(){if(bigTh3){$("#bigT").fadeIn()bigTh3.html(that.li.eq(that.loadNum).attr("data-h"));};if(bigTh4){$("#bigT").fadeIn()bigTh4.html(that.li.eq(that.loadNum).attr("data-m"));};if(bigText){bigText.html(that.li.eq(that.loadNum).attr("data-text")).fadeIn();};});});img.src = _src;});//添加当前加载序号that.li.removeClass("on");that.li.eq(that.loadNum).addClass("on");if(that.loadNumBox){var loadC = parseInt(that.loadNum)+1;loadC = loadC<10?"0"+loadC:loadC;that.loadNumBox.html(loadC);};},autoPlay:function(){ //自动播放方法var that =this;that.timer = setInterval(function(){that.c<that.maxL?that.c++:that.c=0;that.move();},4000);}}


HTML:

<!-- 幻灯片 代码 开始 --><div class="banner_index">    <ul class="banner_wrap" id="banner_index">        <c:forEach items="${sliders}" var="pobj">            <li>                <div class="qie_left">                    <div style="margin:0 auto;width:1100px;height:390px;background-color:#999;position:relative;background-image:url(<%=basePath %>${pobj.imgUrl});background-size:cover;border-radius:5px;overflow:hidden;box-shadow: 0 0 5px #ccc">                    <div style="width:100%;position:absolute;bottom:0;height:50px;background-image:url(images/b.png);color:#FFF;font-size:14px;font-family:'微软雅黑';line-height:50px">                      ${pobj.title}                    </div>                    </div>                </div>            </li>        </c:forEach>    </ul></div><script type="text/javascript">var ShowPre1 = new ShowPre({    box: "banner_index",    Pre: "banner_index_pre",    Next: "banner_index_next",    numIco: "index_numIco",    loop: 1,    auto: 1});</script>

注意,其实这里有前后的滑动按钮和底部的页面选择小白点. 因为项目不需要,这里都隐藏了.


分析:

下面对部分代码进行分析,如果有错,还请各位斧正.

这里每一个最基本的滑动单位是 li ,这里做了一个最基本的个数判断,如果个数小于1的话,不会进行无效的滑动.



0 0
原创粉丝点击