zoukankan      html  css  js  c++  java
  • 轮播

    <script type="text/javascript">
    var t = n = 0, count;

    $(document).ready(function(){

    count=$("#ban_list a").length;//获取图片数目

    $("#ban_list a:not(:first-child)").hide();//除第一张图片都隐藏

    $("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'));//这个是把alt里的内容作为标题

    $("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")});//给标题绑定点击事件,添加链接

    $("#ban li").click(function() { //按钮点击事件

    var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4

    n = i;

    if (i >= count) return;

    $("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'));//重新获取标题

    $("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新绑定标题点击事件

    $("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);//渐进渐出效果

    document.getElementById("ban").style.background="";

    $(this).toggleClass("on");//切换按钮样式

    $(this).siblings().removeAttr("class");

    });

    t = setInterval("showAuto()", 4000);

    $("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

    })//鼠标指上停止轮播

    function showAuto()//实现轮播的函数

    {

    n = n >=(count - 1) ? 0 : ++n;

    $("#ban li").eq(n).trigger('click');

    }

    </script>
    <div id="ban">
    <div id="ban_bg"></div>
    <div id="ban_info"></div>
    <ul>
    <li class="on">1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    <div id="ban_list">

    <a href="/Item/Show.asp?m=1&d=3824" target="_blank"><img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg" alt="" width="414" height="286" /></a>

    </div>

  • 相关阅读:
    迎接2019多校联合新生训练赛(2018/12/31)
    Educational Codeforces Round 57 (Rated for Div. 2) 前三个题补题
    睡学预习(4)
    睡学预习(3)
    Python学习笔记(3)动态类型
    Maya Calendar POJ
    睡学预习(2)——数列极限
    2018-2019赛季多校联合新生训练赛第八场(2018/12/22)补题题解
    蓝桥杯入门题:Hello, world!
    蓝桥杯:P1103
  • 原文地址:https://www.cnblogs.com/ruimeng/p/4660302.html
Copyright © 2011-2022 走看看