jquery控制圖片左右滾動-創(chuàng)新互聯(lián)

圖片左右滾動，有時候無縫比較難實現(xiàn)，可以讓圖片在向左滾動結(jié)束然后接著倒著滾動，這樣也可以說是一種無縫滾動，在網(wǎng)上下載了一個點擊按鈕左右滾動的例子，我經(jīng)過修改，可以左右自由滾動，鼠標滑上停止?jié)L動，圖片放大，滑下接著滾動，點擊按鈕也可以控制左右。看代碼：

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：成都網(wǎng)站設計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的臺江網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

先看jsp:

<body>
<div class="sliderbox">
<div id="btn-left" class="arrow-btn dasabled" onclick="left2()"></div>
<div class="slider" id="slider">
<ul>
 <li><a href="" target="_blank"><img src=\'#\'" /go-launcher-ex.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /go-sms.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /imgwww20120104173328332830083.png"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /imgwww20120222114514451461239.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /ggbook.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /imgwww20120621153035303523388.png"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /lianxiren.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /go-touch.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /3g-android-market.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /3ggoucai.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /3.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /4.jpg"/></a></li>
 <li><a href="" target="_blank"><img src=\'#\'" /5.jpg"/></a></li>
</ul>
</div>
<div id="btn-right" class="arrow-btn" onclick="right2()"></div>
</div>

再看css樣式：

*{margin:0;padding:0;list-style-type:none;}
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋體";background:#eee;}

.sliderbox{url(.. /p_w_picpaths/index-bottom.jpg) no-repeat 0 -1px;width:530px;height:200px;overflow:hidden;padding:50px 0 0 0;margin:20px auto;}
.arrow-btn{margin:35px 0 0 0;display:inline;url(.. /p_w_picpaths/arrow-btn.png) no-repeat;width:26px;height:124px;overflow:hidden;cursor:pointer;}
#btn-left{float:left;margin-left:12px;background-position:0 0;}
#btn-left.dasabled{background-position:0 -124px;}
#btn-right{float:right;margin-right:6px;cursor:pointer;background-position:-26px 0;}
#btn-right.dasabled{background-position:-26px -124px;}
.slider{width:450px;overflow:hidden;position:relative;height:166px;float:left;}
.slider ul{position:absolute;left:0px;top:32px;width:1800px;height:140px;list-style:none;}
.slider li{float:left;width:150px;height:140px;}
.slider a{display:block;text-decoration:none;color:#073a5e;font-size:12px;font-weight:bold;text-align:center;margin-top:24px;}
.slider img{width:90px;display:inline-block!important;}

最后看js:

<script type="text/javascript">
var _scrolling="";
var a=1;  //定義a變量，判斷鼠標滑上圖片是向哪個方向，滑下鼠標控制方向不變
var $slider = "";
var $slider_child_l = "";
var $slider_width = "";
var slider_count = 0;
if ($slider_child_l <=3) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').removeClass("dasabled");
}
var time="";
function right1(){//自由向右滾動
if (slider_count >= $slider_child_l - 3){
a=0;
left1();//滾動結(jié)束，調(diào)用向左的函數(shù)，圖片向左滾動
}else{
slider_count++;
$slider.animate({left: '-=' + $slider_width + 'px'}, 'slow');
slider_pic();
time = setTimeout("right1()",2000);
}
}
function left1(){//自由向左滾動
if (slider_count <= 0) {
a=1;
right1(); //滾動結(jié)束，調(diào)用向右函數(shù)，圖片向右滾動
}else{
slider_count--;
$slider.animate({left: '+=' + $slider_width + 'px'}, 'slow');
slider_pic();
time = setTimeout("left1();",2000);
}
}
function right2(){//點擊向右觸發(fā)函數(shù)
if (slider_count >= $slider_child_l - 3){
return false;
}else{
slider_count++;
$slider.animate({left: '-=' + $slider_width + 'px'}, 'slow');
slider_pic();
}
}
function left2(){//點擊向左觸發(fā)函數(shù)
if (slider_count <= 0) {
return false;
}else{
slider_count--;
$slider.animate({left: '+=' + $slider_width + 'px'}, 'slow');
slider_pic();
}
}

function slider_pic() {
if (slider_count >= $slider_child_l - 3) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').addClass("dasabled");
}
else if (slider_count > 0 && slider_count <= $slider_child_l - 3) {
$('#btn-left').css({cursor: 'pointer'});
$('#btn-left').removeClass("dasabled");
$('#btn-right').css({cursor: 'pointer'});
$('#btn-right').removeClass("dasabled");
}
else if (slider_count <= 0) {
$('#btn-left').css({cursor: 'auto'});
$('#btn-left').addClass("dasabled");
}
}

$('.slider a').hover(function() {
if ($(this).find('img:animated').length) return;
$(this).animate({marginTop: '0px'}, 300);
$(this).find('img').animate({width: '150px'}, 300);
}, function() {

$(this).animate({marginTop: '24px'}, 200);
$(this).find('img').animate({width: '90px'}, 200);
});
$(function(){

 $slider = $('.slider ul');
$slider_child_l = $('.slider ul li').length;
$slider_width = $('.slider ul li').width();
$slider.width($slider_child_l * $slider_width); right1();
$("#slider>ul").hover(function(){
//鼠標移動DIV上停止
clearTimeout(time);
},function(){
//離開繼續(xù)調(diào)用
if(a==1){
 right1();
}else if(a==0){
 left1();
}
});

});

</script>

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：jquery控制圖片左右滾動-創(chuàng)新互聯(lián)
文章分享：http://bm7419.com/article42/ddpcec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、ChatGPT、定制開發(fā)、虛擬主機、品牌網(wǎng)站建設、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設