图片滚动

html代码：

 1 <div class="imgDiv">

 2                 <volist name="locationInfo" id="locationInfoItem">

 3                 <div class="imgDivChild" id="locationInfoItem{$i}">

 4                     <a target="_blank" href="{$locationInfoItem.jump_url}">

 5                         <img class="src_img" src="{$locationInfoItem.attach_id}" />

 6                     </a>

 7                     <php>if ($locationInfoItem['rtype'] != 'activity') {</php>

 8                     <div class="titleBlackBox">

 9                         <h1><a target="_blank" href="{$locationInfoItem.jump_url}">{$locationInfoItem.lname}</a></h1>

10                         <span>人气:{$locationInfoItem.like_count|default="0"}</span>

11                     </div>

12                     <div class="titleBlackBoxBg">

13                         <!--<h1 style="color: #000; font-size: 30px; font-weight: bold; margin-left: 13px; margin-top: 11px; font-family: 微软雅黑;"><a style="color: #000;font-family: 微软雅黑;font-size: 30px;font-weight: bold;" target="_blank" href="<php> echo U('location/Location/detail',array('id'=>$locationInfoItem['location_id']));</php>">{$locationInfoItem.lname}</a></h1>

14                         <span style="color: #000; margin-top: 10px; margin-left: 15px; font-size: 14px; font-family: 微软雅黑;">人气:{$locationInfoItem.like_count|default="0"}</span>-->

15                     </div>

16                     <php>}</php>

17                     <php>if($locationInfoItem['recommend_type'] == '1'){</php>

18                         <php>if ($locationInfoItem['alt']){</php>

19                         <div class="mainTipsBlackBox">

20                             <h1>{$locationInfoItem.alt}</h1>

21                             <php>if ($locationInfoItem['rtype'] != 'activity'){</php>

22                             <a target="_blank" href="<php>echo U('search/Search/home')</php>">[看其他城市]</a>

23                             <php>}</php>

24                         </div>

25                         <div class="mainTipsBlackBoxBg" style="top:380px; height:20px;"></div>

26                         <php>} else {</php>

27                         <div class="mainTipsBlackBoxBg" style="top:380px; height:20px;"></div>

28                         <php>}</php>

29                     <php>} else {</php>

30                     <div class="mainTipsBlackBox">

31                         <h1>{$strRand}</h1>

32                         <a target="_blank" href="<php>echo U('search/Search/home')</php>">[看其他城市]</a>

33                     </div>

34                     <div class="mainTipsBlackBoxBg" style="top:380px; height:20px;"></div>

35                     <php>}</php>

36                 </div>

37                 </volist>

38             </div>

39             <ul class="triBtn">

40                 <li class="f activeSlide">01</li>

41                 <li>02</li>

42                 <li>03</li>

43                 <li>04</li>

44                 <li class="l">05</li>

45             </ul>

div为imgDiv中的是图片循环的，图片没有大小，可以用预加载模式算出图片大小的。

 1 function loadImage(url, callback, index) {

 2     var img = new Image();

 3     img.src = url;

 4     

 5     if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数

 6         callback.call(img, index);

 7         return; // 直接返回，不用再处理onload事件

 8     }

 9     

10     img.onload = function() {//图片下载完毕时异步调用callback函数。

11         callback.call(img, index);// 将callback函数this指针切换为img。

12         img.onload = null;

13     };

14 }

15 

16 function imgLoaded(index) {

17     var imgWidth = this.width;

18     imgWidth = imgWidth ? imgWidth : 604;

19     var imgHeight = this.height;

20     imgHeight = imgHeight ? imgHeight : 395;

21 

22     var scaleWidth = 604;

23     var scaleHeight = 395;

24     var scale = scaleWidth / imgWidth;

25 

26     if (scale < (scaleHeight / imgHeight)) {

27         scale = scaleHeight / imgHeight;

28     }

29 

30     if (scale <= 1) {    //不用缩放            

31     } else {

32         if (imgWidth * scale >= scaleWidth) {

33             imgWidth = parseInt(imgWidth * scale);

34             imgHeight = scaleHeight;

35         } else {

36             imgWidth = scaleWidth;

37             imgHeight = parseInt(imgHeight * scale);

38         }

39     }

40 

41     var $img = $('.imgDiv').find('.imgDivChild').eq(index).find('.src_img').eq(0);

42     $img.css({width:imgWidth, height:imgHeight});

43 }

循环算出图片的大小：

1 //调整图片宽度

2     $('.box2 .imgDiv .imgDivChild').each(function(index){

3         var $img = $(this).find('img.src_img').eq(0);

4         loadImage($img.attr('src'), imgLoaded, index);

5     });

然后滚动：

滚动运用的插件是jquery.cycle.js插件：

先要引入该js，然后js中的代码调用：

 1 $('.box2 .imgDiv').cycle({

 2         fx: 'fade',

 3         speed: 1000,

 4         timeout: 7000,

 5         pause: 1,

 6         pauseOnPagerHover:  1,

 7         pager: $pager,

 8         pagerAnchorBuilder: function(idx, slide) {    

 9             return '.triBtn li:eq(' + idx + ')';

10         },

11         pagerEvent: 'mouseenter.cycle',

12         before: function(curr, next, opts) {

13             if (firstScroll) {

14                 setTimeout(function(){

15                     imgScroll($('.imgDiv').find('.imgDivChild').eq(0).find('.src_img').eq(0));

16                 }, 10)

17             }

18             firstScroll = false;

19         },

20         after: function(curr, next, opts) {

21             var $img = $(this).find('img.src_img').eq(0);

22             imgScroll($img);

23         }

24     });

每一张图片大小超过dv的大小，内部滚动代码：

 1 var intervalFlag = false;

 2     function imgScroll($obj) {

 3         var $img = $obj;

 4         var height = $img.height();

 5         var witdh = $img.width();

 6         var diffTop = -(height - 395);

 7         var diffLeft = -(witdh - 604);

 8         var curLeft = $img[0].style.marginLeft;

 9         var curTop = $img[0].style.marginTop;

10         

11         if(!curLeft) curLeft = 0;

12         if(!curTop) curTop = 0;

13         

14         if (witdh > 604) {

15             if (height > 395) {    //如果高度大于395

16                 if((curLeft == diffLeft + "px") && (curTop == diffTop + "px")){

17                     $img.animate({marginLeft:'0px'}, 7000,function(){    //向右移

18                         $img.animate({marginTop:'0px'}, 7000, function(){    //再向下移

19                             if(intervalFlag) imgScroll($obj);

20                         });

21                     });

22                 } else if((curLeft == diffLeft + "px") && (curTop != diffTop + "px")) {

23                     $img.animate({marginTop:diffTop+'px'}, 7000, function(){    //向下移

24                         if(intervalFlag) imgScroll($obj);

25                     });    

26                 } else if((curLeft != diffLeft + "px") && (curTop = diffTop + "px")) {

27                     $img.animate({marginLeft:diffLeft+'px'}, 7000, function() {    //向左移

28                         if(intervalFlag) imgScroll($obj);

29                     });

30                 } else {

31                     $img.animate({marginLeft:diffLeft+'px'}, 7000,function(){    //向右移

32                         $img.animate({marginTop:diffTop+'px'}, 7000, function(){    //再向下移

33                             if(intervalFlag) imgScroll($obj);

34                         });

35                     });

36                 }

37             } else {

38                 if(curLeft == diffLeft + "px") {

39                     $img.animate({marginLeft:'0px'}, 7000, function(){

40                         if(intervalFlag) imgScroll($obj);

41                     });

42                 } else {

43                     $img.animate({marginLeft:diffLeft+'px'}, 7000, function(){

44                         if(intervalFlag) imgScroll($obj);

45                     });

46                 }

47             }

48         } else {

49             if (height > 395) {    //如果高度大于395

50                 if (curTop == diffTop + "px") {

51                     $img.animate({marginTop:'0px'}, 7000, function(){

52                         if(intervalFlag) imgScroll($obj);

53                     });

54                 } else {

55                     $img.animate({marginTop:diffTop+'px'}, 7000, function(){

56                         if(intervalFlag) imgScroll($obj);

57                     });

58                 }

59             }

60         }

61         

62     }

 针对滚动的图片还要加上其他事件的话，用jquery中的live方法：

$("ul.triBtn li,.src_img").live("mouseover", function(){

        intervalFlag = true;

    });

    $("ul.triBtn li,.src_img").live("mouseout", function(){

        intervalFlag = false;

    });