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

程序猿啊程序猿

文章分类

全部博文(42)

文章存档

2016年(28)

2015年(14)

我的朋友

分类: 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(){

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

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

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


点击(此处)折叠或打开

如图:

阅读(1860) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~