jQuery插件图片列表切换，点击小图列表大图显示

效果可以直接使用，但是尚未封装，等封装后方便插件下载。

 

 代码如下 复制代码

<html><head>
  <title>腾讯娱乐图片预览的网站特效，已经进行了解析和优化，方便了解其html css原理。</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  
  <style type="text/css">
   body,ul,li,ol{list-style:none;padding:0px;margin:0px;}
   
   .p27{
    width: 640px;
    height:1000px;
    overflow:hidden;
    margin:50px auto;
   }
   .p27List{
    float: left;
    border-top:1px solid #E0E0E0;
    border-bottom:1px solid #E0E0E0;
    position: relative;
   }
   .p27LContainer{
    width:631px;
    height:70px;
    overflow: hidden;
    background: #F2F2F2;
    border-top:1px solid white;
    border-bottom:1px solid white;
   }
   .p27LContent{
    width: 10000px;
    position: relative;
    top:2px;
   }
   .p27LCol{
    float:left;
    width: 80px;
    height:60px;
    overflow:hidden;
    margin:0px 0 0 4px;
    border:3px solid #F2F2F2;
    background: #F2F2F2;
    text-align: center;
   }
   .p27LCol img{
    height:100%;
   }

   .p27LCAct{
    border:3px solid #2D96E9;
    background:white;
   }

   .p27LLeft,.p27LRight{
    position:absolute;
    top:25px;
    height:20px;
    width:20px;
    background:black;
    opacity:0.5;
    cursor:pointer;
   }
   .p27LLeft{
    left:7px;
   }
   .p27LRight{
    right:7px;
   }

   .p27Big{
    float: left;
    width: 100%;
    position: relative;
   }
   .p27BImg{
    width: 100%;
    text-align: center;
   }

   /*图片上的 左右按钮*/
   .p27BLeft,.p27BRight{
    display:block;
    width:50%;
    height:100%;
    position: absolute;
    z-index:2;
    top:0px;
   }
   .p27BLeft{
    left:0;
   }
   .p27BRight{
    right:0;
    background:-30px 50px;
   }
   .p27BLeft span,.p27BRight span{
    position:absolute;
    top:50%;
    margin-top:-22px;
    width:24px;
    height:43px;
    background:url(./p27/s_gallery_2012110702.png) 0 -50px;
    display:none;
   }
   .p27BLeft span{
    left:10px; 
   }
   .p27BRight span{
    right:10px;
    background-position:-30px -50px;
   }
   .p27BLeft:hover span,.p27BRight:hover span{
    display:inline-block;
   }

   .P27BShop a:hover{
    opacity: 0.8;
   }

   .P27Msg{
    width: 100%;
    height:30px;
    line-height:30px;
    background: black;
    opacity: 0.6;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 3;
   }

   .P27BShop{
    width:160px;
    height:30px;
    background:rgba(0, 0, 0, 0.2);
    border:1px solid #C5B9B6;
    position: absolute;
    bottom:10px;
    left:50%;
    margin-left:-80px;
    z-index: 4;
   }
   .P27BSNum{
    float: left;
    width:80px;
    height:30px;
    line-height:30px;
    color:white;
    text-align:center;
   }
   .P27BSLeft,.P27BSAuto,.P27BSRight{
    width: 10px;
    height:20px;
    display: block;
    float:left;
    background: url(./p27/s_gallery_2012110702.png);
    margin:5px 10px 0 0;
    opacity: 0.6;
   }
   .P27BSAuto{
    width: 20px;
    background: url(./p27/g_btn_play.png);
   }
   .P27BSRight{
    background-position:-16px 0;
   }
   .P27BShop a:hover{
    opacity: 0.8;
   }
   
   /*详细*/
   .p27_Xx{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:5;
    display:none;
   }
   .p27_Bg{
    width:100%;
    height:100%;
    background:black;
    opacity:0.8;
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
   }

   /*详细 底部操作部分*/
   .p27_Xx_Shop{
    width:100%;
    height:110px;
    position:absolute;
    left:0px;
    bottom:-82px;
    z-index:5;
   }
   .p27_Xx_Title{
    width:100%;
    height:27px;
    border-bottom:2px solid #232323;
    text-align:center;
   }
   .p27_Xx_Title span{
    display:inline-block;
    width:82px;
    height:29px;
    line-height:29px;
    text-align:center;
    background:url(./p27/Mask_count.png);
    color:white;
    font-size:12px;
   }
   .p27_Xx_Title span i{
    font-style:normal;
    font-size:18px;
    color:#0A96D0;
   }

   /*详细界面 底部操作部分的 按钮区域*/
   .p27_Xx_Container{
    height:80px;
    width:100%;
    background:#000000;
    padding-top:10px;
   }
   .p27_Xx_BtnLeft,.p27_Xx_BtnRight{
    position:absolute;
    width:50%;
    height:100%;
    z-index:2;
    background:;
   }
   .p27_Xx_BtnLeft{
    left:0px;
   }
   .p27_Xx_BtnRight{
    right:0px;
   }
   .p27_Xx_BtnLeft span,.p27_Xx_BtnRight span{
    display:inline-block;
    width:47px;
    height:93px;
    background:url(./p27/s_gallery_2012110702.png) 0 -96px;
    position:absolute;
    top:50%;
    margin-top:-46px;
   }
   .p27_Xx_BtnLeft span{
    left:5%;
   }
   .p27_Xx_BtnRight span{
    background-position:0 -196px;
    right:5%;
   }

   .p27_Xx_Colse{
    width:54px;
    height:54px;
    background:url(./p27/s_gallery_2012110702.png) 0 -294px;
    display:inline-block;
    position:absolute;
    z-index:5;
    right:20px;
    top:20px;
   }
   .p27_Xx_Colse:hover{
    background:url(./p27/close1.png);
   }
   
   /*详细 大图*/
   .p27_Xx_Image{
    width:auto;
    height:auto;
    position:absolute;
    z-index:4;
    overflow:hidden;
   }
   .p27_Xx_Image img{
    border:5px solid white;
    border-bottom:0px;
   }

   /*大图 下方的文字*/
   .p27_Xx_IMsg{
    width:100%;
    height:30px;
    line-height:30px;
    display:inline-block;
    background:white;
   }
   .p27_Xx_IMsg a{
    font-size:12px;
    color:black;
    float:right;
    text-decoration:none;
    margin-right:10px;
   }
   

   /*全屏 底部按钮区域*/
   .p27_Xx_Content{
    width:10000px;
    height:100%;
    position:relative;
   }
   .p27_Xx_Items{
    float:left;
    width:80px;
    height:60px;
    background:red;
    overflow:hidden;
    margin-left:4px;
    border:3px solid #000;
    text-align:center;
    background:black;
   }
   .p27_Xx_Items img{
    height:100%;
    opacity:0.6;
   }
   .p27_Xx_Act{
    border-color:#2D96E9;
    background:white;
   }
   .p27_Xx_Act img,.p27_Xx_Items:hover img{
    opacity:1;
   }

   /*详细大图 描述*/
   .p27_Xx_Msg{
    width:100%;
    height:30px;
    text-align:center;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    color:white;
    font-size:14px;
   }

   /*详细图片上的 左右按钮*/
   .p27_Xx_ILeft,.p27_Xx_IRight{
    width:50%;
    position:absolute;
    height:100%;
    top:0px;
    z-index:2;
   }
   .p27_Xx_ILeft{
    cursor:url(./p27/arr_left.cur), auto;
    left:0px;
   }
   .p27_Xx_IRight{
    cursor:url(./p27/arr_right.cur), auto;
    right:0px;
   }
   .p27_Xx_ILeft:hover,.p27_Xx_IRight:hover{
    text-decoration:underline;
    color:white;
   }
   a:focus {
    outline: medium none;
   }

   /*自动播放按钮*/
   .p27_Xx_Auto,.p27_Xx_Stop{
    position:absolute;
    top:10px;
    right:10px;
    display:inline-block;
    width:20px;
    height:20px;
    background:url(./p27/g_btn_play.png);
    z-index:3;
   }
   .p27_Xx_Stop{
    display:none;
    background:url(./p27/pause1.png) no-repeat center;
   }
   .p27_Xx_Auto:hover,.p27_Xx_Stop:hover{
    opacity:0.8;
   }

 

  </style>
 </head>
 <body>
  
  
  <div class="p27">
   <div class="p27List">
    <div class="p27LContainer">
     <ul style="left: -360px;" class="p27LContent">
      <li class="p27LCol"><a href="#" title=""><img src="1_files/1.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/2.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/3.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/4.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/5.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/6.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/7.jpg" alt=""></a></li>
      <li class="p27LCol p27LCAct"><a href="#" title=""><img src="1_files/8.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/9.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/10.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/11.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/12.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/13.jpg" alt=""></a></li>
      <li class="p27LCol"><a href="#" title=""><img src="1_files/14.jpg" alt=""></a></li>
     </ul>
    </div>
    <div class="p27LLeft"></div>
    <div class="p27LRight"></div>
   </div>
   <div class="p27Big">
    <div class="p27BImg"><img style="width: 100%;" src="1_files/8.jpg" alt=""></div>
    <a class="p27BLeft" href="#" title=""><span></span></a>
    <a class="p27BRight" href="#" title=""><span></span></a>
    <div class="P27BShop">
     <span class="P27BSNum">7/19</span>
     <a class="P27BSLeft" href="#"></a>
     <a class="P27BSAuto" href="#"></a>
     <a class="P27BSRight" href="#"></a>
    </div>
    <div class="P27Msg"></div>
   </div>
   
   <div class="p27_Xx">
    <div class="p27_Bg"></div>
    <div class="p27_Xx_Shop">
     <div class="p27_Xx_Title"><span><i>1</i>/2</span></div>
     <div class="p27_Xx_Container">
      <ul class="p27_Xx_Content">
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/1.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/2.jpg" alt=""></a></li>
       <li class="p27_Xx_Items p27_Xx_Act"><a href="#" title=""><img src="1_files/3.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/4.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/5.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/6.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/7.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/8.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/9.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/10.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/11.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/12.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/13.jpg" alt=""></a></li>
       <li class="p27_Xx_Items"><a href="#" title=""><img src="1_files/14.jpg" alt=""></a></li>
      </ul>
      <div class="p27_Xx_Left"></div>
      <div class="p27_Xx_Right"></div>
     </div>
    </div>
    <div class="p27_Xx_Aea">
     <div class="p27_Xx_Image">
      <img src="1_files/1.jpg" alt="">
      <a class="p27_Xx_ILeft" href="#" title=""></a>
      <a class="p27_Xx_IRight" href="#" title=""></a>
      <a class="p27_Xx_Auto" href="#" title=""></a>
      <a class="p27_Xx_Stop" href="#" title=""></a>
      <span class="p27_Xx_IMsg"><a href="#" title="">感谢关注</a></span>
     </div>
     <div class="p27_Xx_Msg">描述...</div>
    </div>
    <a class="p27_Xx_BtnLeft" href="#" title=""><span></span></a>
    <a class="p27_Xx_BtnRight" href="#" title=""><span></span></a>
    <a class="p27_Xx_Colse" href="#" title=""></a>
    </div>
  </div>

 

 

 

 

 

 

  <script type="text/javascript" src="1_files/jquery-1.js"></script>
  <script type="text/javascript">

 

  var btn=$('.p27LCol'),
   ne=0;

  //默认小图片按钮 挂接事件
  $('.p27LCol').click(function(){
   ne=$(this).index();

   var n=ne,
    lef=0;

   //获取宽度参数
   var kuan=$(this).width()+10,
    zong=btn.length*kuan - $('.p27LContainer').width();

   //修改小图片按钮样式
   btn.removeClass('p27LCAct');
   $(this).addClass('p27LCAct');

   //获取移动距离
   lef=(n-3)*(kuan);

   //最左 最右判断
   if( n <= 3 )lef=0;
   if( lef>=zong )lef=zong+4;

   //执行滚动
   $('.p27LContent').stop(true).animate({ left:-lef });
   
   //修改大图路径
   $('.p27BImg img').attr('src',$(this).find('img').attr('src') );
   
   if( $('.p27BImg img').width() > $('.p27BImg').width() )$('.p27BImg img').css({ width:'100%' });

  }).eq(0).click();
 
  //默认样式 挂接左右按钮事件
  $('.p27LLeft').click(function(){
   ne-=1;
   if( ne<0 )ne=0;
   btn.eq(ne).click();
  });

  $('.p27LRight').click(function(){
   ne+=1;
   if( ne>=btn.length )ne=btn.length-1;
   btn.eq(ne).click();
  });

  $('.p27BRight').click(function(){
   $('.p27LRight').click();
  });
  $('.p27BLeft').click(function(){
   $('.p27LLeft').click();
  });
  $('.P27BSRight').click(function(){
   $('.p27LRight').click();
  });
  $('.P27BSLeft').click(function(){
   $('.p27LLeft').click();
  });
  

  //详细按钮 点击事件
  var xBtn=$('.p27_Xx_Items');
  xBtn.click(function(){
   
   zidong();

   ne=$(this).index();

   //获取 图片路径
   var dizhi=$(this).find('img').attr('src');
   
   //获取宽度参数 15是 margin-left + border 的值
   var kuai=$(this).width()+10,
    zong=xBtn.length*kuai - $('.p27_Xx_Container').width();

   //修改小图片按钮样式
   xBtn.removeClass('p27_Xx_Act');
   $(this).addClass('p27_Xx_Act');

   var num=parseInt(($('.p27_Xx_Container').width()/kuai));
   
   //获取移动距离
   lef=( ne-num/2 )*kuai;

   //最左 最右判断
   if( lef<0 )lef=0;

   //执行滚动
   $('.p27_Xx_Content').stop(true).animate({ left:-lef });
   
   //修改大图路径
   $('.p27_Xx_Image img').attr('src',dizhi);
   daxiao();

   //修改当前序列号信息
   $('.p27_Xx_Title span').html( '<i>'+(ne+1)+'</i>/'+btn.length );

  });

  //计算大图位置
  function daxiao(){
   var ww=$(window).width(),
    wh=$('.p27_Xx').height(),
    xx=$('.p27_Xx_Shop');
   
   var are=$('.p27_Xx_Image'),
    img=$('.p27_Xx_Image img');
     
   var he=wh-xx.height(),
    jj=160;  //上下最小间距的和
   
   //还原 图片的默认尺寸，并隐藏
   img.css({ opacity:0,width:'auto',height:'auto' });
   
   //如果 图片的默认高度超出 窗口+间隙 的高度，则缩小高度
   if( are.height() > wh-jj )img.height( wh-jj );
   
   //获取图片 距离窗口上边的 间隙
   var tp=(wh-are.height())/2;

   //修改大图位置
   $('.p27_Xx_Image').css({ top:tp,left:(ww-img.width())/2 });

   //刷新大图描述 位置
   $('.p27_Xx_Msg').css({ top:tp+are.height()+10 });
   
   //刷新 大图框宽度 9是边框宽度
   are.width( $('.p27_Xx_Image img').width()+9 );
   
   //显示图片
   img.css({ opacity:1 });
  }
  
  //详细界面 按钮挂接
  $('.p27_Xx_ILeft').click(function(){
   ne-=1;
   if( ne<0 )ne=0;
   xBtn.eq(ne).click();
  });

  $('.p27_Xx_IRight').click(function(){
   ne+=1;
   if( ne>=btn.length )ne=btn.length-1;
   xBtn.eq(ne).click();
  });

  $('.p27_Xx_BtnLeft').click(function(){
   $('.p27_Xx_ILeft').click();
  });
  $('.p27_Xx_BtnRight').click(function(){
   $('.p27_Xx_IRight').click();
  });
  

  //激活显示出 按钮
  $('.p27_Xx_Shop').hover(function(){
   clearTimeout(m);
   $(this).stop(true).animate({ bottom:0 });
  },function(){
   yincang();
  });
  
  //延时执行 隐藏 底部按钮区域
  var m;
  function yinca

特效说明：

1、图文混排的图片列表；

2、图片全屏查看，及自动播放；

3、每行代码标有注释，方便期望学习html css 结构和 js原理的同学。

因为还没有封装，暂时只见于效果查看和学习，等最近封装后，再建议使用。

时间： 2024-11-13 06:31:32

jQuery插件图片列表切换，点击小图列表大图显示的相关文章

js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码_javascript技巧

今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下:     Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <

jquery实现图片左右切换的方法

  这篇文章主要介绍了jquery实现图片左右切换的方法,设计jQuery操作页面元素及对应样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 6

jquery实现图片左右切换的方法_jquery

本文实例讲述了jquery实现图片左右切换的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

html5或者jquery做图片镜像，就想手机前置摄像头显示（照镜子）。。。。

问题描述 html5或者jquery做图片镜像,就想手机前置摄像头显示(照镜子).... 求大神在百忙之中解答一下,万分感谢,最好整个文件简单的写下 解决方案 用jcrop插件 http://jcrop.org/

Java界面的JComboBox下拉菜单列表按钮点击，列表无法弹出是怎么回事？？？

问题描述 Java界面的JComboBox下拉菜单列表按钮点击,列表无法弹出是怎么回事??? 解决方案 你没给按钮写个监听器吗? 解决方案二: 有可能是脚本有错误,开启脚本错误检测,看下是哪里错了 解决方案三: http://zhidao.baidu.com/link?url=enQJkPyZ2lbZHRczPjs607asvJrk4GIIlmW1xFJB055rlXTp1IcqjaNMqib-W-588J5M7DWBunQP6fJ-YiRRzK监听器代码

jQuery 写的插件图片上下切换幻灯效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery实现图片渐变切换兼容ie6/Chrome/Firefox

jquery代码实现图片渐变切换同时兼容ie6.Chrome.Firefox,想学习的朋友可以测试下,希望对大家有所帮助   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

jquery实现图片渐变切换兼容ie6/Chrome/Firefox_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

利用jquery插件制作Tabs切换教程(1/2)

自动轮换,ajax等主要功能,然后是dom的排列形式,这里采用传统的 <div id="tabs"> <ul> <li><a href="#tabs1">tabs1</a></li> <li><a href="#tabs2" rel="ajax.htm">tabs2</a></li> </ul>