你好,歡迎瀏覽牛城網站官網,有什么需要幫助請聯系在線客服人員!

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="//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="//dummyimage.com/500x376/ccc&text=1"/></li>
        <li><img src="//dummyimage.com/500x376/eee&text=2"/></li>
        <li><img src="//dummyimage.com/500x376/999&text=3"/></li>
        <li><img src="//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>