图片滚动
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; });
