Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157418
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
jquery实现焦点图轮播

分类： JavaScript

2016-01-25 13:38:28


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-ch">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播特效</title>
  6.     <style type="text/css">
  7.     html{
  8.         font-size: 62.5%;
  9.     }
  10.     body,ul,li,img{
  11.         border: 0;
  12.         margin: 0;
  13.     }
  14.     .carousel{
  15.         margin: 0 auto;
  16.         width: 730px;
  17.         height: 454px;
  18.         position: relative;
  19.     }
  20.     .carousel img{
  21.         position: absolute;
  22.         margin: 20px 0;
  23.     }
  24.      ul{
  25.          list-style: none;
  26.          z-index:4;
  27.         height: 24px;
  28.         text-align: center;
  29.         position: absolute;
  30.         width: 690px;
  31.         top:450px;
  32.      }
  33.      ul li{
  34.          display: inline-block;
  35.          font-size: 24px;
  36.          opacity: 0.4;
  37.          filter:alpha(opacity=40);
  38.          margin: 0 10px;
  39.         cursor: pointer;
  40.      }
  41.      .carousel span{
  42.          width: 730px;
  43.          height:24px;
  44.          background: #333;
  45.          position: absolute;
  46.          opacity: 0.2;
  47.          filter:alpha(opacity=20);
  48.          top:450px;
  49.      }
  50.      .carousel strong{
  51.       position: absolute;
  52.       top:450px;
  53.       height: 24px;
  54.       text-align: center;
  55.       line-height: 24px;
  56.       color: #3456f8;
  57.      }
  58.      .select{
  59.          opacity: 0.8;
  60.          filter:alpha(opacity=80);
  61.      }
  62.     </style>
  63.     <script src="jquery.js"></script>
  64. </head>
  65. <body>
  66.         <div class="carousel">
  67.             <img src="images/1.jpg" alt="第一张轮播图">
  68.             <img src="images/2.jpg" alt="第二张轮播图">
  69.             <img src="images/3.jpg" alt="第三张轮播图">
  70.             <ul>
  71.                 <li>●</li>
  72.                 <li>●</li>
  73.                 <li>●</li>
  74.             </ul>
  75.             <span></span>
  76.             <strong></strong>
  77.      </div>
  78. </body>
  79. <script>
  80. //轮播器
  81. $(document).ready(function(){

  83. //轮播器初始化
  84.      $(".carousel img").css("display","none");//所有图片隐藏
  85.      $(".carousel img").eq(0).css("display","block");//显示第一张
  86.      $(".carousel ul li").eq(0).addClass("select");//设置第一个按钮的样式为选中状态
  87.      $(".carousel strong").html($(".carousel img").eq(0).attr('alt'));//把图片中的alt属性显示出来

  89. //手动轮播器
  90.      $(".carousel ul li").hover(function(){//当鼠标悬停时发生事件
  91.         clearInterval(auto);//鼠标悬停时清除定时器
  92.         $(".carousel img").css("display","none");//所有图片隐藏
  93.         $(".carousel img").eq($("li").index(this)).css("display","block");//指定和悬浮的li的索引号相同的img显示
  94.         $("li").removeClass("select");//移除所有的悬浮样式
  95.         $("li").eq($("li").index(this)).addClass("select");//仅为悬浮在该按钮下添加样式
  96.         $(".carousel strong").html($(".carousel img").eq($("li").index(this)).attr('alt'));
  97.      },function(){
  98.         times=$("li").index(this)+1;//鼠标离开时索引号加1
  99.         auto=setInterval(start,2000);//鼠标离开时继续执行定时器
  100.      });

  102. //自动轮播器
  103.      var times=1;//设置计数器
  104.      var auto=setInterval(start,2000);//定时器
  105.      function start(){ //定时器代码
  106.         if(times>=3){times=0;} //判断计数器，如果为3，重新开始计数
  107.        $(".carousel img").css("display","none");
  108.        $(".carousel img").eq(times).css("display","block");
  109.        $("li").removeClass("select");
  110.        $("li").eq(times).addClass("select");
  111.        $(".carousel strong").html($(".carousel img").eq(times).attr('alt'));
  112.         times++;
  113.      }
  114. });
  115. </script>
  116. </html>

阅读(921) | 评论(0) | 转发(0) |
0

上一篇：JS实现方向键移动物体

下一篇：Jquery实现图片左右滚动轮播

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6