JQuery实现滑动banner轮番图

来源：互联网发布：怎样看网络直播送礼物编辑：程序博客网时间：2024/06/14 00:58

轮番图常用的图片信息展示效果，也是每一个初级前端人员需要学习的效果。

实现滑动的原理是:控制同级元素的整体位置，再通过jquery的动作animate(),缓慢的实现这一过程。则就会显现滑动效果。下面是菜鸟的代码演示。

代码的最后方有免费的源文件可以下载，供和我一样的初学者学习和交流。同时也希望大牛提出更好的方法和建议。

html:

<div id="banner"><ul><li><h2><a href="javascript:"><img src="images/1.jpg"></a></h2><div class="Down"><div class="left"></div><div class="up"><a href="javascript:">AAAAAAA</a></div><div class="p"><a href="javacript:">1234556778</a></div></div></li><li><h2><a href="javascript:"><img src="images/2.jpg"></a></h2><div class="Down"><div class="left"></div><div class="up"><a href="javascript:">BBBBBBBBBB</a></div><div class="p"><a href="javacript:">BBBBBBBBBBB</a></div></div></li><li><h2><a href="javascript:"><img src="images/3.jpg"></a></h2><div class="Down"><div class="left"></div><div class="up"><a href="javascript:">AAAAAAA</a></div><div class="p"><a href="javacript:">1234556778</a></div></div></li><li><h2><a href="javascript:"><img src="images/4.jpg"></a></h2><div class="Down"><div class="left"></div><div class="up"><a href="javascript:">AAAAAAA</a></div><div class="p"><a href="javacript:">1234556778</a></div></div></li><li><h2><a href="javascript:"><img src="images/5.jpg"></a></h2><div class="Down"><div class="left"></div><div class="up"><a href="javascript:">AAAAAAA</a></div><div class="p"><a href="javacript:">1234556778</a></div></div></li>

css样式

body {padding: 0;margin:0;}img{border: 0;}a{color: #000;text-decoration: none;}/*banner容器*/#banner{width: 800px;height: 500px;position: relative;margin: 0 auto;overflow: hidden;}/*banner分容器ul*/#banner ul{margin: 0;padding: 0;position: absolute;}#banner ul li{width: 800px;height: 500px;float: left;position: relative;overflow: hidden;background:#000;} #banner ul li h2{margin: 0;padding: 0;}/*banner中容器中，上一个，下一个，按钮*/#banner .PreNext{width: 45px;height: 100px;position: absolute;top: 150px;background: url('../images/LR.png')no-repeat 0 0;cursor: pointer;}#banner .Pre{left: 0;}#banner .Next{right: 0;background-position:right top;}/*下方的一百数字按钮*/#banner .But{width: auto;height: 15px;position: absolute;right: 20px;bottom: 60px;}#banner .But span{width: 50px;height: 15px;float: left;margin-right: 10px;background: #000;cursor: pointer;background: #fff;}/*容器下方的文字区域容器*/#banner ul li .Down{width: 800px;height: 100px;position: absolute;bottom: 0;background:url("../images/Dwbg.png");}/*小字体钱的图标部分*/#banner ul li .Down .left{width: 80px;height: 80px;position:absolute;float: left;margin: 10px ;background: red;}/*标题大字体部分*/#banner ul li .Down .up{position: absolute;font-size: 25px;font-weight: bold;left: 100px;top: 10px;}/*标题下的小字体*/#banner ul li .Down .p{position: absolute;left: 100px;top: 50px;font-size: 16px;font-weight: bold;}

JS代码：

/** * @author yangyu Time:2014/09/27 */$(function(){    var Swidth=$("#banner").width();    var len=$("#banner ul li").length;    var index=0;    var PicTimer;    //定义ul的宽度，否则将断续显示    $("#banner ul").css("width",Swidth * (len));    //动态的添加按钮以及数字按钮    var but="<div class='But'>";    for(var i=0;i<len;i++){        but +="<span></span>";    }    but +="</div><div class='PreNext Pre'></div><div class='PreNext Next'></div>";    $("#banner").append(but);    $("#banner .But").css("opacity",0.5);    //对按钮进行透明度处理    $("#banner .PreNext").css("opacity",0.2).hover(function(){        $(this).stop(true,false).animate({"opacity":"0.5"},300);    },function(){        $(this).stop(true,false).animate({"opacity":"0.2"},300);    });    //上一个    $("#banner .Pre").click(function(){        index -=1;//index=index-1        if(index<0){            index=len-1;        }        showPic(index);    });    //下一个    $("#banner .Next").click(function(){        index +=1;        if(index == len){            index=0;        }        showPic(index);    });    //为下方的数字按钮添加触发方法    $("#banner .But span").css("opacity",0.4).mouseenter(function(){        index=$("#banner .But span").index(this);        showPic(index);    }).eq(0).trigger("mouseenter");    //自动滚动方法    $("#banner").hover(function(){        if (index>0) {index=index-1};        clearInterval(PicTimer);    },function(){        PicTimer=setInterval(function(){            showPic(index);            index++;            if(index==len){index=0;}        },3000);    }).trigger("mouseleave");    //图片显示方法    function showPic(index){        var nowLeft= -index*Swidth;        $("#banner ul").stop(true,false).animate({"left":nowLeft},1500);        $("#banner .But span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);     }});

源代码免费下载地址：http://download.csdn.net/detail/u014703834/8099817

0 0