jquery图片轮播

最新推荐文章于 2019-07-20 23:50:01 发布

elegancy_

最新推荐文章于 2019-07-20 23:50:01 发布

阅读量797

点赞数

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>choise</title>
<script src="personal/public/js/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    var t = n = 0,
    count;
    $(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")
        });
        $("#banner 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()", 4000);
        $("#banner").hover(function() {
            clearInterval(t)
        },
        function() {
            t = setInterval("showAuto()", 4000);
        });
    })
 
    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
</script>
  <style>
#banner { position: relative; width: 478px; height: 286px; border: 1px solid #666; 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; }
#banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; }
#banner ul li { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }
#banner ul li.on { background-color: #000; }
#banner_list a { position: absolute; }
<!--让四张图片都可以重叠在一起-->
</style>
</head>
<body>
<div id="banner">  
    <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="imgs/p1.jpg" title="111"></a> 
        <a href="#" target="_blank"><img src="imgs/p2.jpg" title="222"></a> 
        <a href="#" target="_blank"><img src="imgs/p3.jpg" title="333"></a> 
        <a href="#" target="_blank"><img src="imgs/p1.jpg" title="444"></a>
    </div>
</div>	  
</body>
</html>

elegancy_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery图片轮播

choise var t = n = 0, count; $(document).ready(function() { count = $("#banner_list a").length; $("#banner_list a:not(:first-child)").hide(); $("#banner_info").ht
复制链接

扫一扫