Top

途牛缩略图

效果

CSS样式

 1 /***********************Thumbnail***********css****************/
 2 .thumbnail-main { width: 500px; 
 3                   height: 350px;
 4                   margin: 10px auto;
 5                   position: relative;
 6                   border: 1px solid #eaeaea;
 7                   overflow: hidden;  }
 8 .thumbnail-banner { width: 100%; height: 450px; }
 9 
10 .thumbnail_direction { display: block; width: 100%;  position: absolute;
11                        top:150px ;
12                        z-index: 10;}
13 .thumbnail_direction a, .thumbnail-nav-next a, .thumbnail-nav-prev a {
14                    display: inline-block;
15                    width: 40px; 
16                    height: 50px;
17                    text-align: center;
18                    line-height: 50px;
19                    font-size: 25px;
20                    color: #fff;
21                    cursor: pointer;
22                    background-color:#070707;
23                    filter:alpha(opacity=32); /*IE滤镜，透明度50%*/
24                    -moz-opacity:0.32; /*Firefox私有，透明度50%*/
25                    opacity:0.32;/*其他，透明度50%*/}
26 .thumbnail_direction a.prev {
27    float: left;
28 }
29 .thumbnail_direction a.next {
30  float: right;
31 }
32 .thumbnail-banner-img { 
33                 display: block;
34                 width: 100%;
35                 height: 100%; 
36                 position: relative; }
37 .thumbnail-nav { 
38                 height: 57px;
39                 width: 100%;
40                 background-color: rgba(0, 0, 0, 0.55);
41                 position: absolute; bottom: 0; }
42 .thumbnail-nav a { display: inline-block;  width: 40px; height: 50px; margin-top: 3.5px;  }
43 .thumbnail-nav>.thumbnail-nav-prev {  float: left;   }
44 .thumbnail-nav>.thumbnail-nav-next {  float: right;  }
45 
46 .thumbnail-nav-views { display: inline-block; width: 416px; height: 50px;}
47 .thumbnail-nav-views ul { 
48                         list-style: none; 
49                         padding: 0; 
50                         margin:0;
51                         width: 416px; 
52                         padding-left: 5px;}
53 .thumbnail-nav-views ul li { 
54                         float:left; height: 50px;
55                         width: 99px;
56                         line-height: 50px;
57                         text-align: center;
58                         margin-right: 5px;
59                         background-color:  rgba(5, 4, 4, 0.74); 
60                         font-family: "microsoft yahei";
61                         font-size: 12px; 
62                         font-weight: bolder;
63                         color: #fff;}
64 .thumbnail-nav-views ul li a { display: inline-block; 
65                                cursor: pointer; 
66                                height:50px;
67                                width: 99px;
68                                overflow: hidden; }
69 .thumbnail-nav-views ul li a.active { border: orange solid 2px;
70                                        height:46px;
71                                        width: 95px;
72                                        display: inline-block;
73                                        overflow: hidden;}

缩略图HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thumbnail</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="js/my_thumbnail.js"></script>
</head>
<body>
    <div class="thumbnail-main">
        <div class="thumbnail-banner">
            <div class="thumbnail_direction">
                <a class="prev"><</a>
                <a class="next">></a>
            </div>
            <div href="" class="thumbnail-banner-img" id="thumbnail-banner">
                <img src="images/ban_1.jpg" width="500" height="350" style="position: absolute; left:0; top:0;">
            </div>
            <div class="thumbnail-nav">
                <div class="thumbnail-nav-prev">
                     <a class="prev"><</a>
                </div>
                <div class="thumbnail-nav-views" id="thumbnail-nav-views">
                    <ul>
                        <li>
                            <a class="active" href="#none" url="http://m.tuniucdn.com/fb2/t1/G2/M00/08/8F/Cii-TleHZpqILGzMAAyxdCHDvTMAAAK6AGARg8ADLGM582_w450_h300_c1_t0_w500_h280_c1_t0.jpg">
                              <img src="images/small_01.jpg" width="99" height="50">     
                            </a>
                        </li>
                        <li>
                            <a href="#none" url="http://m.tuniucdn.com/filebroker/cdn/online/82/ba/82baf8a3_w450_h300_c1_t0_w500_h280_c1_t0.jpg">
                               <img src="images/small_02.jpg" width="99" height="50">     
                            </a>
                        </li>
                        <li>
                            <a href="#none" url="http://m.tuniucdn.com/fb2/t1/G2/M00/10/6C/Cii-TFeQfZuIDBCwAApKiNL36jUAAAXNgJLqWwACkqg898_w450_h300_c1_t0_w500_h280_c1_t0.jpg">
                               <img src="images/small_03.jpg" width="99" height="50">  
                            </a>
                        </li>
                        <li>
                             <a href="#none" url="http://m.tuniucdn.com/fb2/t1/G1/M00/86/3F/Cii9EFcZ9G2ID-ffAAaMjNmG9fUAAEEywMOSkgABoyk615_w450_h300_c1_t0_w500_h280_c1_t0.jpg">
                              <img src="images/small_04.jpg" width="99" height="50">     
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="thumbnail-nav-next">
                     <a class="next">></a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

jQuery代码

$(function(){
     var $contains = $(".thumbnail-main"),
         $thumbViews = $('#thumbnail-nav-views ul li'),
         $navItem = $thumbViews.children('a'),
         $bannerView = $("#thumbnail-banner").find('img').eq(0),
         $banner = $("#thumbnail-banner"),
         interval = 3000,
         len = $navItem.length,
         curIndex = 0,
         timer=null,
         prev = $('.prev'),
         next = $('.next');
      //prev
      $contains.on('click', '.prev', function(event) {
          curIndex--;
          if (curIndex<0) {
             curIndex=3;
          }
          changeViewImg(curIndex);
      });  
      //next
      $contains.on('click', '.next', function(event) {
            curIndex++;
            if (curIndex>=4) {
                curIndex=0;
            }
            changeViewImg(curIndex);
      });
      $navItem.each(function(index) {
         $(this).on('click', function(event) {
             var index = $('#thumbnail-nav-views ul li').children('a').index($(this));
             changeViewImg(index);
         });
      });

      function changeViewImg(index){
         $navItem.removeClass('active');
         $navItem.eq(index).addClass('active');
         curIndex = index;
         if (index==0) {
            $bannerView.stop(true).css({left: -500}).attr('src', $navItem.eq(index).attr('url')).animate({left: 0});
         }else{
            $bannerView.stop(true).css({left: 500}).attr('src', $navItem.eq(index).attr('url')).animate({left: 0});
         }        
      }
});
posted @ 2016-08-02 07:18  Avenstar  阅读(182)  评论(0)    收藏  举报