博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

js 图片切换效果

Posted on 2014-01-19 16:20  PHP-张工  阅读(1962)  评论(0)  编辑  收藏  举报

效果如下：

代码：

<!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>

 

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