jquery轮播图片（无插件简单版）

2023-07-17 21:49:28

轮播图（第三版）[2016-2-26]

工作中用的，改写了半透明蒙版，可以兼容ie7

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

//轮播图 start

var lunBo = {

    boxObj: null,

    imgsObj: null,

    index: 0,

    timer: 2500,

    Init:function(boxObj,imgsObj) {

        lunBo.boxObj = boxObj;

        lunBo.imgsObj = imgsObj;

        //加事件（鼠标悬停时停止播放，鼠标移出时开始自动播放）

        boxObj.hover(

            function () {

                clearInterval(handid);                    //----------清空定时器

                $('.lunbo-button-prev').show();

                $('.lunbo-button-next').show();

            },

            function () {

                handid = setInterval(lunBo.Next, lunBo.timer);    //----------添加计时器

                $('.lunbo-button-prev').hide();

                $('.lunbo-button-next').hide();

            }

        );

        //设定dot按钮组

        var btnBox = $('.pagination');

        var len = lunBo.imgsObj.length;

        for(var i=0;i<len;i++){

            btnBox.append($('<span class="pagination-bullet"></span>'));

        }

        btnBox.find('.pagination-bullet').bind('mouseover',function(){

            lunBo.index = $(this).index();

            lunBo.Goto(lunBo.index);

        });

        //设定向左、向右按钮

        $('.lunbo-button-prev').click(function(){

            lunBo.Prev();

        });

        $('.lunbo-button-next').click(function(){

            lunBo.Next();

        });

        lunBo.Goto(0);//初始化，显示第一张

        handid = setInterval(lunBo.Next, lunBo.timer);        //----------添加计时器(开始播放)

    },

    Prev:function() {//上一张

        lunBo.index--;

        if (lunBo.index < 0) {lunBo.index = lunBo.imgsObj.length-1;}

        lunBo.Goto(lunBo.index);

    },

    Next:function() {//下一张

        lunBo.index++;

        if (lunBo.index == lunBo.imgsObj.length) {lunBo.index = 0;}

        lunBo.Goto(lunBo.index);

    },

    Goto:function(idx) {

        lunBo.index = idx;

        lunBo.imgsObj.eq(idx).fadeIn(300).siblings().hide();

        //lunBo.imgsObj.eq(idx).fadeIn(300);

        //console.log(idx);

        $('.pagination-bullet').eq(idx).addClass('active').siblings().removeClass('active');

    }

};

lunBo.Init($('.media-container'),$('.lunbo-slide'));

//轮播图 end

});

</script>

<style type="text/css">

ul,li,p{padding:0;margin:0;}

img{border:none;}

.mask-white50{background:#fff;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}

.mask-black50{background:#000;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}

.bg1{background:#003399;}

.media-container{position:relative;float:left;width:430px;height:230px;}

.media-container .lunbo-wrapper{position:relative;width:430px;height:230px;}

.media-container .lunbo-slide{display:none;position:absolute;width:430px;height:230px;}

.media-container .img1{width:430px;height:230px;}

.media-container .txtbox{position:absolute;left:0;right:0;bottom:0;height:40px;color:#fff;z-index:1;}

.media-container .txtbox .mask{position:absolute;left:0;top:0;right:0;bottom:0;}

.media-container .txtbox .p1{position:absolute;line-height:40px;height:40px;padding:0 1em;z-index:2;}

.media-container .pagination-mask{position:absolute;width:100px;height:40px;bottom:0;right:-100px;text-align:center;z-index:4;}

.media-container .pagination {position:absolute;width:100px;height:40px;bottom:0;right:-100px;text-align:center;z-index:5;}/*翻页小圆点*/

/*小圆点 active状态是不透明白点，默认状态是透明白点*/

.media-container .pagination .pagination-bullet {display:inline-block;width:18px;height:18px;border-radius:10px;background:#fff;margin-top:10px;

    opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    margin-right:10px;border:none;z-index:3;cursor:pointer;}

.media-container .pagination .active{background:#fff;opacity:1;filter:alpha(opacity=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

</style>

</head>

<body>

<!-- 首屏轮播图 start -->

<div class="media-container">

    <!-- 430x230 -->

    <div class="lunbo-wrapper">

        <div class="lunbo-slide">

            <a href="##" target="_blank"><img src="data:images/_rj33.png" alt="" class="img1"></a>

            <div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题111</p></div>

        </div>

        <div class="lunbo-slide">

            <a href="##" target="_blank"><img src="data:images/_rj34.png" alt="" class="img1"></a>

            <div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题222</p></div>

        </div>

        <div class="lunbo-slide">

            <a href="##" target="_blank"><img src="data:images/_rj35.png" alt="" class="img1"></a>

            <div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题333</p></div>

        </div>

    </div>

    <div class="pagination-mask bg1"></div>

    <div class="pagination"></div>

</div>

<!-- 首屏轮播图 end -->

轮播图（第二版）[2014-7-4]

对上文的代码做了些改进（代码风格更接近于我最近惯用的风格。）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script type="text/javascript">

var LUNBO = {

    imgsObj: null,

    index: 0,

    timer: 1000,

    Init:function(imgsObj) {

        LUNBO.imgsObj = imgsObj;

        //加事件

        imgsObj.hover(

            function () {

                var idx=$(this).index();                //获得当前索引

                clearInterval(handid);                    //----------清空定时器(鼠标悬停时)

                LUNBO.Goto(idx);                            //----------点击后，跳转到第几张图

            },

            function () {

                handid = setInterval(LUNBO.Play, LUNBO.timer);    //----------添加计时器(鼠标移出时)

            }

        );

        LUNBO.Goto(0);//初始化，显示第一张

        handid = setInterval(LUNBO.Play, LUNBO.timer);        //----------添加计时器(开始播放)

    },

    Play:function() {//自动播放

        LUNBO.index++;

        if (LUNBO.index == LUNBO.imgsObj.length) {LUNBO.index = 0;}

        LUNBO.Goto(LUNBO.index);                                    //----------自动播放状态，跳转到第几张图

    },

    Goto:function(idx) {

        LUNBO.index = idx;

        LUNBO.imgsObj.eq(idx).siblings().hide();

        LUNBO.imgsObj.eq(idx).fadeIn(500);

    },

};

$(document).ready(function () {

    LUNBO.Init($(".box"));

});

</script>

<style type="text/css">

body,ul,li{margin:0;}

ul,li{list-style:none;}

#panel{position:relative;width:550px;height:170px;}

.box{position:absolute;left:0;top:0;width:100%;margin:0px;padding:0px;text-align:center;}

img{border:0;width:550px;height:170px;}

</style>

</head>

<body>

<h1>轮播图，无插件</h1>

<p>鼠标移到图片上，停止轮播。  鼠标移出，开始轮播</p>

    <div id="panel">

        <ul>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></a></li>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></a></li>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></a></li>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></a></li>

        </ul>

    </div>

</body>

</html>

第一版（已废弃） [2013-12-03]

鼠标移到按钮上，图片停止播放。鼠标移出按钮，图片开始自动播放。

靠imgCenter这个方法调用。将“图片列表对象”和"按钮列表对象"直接作为参数传进去。

(new imgsCenter( $(".imgbig"),$(".imgbtn") )).Init();

大图上面没做鼠标事件（需要的可以自己加hover事件）

 <!DOCTYPE html>

 <html>

 <head>

 <title></title>

 <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

 </head>

 <body>

 <script type="text/javascript">

 function imgsCenter(imgsObj,buttonsObj){

     var index = 0;                //当前图片序号

     var self = this;

     var handid;

     this.length = imgsObj.length;

     this.timer = 2000;

     //初始化

     this.Init = function(){

         //按钮加事件

         buttonsObj.hover(

             function () {

                 buttonsObj.removeClass("hover");

                 $(this).addClass("hover");

                 var idx=$(this).index();                //获得当前索引

                 clearInterval(handid);                    //----------清空定时器(鼠标悬停时)

                 self.Goto(idx);                            //----------点击后，跳转到第几张图

             },

             function () {

                 handid = setInterval(self.Play, self.timer);    //----------添加计时器(鼠标移出时)

             }

         );

         //初始化，显示第一张

         self.Goto(0);

         handid = setInterval(self.Play, self.timer);        //----------添加计时器(开始播放)

     }

     //跳转到第几张图

     this.Goto = function(idx){

         index = idx;

         imgsObj.eq(idx).siblings().hide();

         imgsObj.eq(idx).show();

         //imgsObj.eq(idx).siblings().fadeOut(200);

         //imgsObj.eq(idx).fadeIn(200);

         //当前图片显示，其余图片隐藏

         imgsObj.eq(index).siblings().hide();

         imgsObj.eq(index).show();

         //图片序号背景更换

         buttonsObj.eq(index).siblings().removeClass("hover");

         buttonsObj.eq(index).addClass("hover");

     }

     //自动播放

     this.Play = function () {

         index++;

         if (index == self.length) {index = 0;}

         self.Goto(index);                                    //----------自动播放状态，跳转到第几张图

     };

 }

 $(document).ready(function () {

     (new imgsCenter(  $(".imgbig"),$(".imgbtn") )).Init();

 });

 </script>

 <style type="text/css">

 ul{list-style:none;}

 .imgbtn{

     background: #FF70Ad;

     border:1px solid #000000;

     width:20px;

     height:16px;

     cursor:hand;

     float:left;

     margin:3px;

     padding:3px;

     text-align:center;

 }

 .hover{background: #FFFF00;}

 .imgbig{

     position:absolute;

     width:500px;

     height:170px;

     margin:0px;

     padding:0px;

     text-align:center;

     border:1px solid #ff9900;

 }

 #div1{

     position:relative;

     height:200px;

 }

 #divbtn{

     position:relative;

     left:0px;

     top:0px;

 }

 #divimg{

     position:relative;

     left:0px;

     top:30px;

 }

 </style>

 <!--整体容器-->

 <div id="div1">

     <!--序号-->

     <div id="divbtn">

         <ul>

             <li class="imgbtn">1</li>

             <li class="imgbtn">2</li>

             <li class="imgbtn">3</li>

             <li class="imgbtn">4</li>

         </ul>

     </div>

     <div id="divimg">

         <!--图片列表，除第一张显示外，其余隐藏-->

         <ul>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></li>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></li>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></li>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></li>

         </ul>

     </div>

 </div>

 </body>

 </html>

码农公寓

轮播图（第三版）[2016-2-26]

轮播图（第二版）[2014-7-4]

第一版（已废弃） [2013-12-03]

相关文章