梦魂

jquery+css实现图片切换效果

写了个Demo。

今天太晚了,明天再来写详细内容。

续写:

HTML:

  1. <div class="picbox">
  2.     <a class="last transition roll nopic" href="#"><</a>
  3.     <ul class="rollpic transition">
  4.         <li><img src="images/xx.jpg"></li>
  5.         <li><img src="images/1.png"></li>
  6.         <li><img src="images/xx.jpg"></li>
  7.         <li><img src="images/1.png"></li>
  8.         <li><img src="images/xx.jpg"></li>
  9.         <li><img src="images/1.png"></li>
  10.     </ul>
  11.     <a class="next transition roll" href="#">></a>
  12. </div>

JS:

  1.     var picwidth = parseInt($('.picbox').css('width'));
  2.     var piccount = $('.rollpic li').length;
  3.     var nowindex = 1;
  4.     // console.log(piccount);
  5.     $('.next').click(function(event) {
  6.         if(checknowpic(event.target)){
  7.             nowindex++;
  8.             var nowpicleft = (nowindex-1)*picwidth*-1;
  9.             $('.rollpic').css('left',nowpicleft);
  10.             updateroll(nowindex);
  11.         }
  12.         
  13.         return false;
  14.     });
  15.     $('.last').click(function(event) {
  16.         if(checknowpic(event.target)){
  17.              nowindex--;
  18.              var nowpicleft = (nowindex-1)*picwidth*-1;
  19.              $('.rollpic').css('left',nowpicleft);
  20.              updateroll(nowindex);
  21.         }
  22.         return false;
  23.     });
  24.     function checknowpic(obj){
  25.         var nowpicleft = parseInt($('.rollpic').css('left'));
  26.         /* Act on the event */
  27.         if($(obj).attr('class').indexOf('nopic')>-1){
  28.             return false;
  29.         }else{
  30.             return true;
  31.         }
  32.     }
  33.     function updateroll(now){
  34.         var nowpicleft = parseInt($('.rollpic').css('left'));
  35.         console.log(now);
  36.             if(now == piccount){
  37.                 $('.next').addClass('nopic');
  38.             }else{
  39.                 $('.next').removeClass('nopic');
  40.             }
  41.             if(now == 1){
  42.                 $('.last').addClass('nopic');
  43.             }else{
  44.                 $('.last').removeClass('nopic');
  45.             }
  46.     }

CSS:

  1. .picbox {
  2.   position: relative;
  3.   width: 400px;
  4.   height: 300px;
  5.   border: 1px solid #ff00ff;
  6.   margin: 0 auto;
  7.   overflow: hidden;
  8. }
  9. .picbox .last,
  10. .picbox .next {
  11.   line-height: 40px;
  12.   position: absolute;
  13.   font-size: 20px;
  14.   color: #fff;
  15.   background: rgba(0, 0, 0, 0.5);
  16.   top: 130px;
  17.   text-decoration: none;
  18.   padding: 0 10px;
  19.   z-index: 999;
  20. }
  21. .picbox .last.nopic,
  22. .picbox .next.nopic {
  23.   background: rgba(0, 0, 0, 0.1);
  24. }
  25. .picbox .last.nopic:hover,
  26. .picbox .next.nopic:hover {
  27.   background: rgba(0, 0, 0, 0.1);
  28. }
  29. .picbox .last:hover,
  30. .picbox .next:hover {
  31.   background: rgba(0, 0, 0, 0.8);
  32. }
  33. .picbox .last {
  34.   left: -32px;
  35. }
  36. .picbox .next {
  37.   right: -32px;
  38. }
  39. .picbox .rollpic {
  40.   position: absolute;
  41.   left: 0 ;
  42.   width: 4000px;
  43.   height: 300px;
  44.   list-style-type: none;
  45. }
  46. .picbox .rollpic li {
  47.   float: left;
  48.   width: 400px;
  49.   height: 300px;
  50.   cursor: pointer;
  51.   overflow: hidden;
  52. }
  53. .picbox .rollpic li img {
  54.   width: 100%;
  55.   height: 100%;
  56. }
  57. .picbox .rollpic.transition {
  58.   transition-duration: .5s;
  59.   transition-property: left;
  60.   transition-timing-function: ease;
  61. }
  62. .picbox:hover .last {
  63.   left: 0px;
  64. }
  65. .picbox:hover .next {
  66.   right: 0px;
  67. }

还一个base.css就不写了,源码里有的。

演示地址:http://zzmh.net/myDemo/turn-pic-demo.html

源码下载:http://zzmh.net/myDemo/download/turn-pic-demo.zip

退出移动版