你好,欢迎浏览牛城网站官网,有什么需要帮助请联系在线客服人员!

24小时在线QQ客服:852440645  

全国服务热线

0311-89870036

首页 > 建站知识 > JS特效

建站知识

主营业务

新闻动态

4屏切换焦点图动态显示大图特效代码

发布人:后台管理员   发布时间:2015-11-18 15:52:15

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>pic_jq</title>
    <style>
        *{ padding:0; margin:0; list-style:none; }
        .pic_js{ width:500px; margin:0 auto; overflow:hidden; border:1px solid #0066CC; position:relative; }
        .pic{ width:2000px; z-index:1; }
        .pic img{ display:block; width:500px; height:376px; cursor:pointer; }
        .pic li{ width:500px; height:376px; float:left; }
        .pic_nav{ position:absolute; bottom:3px; right:0px; z-index:100; }
        .pic_nav li{ float:left; cursor:pointer; width:40px; height:40px; line-height:40px; border:1px solid #069; margin-right:5px; text-align:center; background:#ff0; }
        .pic_nav li img{ width:100%; height:100%; }
        .pic_nav .current{ background:#03C; color:#FFF; border:1px solid #F90;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/jquery/1.10.2/jquery-1.10.2.min.js"></script>
</head>
 
<body>
<div id="pic" class="pic_js">
    <ul id="big" class="pic">
        <li><img src="http://dummyimage.com/500x376/ccc&text=1"/></li>
        <li><img src="http://dummyimage.com/500x376/eee&text=2"/></li>
        <li><img src="http://dummyimage.com/500x376/999&text=3"/></li>
        <li><img src="http://dummyimage.com/500x376/666&text=4"/></li>
    </ul>
    <ul id="icon" class="pic_nav">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var picNum = 0;
    var picWidth = 500;//图片的宽度
    var picSpeed = 1000;//图片切换速度
    var autoSpeed = 4000;//自动播放时间 3000毫秒(3秒)
    var big = $('#big');
    var li = $('#big li');
    var len = li.length;
    var icon = $('#icon li');
    var now = 0;
    var on = 'current';
    var timer = null;
 
    function play(){
        now ++;
        if(now >= len){
            now = 0;
        }
        act(now);
    }
    timer = setInterval(play, 2000);
    function act(n){
        big.animate({ marginLeft : - n * li.width() }, 'slow');
        icon.removeClass(on);
        icon.eq(n).addClass(on);
    }
    icon.click(function(){
        var idx = $(this).index();
        now = idx;
        act(now);
        clearInterval(timer);
    });
 
    icon.hover(function(){
        clearInterval(timer);
    }, function(){
        timer = setInterval(play, 2000);
    });
 
</script>
 
</body>
</html>