web之轮播图

说起轮播图 ,是网页中最常见的特效之一,之前我看到那些形形色色的轮播图,心想 要是什么时候自己也可以做出这样的效果,付出就有收获,经过一段时间的摸索,简单的效果也可以做出来了,下面就是一个简单的demo。

html代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<div style="width:800px; margin:50px auto;">
    <div id="focus" class="focus">
        <ul>
            <li><a href="JavaScript:;"><img src="img/01.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/02.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/03.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/04.jpg"/></a></li>
            <li><a href="JavaScript:;"><img src="img/05.jpg"/></a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
$(function() {
    $('#focus').slideFocus();
});
</script>
    
</body>

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:VerdanaArialHelveticasans-serif;background:#f0f0f0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
ul, li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
/* 核心代码 */
.focus{width:800px;height:280px;overflow:hidden;position:relative;}
.focus ul{height:380px;position:absolute;}
.focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
.focus ul li div{position:absolute;overflow:hidden;}
.focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:5px;text-align:center;}
.focus .btn span{display:inline-block;_display:inline;_zoom:1;width:13px;height:13px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;border-radius:50%;}
.focus .btn span.on{background:yellow;}
.focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;display:none;}
.focus .pre{left:0;}
.focus .next{right:0;background-position:right top;}

JavaScript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
jQuery.fn.extend({
     
    slideFocus: function(){
        var This = $(this);
        var sWidth = $(This).width(),
            len    =$(This).find('ul li').length,
            index  = 0,
            Timer;
  
        // btn event
        var btn = "<div class='btn'>";
        for(var i=0; i < len; i++) {
            btn += "<span></span>";
        };
        btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
        $(This).append(btn);
        $(This).find('.btn span').eq(0).addClass('on');
  
  
        $(This).find('.btn span').mouseover(function(){
            index = $(This).find('.btn span').index(this);
            Tony(index);
        });
        $(This).find('.next').click(function(){
            index++;
            if(index == len){index = 0;}
            Tony(index);
        });
        $(This).find('.pre').click(function(){
            index--;
            if(index == -1){index = len - 1;}
            Tony(index);
        });
        // start setInterval     
        $(This).find('ul').css("width",sWidth * (len));
        $(This).hover(function(){
            clearInterval(Timer);
            show($(This).find('.preNext'));
        },function(){
            hide($(This).find('.preNext'));
            Timer=setInterval(function(){
                Tony(index);
                index++;
                if(len == index){index = 0;}
            }, 2000)
        }).trigger("mouseleave");
        function Tony(index){
            var new_width = -index * sWidth;
            $(This).find('ul').stop(true,false).animate({'left' : new_width},0);
            $(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
        };
        // show hide
        function show(obj){ $(obj).stop(true,false).fadeIn();}
        function hide(obj){ $(obj).stop(true,false).fadeOut();}
    }
});

由于本js代码是基于JQuery的,因此需要引入Jquery文件。在JQuery官网可以直接下载. 本文件使用的是1.11.1版本,本文链接:http://pan.baidu.com/s/1ge1UPrl

最后附上源码及效果图链接:链接:http://pan.baidu.com/s/1i5DCgOt  密码:dp80

虚拟主机
《JavaScript高级程序设计(第3版)》PDF
《锋利的jQuery(第2版)》PDF
《JavaScript设计模式与开发实践 》PDF
《编写高质量JavaScript代码的68个有效方法》PDF
广告也精彩