zoukankan html css js c++ java

jquery图片滚动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片滚动</title>
<style type="text/css">

#bannerScoll {position:relative; width:900px; height:200px; border:3px solid #B8E466; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:478px; }
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#bannerScoll ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
            margin:0; padding:0; bottom:3px; right:5px;}
#bannerScoll ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#bannerScoll ul li.on { background:#900}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>

<body>
<div id="bannerScoll">    
    <div id="banner_bg"></div>  <!--标题背景-->
    <div id="banner_info"></div> <!--标题-->
    <ul>
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
   <div id="banner_list">
        <a href="#" target="_blank"><img src="/images/banner_top_imgone.jpg" title="图片1" alt="图片1" /></a>
        <a href="#" target="_blank"><img src="/images/banner_top_imgthree.jpg" title="图片1" alt="图片1" /></a>
        <a href="#" target="_blank"><img src="/images/banner_top_imgtwo.jpg" title="图片1" alt="图片1" /></a>
        <a href="#" target="_blank"><img src="/images/banner_top_imgfour.jpg" title="图片1" alt="图片1" /></a>
    </div>
</div>
<script type="text/javascript">
var t = n = 0, count,interv = 4000; //切换间隔时间
    $(document).ready(function(){    
        count=$("#banner_list a").length;
        $("#banner_list a:not(:first-child)").hide();
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
        $("#bannerScoll li").click(function() {
            var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
            n = i;
            if (i >= count) return;
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
            $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            document.getElementById("banner").style.background="";
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");
        });
        t = setInterval("showAuto()", interv);
        $("#bannerScoll").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", interv);});
    })
    
    function showAuto()
    {
        n = n >=(count - 1) ? 0 : ++n;
        $("#bannerScoll li").eq(n).trigger('click');
    }
</script>
</body>

如果这篇文章对您有帮助，您可以打赏我

技术交流QQ群：15129679

查看全文

相关阅读:
POJ 1330 Nearest Common Ancestors（LCA Tarjan算法）
LCA 最近公共祖先（模板）
线段树，最大值查询位置
 带权并查集
 转负二进制
 UVA 11437 Triangle Fun
UVA 11488 Hyper Prefix Sets （字典树）
UVALive 3295 Counting Triangles
POJ 2752 Seek the Name, Seek the Fame （KMP）
UVA 11584 Partitioning by Palindromes （字符串区间dp）

原文地址：https://www.cnblogs.com/yeminglong/p/2579274.html