Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

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

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
Jquery实现缩略图轮播特效

分类： JavaScript

2016-02-17 15:29:03


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-ch">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>缩略图轮播特效</title>
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <style type="text/css">
  8. body,ul,li,img{
  9.   padding: 0;
  10.   margin: 0;
  11. }
  12. ul{
  13.   list-style: none;
  14. }
  15. .view{
  16.   width: 400px;
  17.   position: relative;
  18.   height: 300px;
  19.   left: 400px;
  20.   top:200px;
  21.   overflow:hidden;
  22. }
  23. .bigimg{
  24.   position: absolute;
  25.   width:3200px;
  26. }
  27. .bigimg ul{
  28.   position: absolute;
  29.   width: 3200px;
  30. }
  31. .bigimg ul li{
  32.   float: left;
  33. }
  34. .left,.right{
  35.   position: absolute;
  36.   background:#999;
  37.   font-size: 40px;
  38.   top:130px;
  39.   cursor: pointer;
  40.   opacity: 0.5;
  41.   display: none;
  42. }
  43. .left{
  44.   left:20px;
  45. }
  46. .right{
  47.   right:20px;
  48. }
  49. .left:hover,.right:hover{
  50.   opacity: 1;
  51. }
  52. .info{
  53.   position: absolute;
  54.   width: 400px;
  55.   background: #aaa;
  56.   opacity: 0.5;
  57.   line-height: 30px;
  58.   top:270px;
  59.   text-indent:20px;
  60.   color:#f01;
  61. }
  62. .num{
  63.   position:absolute;
  64.   left: 400px;
  65.   top:506px;
  66. }
  67. .smallimg{
  68.   position:relative;
  69.   top:230px;
  70.   left:400px;
  71.   width: 400px;
  72.   overflow: hidden;
  73. }
  74. .smallimg ul{
  75.   position: relative;
  76.   width: 800px;
  77. }
  78. .smallimg ul li{
  79.   float: left;
  80.   padding: 0 5px;
  81. }
  82. .smallimg img{
  83.   opacity: 0.5;
  84. }
  85. .left1,.right1{
  86.   position:absolute;
  87.   background:#ccc;
  88.   font-size: 20px;
  89.   top:560px;
  90.   cursor: pointer;
  91.   opacity: 0.5;
  92. }
  93. .left1{
  94.   left:380px;
  95. }
  96. .right1{
  97.   left: 808px;
  98. }
  99. .left1:hover,.right1:hover{
  100.   opacity: 1;
  101. }
  102. .smallimg .select{
  103.   opacity: 1;
  104. }
  105. </style>
  106. </head>
  107. <body>
  108.  <div class="view">
  109.    <div class="bigimg">
  110.      <ul>
  111.        <li><img src="image/1.jpg" alt="风景秀丽之地"/></li>
  112.        <li><img src="image/2.jpg" alt="鬼斧神工之地"/></li>
  113.        <li><img src="image/3.jpg" alt="流连忘返之地"/></li>
  114.        <li><img src="image/4.jpg" alt="过目难忘之地"/></li>
  115.        <li><img src="image/5.jpg" alt="心旷神怡之地"/></li>
  116.        <li><img src="image/6.jpg" alt="感慨万千之地"/></li>
  117.        <li><img src="image/7.jpg" alt="美不胜收之地"/></li>
  118.        <li><img src="image/8.jpg" alt="人间仙境之地"/></li>
  119.      </ul>
  120.    </div>
  121.    <div class="right">?</div>
  122.    <div class="left">?</div>
  123.    <div class="info">风景秀丽之地</div>
  124.  </div>
  125.  <div class="num"><span>1</span>/8</div>
  126. <div class="smallimg">
  127.      <ul>
  128.        <li><img src="image/11.jpg" class="select"/></li>
  129.        <li><img src="image/22.jpg"/></li>
  130.        <li><img src="image/33.jpg"/></li>
  131.        <li><img src="image/44.jpg"/></li>
  132.        <li><img src="image/55.jpg"/></li>
  133.        <li><img src="image/66.jpg"/></li>
  134.        <li><img src="image/77.jpg"/></li>
  135.        <li><img src="image/88.jpg"/></li>
  136.      </ul>
  137. </div>
  138.    <div class="right1">?</div>
  139.    <div class="left1">?</div>
  140. </body>
  141. <script>
  142.   $(document).ready(function(){

  144.   //隐藏和显示左右按钮
  145.   $(".view").hover(function(){
  146.     $(".left,.right").show();
  147.   },function(){
  148.     $(".left,.right").hide();
  149.   })

  151.  //轮播器
  152.   var n=0;//最重要的参数，全局变量
  153.   $(".right").click(function(){
  154.     n++;
  155.     if(n==8){n=0};
  156.     $(".bigimg ul").animate({right:n*400+"px"},200);
  157.     $(".info").text($(".bigimg ul img").eq(n).attr("alt"));//显示该索引下图片的alt属性
  158.     $(".num span").text(n+1);
  159.     $(".smallimg img").removeClass("select");
  160.     $(".smallimg img").eq(n).addClass("select");
  161.     if(n==4){
  162.      $(".smallimg ul").animate({right:400+"px"});
  163.     }
  164.     if(n==0){
  165.       $(".smallimg ul").animate({right:0+"px"});
  166.     }
  167.   })
  168.   $(".left").click(function(){
  169.     n--;
  170.     if(n==-1){n=7};
  171.     $(".bigimg ul").animate({right:n*400+"px"},200);
  172.     $(".info").text($(".bigimg ul img").eq(n).attr("alt"));
  173.     $(".num span").text(n+1);
  174.     $(".smallimg img").removeClass("select");
  175.     $(".smallimg img").eq(n).addClass("select");
  176.     if(n==7){
  177.      $(".smallimg ul").animate({right:400+"px"});
  178.     }
  179.     if(n==2||n==3){
  180.       $(".smallimg ul").animate({right:0+"px"});
  181.     }
  182.   })

  184.    var m=0;
  185.    $(".right1").click(function(){
  186.     m++;
  187.     if(m>=4){m=4};
  188.     $(".smallimg ul").animate({right:m*100+"px"});
  189.    })
  190.    $(".left1").click(function(){
  191.     $(".smallimg ul").animate({right:0+"px"});
  192.    })
  193.  //鼠标悬浮在图片上，图片变亮
  194.     $(".smallimg ul img").click(function(){
  195.       $(".smallimg ul img").removeClass("select");
  196.       $(this).addClass("select");
  197.       m=$(".smallimg ul img").index(this);
  198.       n=m;
  199.       $(".bigimg ul").animate({right:m*400+"px"},200);
  200.       $(".num span").text(m+1);
  201.       $(".info").text($(".bigimg ul img").eq(n).attr("alt"));
  202.     })
  203.     $(".smallimg img").eq(1).click(function(){
  204.      $(".smallimg ul").animate({right:0+"px"});
  205.     })
  206.     $(".smallimg img").eq(2).click(function(){
  207.      $(".smallimg ul").animate({right:100+"px"});
  208.     })
  209.     $(".smallimg img").eq(3).click(function(){
  210.      $(".smallimg ul").animate({right:200+"px"});
  211.     })
  212.     $(".smallimg img").eq(4).click(function(){
  213.      $(".smallimg ul").animate({right:200+"px"});
  214.     })
  215.     $(".smallimg img").eq(5).click(function(){
  216.      $(".smallimg ul").animate({right:400+"px"});
  217.     })
  218.     $(".smallimg img").eq(6).click(function(){
  219.      $(".smallimg ul").animate({right:400+"px"});
  220.     })
  221.    
  222.   
  223.   })
  224. </script>
  225. </html>


点击(此处)折叠或打开

如图：

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

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

下一篇：JS实现验证码并在客户端验证

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

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

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

16024965号-6