zoukankan      html  css  js  c++  java
  • jquery轮换图片效果学习

    查看代码
     1 <div id="banner">    
    2 <div id="banner_bg"></div> <!--标题背景-->
    3 <div id="banner_info"></div> <!--标题-->
    4 <ul>
    5 <li class="on">1</li>
    6 <li>2</li>
    7 <li>3</li>
    8 <li>4</li>
    9 </ul>
    10 <div id="banner_list">
    11 <a href="#" target="_blank"><img src="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
    12 <a href="#" target="_blank"><img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
    13 <a href="#" target="_blank"><img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
    14 <a href="#" target="_blank"><img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
    15 </div>
    16 </div>


    css代码:

    查看代码
     1 <style type="text/css">
    2
    3 #banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
    4 #banner_list img {border:0px;}
    5 #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; }
    6 #banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
    7 #banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
    8 #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
    9 margin:0; padding:0; bottom:3px; right:5px;}
    10 #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
    11 #banner ul li.on { background:#900}
    12 #banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
    13 </style>

    js代码(我有简单注释):

    查看代码
     1 <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    2 <script type="text/javascript">
    3 var t = n = 0, count;
    4 $(document).ready(function(){
    5 count=$("#banner_list a").length;
    6 $("#banner_list a:not(:first-child)").hide(); //不是第一个的a链接隐藏
    7 $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));//获得第一个的img alt的属性值,并赋值给标题
    8 $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")}); //window.open()打开子窗口,$("#banner_list a:first-child").attr('href')为要打开新窗口的路径,_blank为在新的窗口打开
    9 $("#banner li").click(function() {
    10 var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4
    11 n = i;
    12 if (i >= count) return;
    13 $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); //替换标题的值
    14 $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})//unblind()消除被选元素的事件处理程序
    15 $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);//此句的作用是将显示的图片隐藏,将选择的图片显示出来。filter():方法将匹配元素集合缩减为匹配指定选择器的元素 fadeOut():隐藏 fadeIn();显示,eq(i) 选择第i个元素
    16 document.getElementById("banner").style.background="";
    17 $(this).toggleClass("on"); //如果匹配元素中没有使用样式'class'则对该元素加入样式‘class',如果已使用这个样式,则从该元素中删除该样式。
    18 $(this).siblings().removeAttr("class"); //将所有样式'class'的所有同胞元素移除'class'属性
    19 });
    20 t = setInterval("showAuto()", 4000);//它从载入页面后每隔指4000ms执行showAuto()函数
    21 $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});//此句放在phpcms中有错误
    22 })
    23
    24 function showAuto()
    25 {
    26 n = n >=(count - 1) ? 0 : ++n;
    27 $("#banner li").eq(n).trigger('click'); //促发被选中li的click事件
    28 }
    29 </script>


    效果

    清晨の雨露:One step one footprint
  • 相关阅读:
    AJAX异步传输——以php文件传输为例
    js控制json生成菜单——自制菜单(一)
    vs2010中关于HTML控件与服务器控件分别和js函数混合使用的问题
    SQL数据库连接到服务器出错——无法连接到XXX
    PHP错误:Namespace declaration statement has to be the very first statement in the script
    【LeetCode】19. Remove Nth Node From End of List
    【LeetCode】14. Longest Common Prefix
    【LeetCode】38. Count and Say
    【LeetCode】242. Valid Anagram
    【LeetCode】387. First Unique Character in a String
  • 原文地址:https://www.cnblogs.com/zhmt/p/2437644.html
Copyright © 2011-2022 走看看