1.jquery.imgScroll.js
成都創(chuàng)新互聯(lián)公司服務項目包括洮南網(wǎng)站建設、洮南網(wǎng)站制作、洮南網(wǎng)頁制作以及洮南網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，洮南網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到洮南省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！
;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var?imgLen=$(object.scrollImgBox).length;var?imgNum=0;var?tabNum=0;var?nowIndex=0;var?index;var?scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function?changeEffectNext(){if(object.changeType=='slide'){if(imgNumimgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNumimgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNumimgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function?changeEffectPrev(){if(object.changeType=='slide'){if(imgNum0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var?s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function?changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow');$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var?index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var?index=$(this).index();changesmallImg(index)})}}})})(jQuery);
2.html結構
a,.lbPeo{-webkit-transition:all?.2s?ease-in-out?0s;-o-transition:all?.2s?ease-in-out?0s;-moz-transition:all?.2s?ease-in-out?0s;-ms-transition:all?.2s?ease-in-out?0s;transition:all?.2s?ease-in-out?0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position:?relative;}
.lbBtn{display:block;position:?absolute;top:0;width:40px;height:143px;border:1px?solid?#D7D2CA;background:url('../../../images/special/140801/ctr_prev.png')?no-repeat?center?center;}
.lbPrev{left:0}.lbNext{right:0;background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color:?#ddd;}
.lbBox{width:900px;height:145px;margin-left:?50px;overflow:?hidden;position:?relative;}
.lbList{width:1000%;}
.lbBox?ul{float:left}
.lbBox?li{float:left;width:150px;height:145px;overflow:?hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"微軟雅黑";color:#333}
.lbPeo?img{display:block;border:?1px?solid?#ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeo?h5{font-weight:?bold;font-size:12px;padding-top:?5px;*padding-top:?0}
.lbPeo?h6{font-size:12px;}
.lbBox?li?a:hover{text-decoration:?none}
.lbBox?li?a:hover?.lbPeo{color:#ff9600}
!--?人物--
div?class="lbCon?comWith?clearfix"
div?class="lbBox"
div?class="lbList"
ul
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
/ul
ul
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大2紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李2大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
lia?href=""?target="_blank"
div?class="lbPeo?clearfix"
img?src=""?/
h5李大紅/h5
h6大公報副社長兼執(zhí)行總編輯/h6
/div
/a/li
/ul
/div
/div
a?href="javascript:;"?class="lbBtn?lbPrev"/a
a?href="javascript:;"?class="lbBtn?lbNext"/a
/div
3.頁面調用：
script type="text/javascript" src="js/jquery-1.9.1.js"/script
script type="text/javascript" src="js/jquery.imgScroll.js"/script(上面那個js)
$('.lbCon?.lbBox?.lbList').imgScroll({
firstDiv:?'.lbCon?.lbBox',
scrollBox:?'.lbCon?.lbBox?.lbList',
scrollImgBox:?'.lbCon?.lbBox?ul',
botPrev:?'.lbCon?.lbPrev',
botNext:?'.lbCon?.lbNext',
changeType:?"slide",
thumbNowClass:?'on',
thumbOverEvent:?true,
changeTime:?5000,
ImgBoxMar:?0,
flag:?false
});
4.至于鼠標滑過 顯示左右按鈕,可以這么寫（思路:css默認隱藏左右按鈕，鼠標滑過顯示左右按鈕，劃出隱藏，需要引入jquery.js）
$(function(){
$(".wj_jdt_1").bind("onmouseover",function(){
$(".ctr_btn").show();
}).bind("onmouseout",function(){
$(".ctr_btn").hide();
})
})
大體是這么個意思，至于怎么延伸在你
函數(shù) 描述
$(selector).hide() 隱藏被選元素
$(selector).show() 顯示被選元素
$(selector).toggle() 切換（在隱藏與顯示之間）被選元素
$(selector).slideDown() 向下滑動（顯示）被選元素
$(selector).slideUp() 向上滑動（隱藏）被選元素
$(selector).slideToggle() 對被選元素切換向上滑動和向下滑動
$(selector).fadeIn() 淡入被選元素
$(selector).fadeOut() 淡出被選元素
$(selector).fadeTo() 把被選元素淡出為給定的不透明度
$(selector).animate() 對被選元素執(zhí)行自定義動畫
speed 參數(shù)規(guī)定顯示或隱藏的速度?？梢栽O置這些值："slow", "fast", "normal" 或毫秒。
callback 參數(shù)是在 hide 或 show 函數(shù)完成之后被執(zhí)行的函數(shù)名稱
自己整理，絕非抄襲!
這種插件非常多, 你可以挑一個用
如果你要問原理, 關鍵點是
外層div是一個窗口, 控制好長寬, 設置overflow為hidden, 那么只有在此區(qū)域內的內容才會被顯示
內容是一堆圖片, 通過js控制位置, 比如用relative定位, 通過css控制left, 就是移動效果
如果要輪播, 注意控制邊界圖片次序
重慶分公司
重慶分公司
