快捷導(dǎo)航

jquery圖片滾動放大代碼分享（1）

更新時間：2015年08月25日 10:06:53 投稿：lijiao

這篇文章主要介紹了jquery圖片滾動放大效果，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。

本文實例講述了jquery圖片滾動放大效果。分享給大家供大家參考。具體如下：
這是一款基于jquery實現(xiàn)圖片滾動放大效果代碼，帶有左右箭頭，適合用于產(chǎn)品展示，便于用戶瀏覽產(chǎn)品細(xì)節(jié)，是一款非常實用的特效代碼。
運行效果圖： ----------------------查看效果下載源碼-----------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jquery圖片滾動放大效果代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery圖片滾動放大效果</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
<div class="sliderbox">
 <div id="btn-left" class="arrow-btn dasabled"></div>
 <div class="slider">
 <ul>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/go-launcher-ex.jpg"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/go-sms.jpg"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/imgwww20120104173328332830083.png"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/imgwww20120222114514451461239.jpg"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/ggbook.jpg"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/imgwww20120621153035303523388.png"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/lianxiren.jpg"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/go-touch.jpg"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/3g-android-market.jpg"/></a></li>
 <li><a href="http://www.fzitv.net/" target="_blank"><img src="images/3ggoucai.jpg"/></a></li>
 </ul>
 </div>
 <div id="btn-right" class="arrow-btn"></div>
</div>

<script type="text/javascript">

var $slider = $('.slider ul');
var $slider_child_l = $('.slider ul li').length;
var $slider_width = $('.slider ul li').width();
$slider.width($slider_child_l * $slider_width);

var slider_count = 0;

if ($slider_child_l < 6) {
 $('#btn-right').css({cursor: 'auto'});
 $('#btn-right').removeClass("dasabled");
}

$('#btn-right').click(function() {
 if ($slider_child_l < 6 || slider_count >= $slider_child_l - 6) {
 return false;
 }
 
 slider_count++;
 $slider.animate({left: '-=' + $slider_width + 'px'}, 'slow');
 slider_pic();
});

$('#btn-left').click(function() {
 if (slider_count <= 0) {
 return false;
 }
 
 slider_count--;
 $slider.animate({left: '+=' + $slider_width + 'px'}, 'slow');
 slider_pic();
});

function slider_pic() {
 if (slider_count >= $slider_child_l - 6) {
 $('#btn-right').css({cursor: 'auto'});
 $('#btn-right').addClass("dasabled");
 }
 else if (slider_count > 0 && slider_count <= $slider_child_l - 6) {
 $('#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);
});

</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是為大家分享的jquery圖片滾動放大效果代碼，希望大家可以喜歡。

您可能感興趣的文章: