zoukankan html css js c++ java

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

轮播图（第三版）[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="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="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="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事件）

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title></title>
  5 <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  6 </head>
  7 <body>
  8 
  9 
 10 
 11 <script type="text/javascript">
 12 function imgsCenter(imgsObj,buttonsObj){
 13     var index = 0;                //当前图片序号
 14     var self = this;
 15     var handid;
 16     this.length = imgsObj.length;
 17     this.timer = 2000;
 18 
 19 
 20     //初始化
 21     this.Init = function(){
 22 
 23         //按钮加事件
 24         buttonsObj.hover(
 25             function () {
 26                 buttonsObj.removeClass("hover");
 27                 $(this).addClass("hover");
 28                 var idx=$(this).index();                //获得当前索引
 29                 clearInterval(handid);                    //----------清空定时器(鼠标悬停时)
 30                 self.Goto(idx);                            //----------点击后，跳转到第几张图
 31             },
 32             function () {
 33                 handid = setInterval(self.Play, self.timer);    //----------添加计时器(鼠标移出时)
 34             }
 35         );
 36 
 37         //初始化，显示第一张
 38         self.Goto(0);
 39         handid = setInterval(self.Play, self.timer);        //----------添加计时器(开始播放)
 40 
 41     }
 42 
 43     //跳转到第几张图
 44     this.Goto = function(idx){
 45         index = idx;
 46 
 47         imgsObj.eq(idx).siblings().hide();
 48         imgsObj.eq(idx).show();
 49         //imgsObj.eq(idx).siblings().fadeOut(200);
 50         //imgsObj.eq(idx).fadeIn(200);
 51 
 52         //当前图片显示，其余图片隐藏
 53         imgsObj.eq(index).siblings().hide();
 54         imgsObj.eq(index).show();
 55 
 56         //图片序号背景更换
 57         buttonsObj.eq(index).siblings().removeClass("hover");
 58         buttonsObj.eq(index).addClass("hover");
 59 
 60     }
 61 
 62 
 63     //自动播放
 64     this.Play = function () {
 65         index++;
 66         if (index == self.length) {index = 0;}
 67         self.Goto(index);                                    //----------自动播放状态，跳转到第几张图
 68 
 69     };
 70 
 71 
 72 }
 73 
 74 
 75 
 76 
 77 $(document).ready(function () {
 78     (new imgsCenter(  $(".imgbig"),$(".imgbtn") )).Init();
 79 
 80 
 81 
 82 });
 83 
 84 </script>
 85 
 86 
 87 <style type="text/css">
 88 ul{list-style:none;}
 89 .imgbtn{
 90     background: #FF70Ad;
 91     border:1px solid #000000;
 92     width:20px;
 93     height:16px;
 94     cursor:hand;
 95 
 96     float:left;
 97     margin:3px;
 98     padding:3px;
 99     text-align:center;
100 
101 }
102 .hover{background: #FFFF00;}
103 .imgbig{
104     position:absolute;
105     width:500px;
106     height:170px;
107     margin:0px;
108     padding:0px;
109     text-align:center;
110     border:1px solid #ff9900;
111 }
112 
113 #div1{
114     position:relative;
115     height:200px;
116 }
117 
118 #divbtn{
119     position:relative;
120     left:0px;
121     top:0px;
122 }
123 #divimg{
124     position:relative;
125     left:0px;
126     top:30px;
127 }
128 </style>
129 
130 <!--整体容器-->
131 <div id="div1">
132     <!--序号-->
133     <div id="divbtn">
134         <ul>
135             <li class="imgbtn">1</li>
136             <li class="imgbtn">2</li>
137             <li class="imgbtn">3</li>
138             <li class="imgbtn">4</li>
139         </ul>
140     </div>
141 
142     <div id="divimg">
143         <!--图片列表，除第一张显示外，其余隐藏-->
144         <ul>
145             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></li>
146             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></li>
147             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></li>
148             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></li>
149         </ul>
150     </div>
151 
152 
153 </div>
154 </body>
155 </html>

查看全文

相关阅读:
es6 语法（数值扩展）
手机日期插件（转加上自己喜欢的）
仿微信抢红包(js 转)
默认时间为今天
 es6 语法（解构赋值）
es6 语法（let 和const）
es6环境搭建
 express 安装和运行
 git 常用操作，下拉，提交，更新，还原
 排序。

原文地址：https://www.cnblogs.com/qq21270/p/3455862.html