js 图片切换效果

效果如下:

js 图片切换效果

代码:

js 图片切换效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片切换</title>
<style>
.pics {width:300px; height:100px; border:solid 1px gray; overflow: hidden; position: relative;}
.pics li {float:left; list-style-type:none;}
.pics ul, #pics ul li {margin:0; padding:0;}
.pics ul {position: absolute; left: 0; top:0; width:10000px;}
.pics img {width:300px; height:100px;}

.pics .divTip {position: absolute; left:10px; bottom:10px;}
.pics .divTip span {float: left; display:block; opacity:0.9; border-radius:5px; width:8px; height:8px; margin-right:5px; background-color:white; border:solid 1px #eee;}
.pics .divTip .active {background-color:gray;}
</style>
<script src="js/jquery.js"></script>
</head>
<body>

<div id="pics1" class="pics">
<ul>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
</ul>
</div>

<div id="pics2" class="pics">
<ul>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
</ul>
</div>

<script>
$.fn.extend({
    ///这个函数是全部选择所有的元素
    switchPic: function(delayMs, runMs) {
        // oid runMs delayMs
        var o = {};
        o.itemWidth = this.width();
        o.runMs = runMs || 500;
        o.delayMs = delayMs || 2000;
        o.obj = this;
        
        o.index = -1;
        o.count = this.find(li).size();
        o.isHover = false;
        
        var html = <div class="divTip">;
        for (var i=0; i<o.count; i++) html += <span data-i=" + i + "></span>;
        html += </div>;
        this.append(html);
        
        o.fnAuto = function()
        {
            if (o.isHover) return;
            o.index++; 
            if (o.index == o.count) o.index = 0;
            
            o.fnIndex(o.index);
        }
        
        o.fnIndex = function (i)
        {
            o.index = i;
            o.obj.find(.divTip span).removeClass(active);
            o.obj.find(.divTip span).eq(o.index).addClass(active);
            o.obj.find(ul).stop();
            o.obj.find(ul).animate({left:- + (o.index * o.itemWidth) + px}, o.runMs);
        }
        
        window.setInterval(o.fnAuto, o.delayMs);
        o.fnAuto();
        
        this.hover(function(){
            o.isHover = true;
        },function(){ 
            o.isHover = false;
        });
        
        this.find(.divTip span).mouseover(function(){
            o.fnIndex($(this).data(i));
        });
    }
});

$(#pics1).switchPic(1000, 100);
$(#pics2).switchPic();

</script>

</body></html>
js 图片切换效果

 

下载地址:http://files.cnblogs.com/zjfree/switchPic.rar

js 图片切换效果

上一篇:优秀案例:空白在网页设计中的合理使用


下一篇:与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频)