图片列表滚动特效

最新推荐文章于 2024-11-11 15:24:58 发布
ba_gai
最新推荐文章于 2024-11-11 15:24:58 发布
阅读量740
点赞数
效果如下：
<html>
<head>
<meta charset="utf-8">
<title>滚动图片列表特效 </title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
</head>
<body>
<p> </p>
<p style="margin:0 auto; width:1000px"><strong>图片列表滚动特效效果如下：</strong></p>
<div class="content links">
    <div class="links_list"><a class="link_prev" href="javascript:;" hidefocus="true" title="上一组" id="link_prev">上一组</a>
        <div id="links">
            <ul id="slideContainer" class="slideContainer" >
                <li><a href="#"><img src="img/aliyun-logo.gif"></a></li>
                <li><a href="#"><img src="img/kuaibo-logo.gif"></a></li>
                <li><a href="http://www.divcss5.com/"><img src="img/divcss5-logo.gif"></a></li>
                <li><a href="#"><img src="img/178-logo.gif"></a></li>
                <li><a href="#"><img src="img/pw-logo.gif"></a></li>
                <li><a href="#"><img src="img/zongheng-logo.gif"></a></li>
                <li><a href="#"><img src="img/jinshan-logo.gif"></a></li>
                <li><a href="#"><img src="img/game-logo.jpg"></a></li>
                <li><a href="#"><img src="img/jutaobao-logo.gif"></a></li>
                <li><a href="#"><img src="img/114-logo.gif"></a></li>
                <li><a href="#"><img src="img/yy-logo.jpg"></a></li>
                <li><a href="#"><img src="img/91-logo.jpg"></a></li>
                <li><a href="#"><img src="img/zhuixin-logo.jpg"></a></li>
                <li><a href="#"><img src="img/alilogo.jpg"></a></li>
                <li><a href="#"><img src="img/u9logo.jpg"></a></li>
                <li><a href="#"><img src="img/qjwm_logo.gif"></a></li>
                <li><a href="#"><img src="img/xcar-logo.jpg"></a></li>
                <li><a href="#"><img src="img/xs8-logo.gif"></a></li>
                <li><a href="#"><img src="img/dm5-logo.gif"></a></li>
                <li><a title="divcss5" target="_blank" href="http://www.divcss5.com/"><img src="img/divcss5-logo.gif"></a></li>
                <li><a href="#"><img src="img/baofeng-logo.gif"></a></li>
                <li><a href="#"><img src="img/6u_logo.jpg"></a></li>
                <li><a href="#"><img src="img/ktingcn-logo.gif"></a></li>
            </ul>
        </div>
         <a class="link_next" href="javascript:;" hidefocus="true" title="下一组" id="link_next">下一组</a> </div>
</div>
<!--links end-->
<script type="text/javascript">
            jQuery_1_8_2(function($) {
		//c的值为每次滚动数
                var slideContainer = $('#slideContainer'), c = 1, s_w = 110 * c, counts_l = 0, counts_r = 0, maxCounts = slideContainer.find('li').size() - 0, gameOver = true, slideCounts = 7, sTimer;
                $('#link_prev').on('click', function() {
                    clearInterval(sTimer);
                    if (gameOver) {
                        gameOver = false;
                        counts_l++;
                        slideContainer.animate({
                            left: '+=' + s_w
                        }, 500, function() {
                            gameOver = true;
                            slideContainer.animate({
                                left: '-=' + s_w
                            }, 0);
                            var html = '';
                            slideContainer.find('li:gt(' + (maxCounts - c - 1) + ')').each(function() {
                                html += '<li>' + $(this).html() + '</li>';
                            });
                            slideContainer.find('li:gt(' + (maxCounts - c - 1) + ')').remove();
                            slideContainer.html(html + slideContainer.html());
                        });
                    }
                });
                $('#link_next').on('click', function() {
                    clearInterval(sTimer);
                    link_next_event();
                });

                function link_next_event() {
                    if (gameOver) {
                        gameOver = false;
                        counts_r++;
                        slideContainer.animate({
                            left: '-=' + s_w
                        }, 500, function() {
                            gameOver = true;
                            slideContainer.animate({
                                left: '+=' + s_w
                            }, 0);
                            slideContainer.find('li:lt(' + c + ')').clone().appendTo(slideContainer);
                            slideContainer.find('li:lt(' + c + ')').remove();
                        });
                    }
                }

                lastCLiHtml();
                slideContainer.find('li:gt(' + (maxCounts - 1) + ')').remove();
                function lastCLiHtml() {
                    var html = '';
                    slideContainer.find('li:gt(' + (maxCounts - c - 1) + ')').each(function() {
                        html += '<li>' + $(this).html() + '</li>';
                    });
                    slideContainer.html(html + slideContainer.html()).css({
                        'margin-left': -s_w + 'px'
                    });
                }

                var l_hover = false, m_hover = false, r_hover = false;
                $('#links').on({
                    'mouseover': function() {
                        m_hover = true;
                        clearInterval(sTimer);
                    },
                    'mouseout': function() {
                        m_hover = false;
                        isStartGo();
                    }
                });

                $('#link_next, #link_prev').on('mouseout', function() {
                    l_hover = false;
                    r_hover = false;
                    isStartGo();
                })
                $('#link_next, #link_prev').on('mouseover', function() {
                    l_hover = true;
                    r_hover = true;
                    clearInterval(sTimer);
                })
                setInverterTimer();
                function setInverterTimer() {
                    clearInterval(sTimer);
                    sTimer = setInterval(function() {
                        link_next_event();
                    }, 2000);
                }

                function isStartGo() {
                    var st = setTimeout(function() {
                        if (!l_hover && !m_hover && !r_hover) {
                            setInverterTimer();
                        }
                    }, 1000);
                }

            });
        </script>

 <p> </p>
</body>
</html>