Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

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

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
Jquery实现图片左右滚动轮播

分类： jQuery

2016-01-26 17:27:51


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-ch">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播特效</title>
  6.     <style type="text/css">
  7. *{
  8.     border: 0;
  9.     margin: 0;
  10.     }
  11. .carousel{
  12.   width:500px;
  13.   height:334px;
  14.   position: fixed;
  15.   overflow: hidden;
  16.     }
  17. .view{
  18.   width:2000px;
  19.   height:334px;
  20.   position:relative;
  21.     }
  22. .view img{
  23.   float: left;
  24. }
  25. .view ul{
  26.   position:fixed;
  27.   top:300px;
  28.   left: 200px;
  29. }
  30. .view ul li{
  31.   height: 12px;
  32.   width: 12px;
  33.   background:white;
  34.   list-style: none;
  35.   display: inline-block;
  36.   margin: 10px;
  37. }
  38. .view ul li.color{
  39.   background:#60b860;
  40. }
  41.     </style>
  42. <script type="text/javascript" src="jquery.js"></script>
  43. </head>
  44. <body>
  45. <div class="carousel">
  46.   <div class="view">

  48.     <img src="images/1.jpg" alt="第一张轮播图">
  49.     <img src="images/2.jpg" alt="第一张轮播图">
  50.     <img src="images/3.jpg" alt="第一张轮播图">
  51.     <img src="images/4.jpg" alt="第一张轮播图">
  52.         <ul>
  53.                 <li class="color"></li>
  54.                 <li></li>
  55.                 <li></li>
  56.                 <li></li>
  57.     </ul>
  58.     </div>
  59. </div>
  60. </body>
  61. <script>
  62. //左右滚动轮播器
  63. $(document).ready(function(){
  64.    var n=0;//设置计数器
  65. //封装冗余函数
  66.    function fn(n){
  67.     $(".view ul li").removeClass("color");
  68.     $(".view ul li").eq(n).addClass("color");
  69.     $(".view").animate({right:n*500+'px'},300) //设置动画
  70.    }
  71. //设置鼠标悬停于li时事件
  72.   $(".view ul li").hover(function(){
  73.     n=$(".view ul li").index(this);//把当前索引号赋予n;
  74.     fn(n);
  75.   })
  76. function start(){
  77.           n++;
  78.     if(n>=$(".view ul li").length){
  79.         n=0;
  80.     }
  81.       fn(n);
  82. }
  83. var auto=setInterval(start,2000);//设置定时器
  84. //设置鼠标悬停在该轮播器时事件
  85. $(".view").hover(function(){
  86.     clearInterval(auto);//清除定时器
  87. },function(){
  88.     auto=setInterval(start,2000);//启动定时器
  89. })
  90. });
  91. </script>
  92. </html>

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

上一篇：jquery实现焦点图轮播

下一篇：Jquery实现缩略图轮播特效

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

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

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

16024965号-6