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