溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“常用相冊圖片左右點擊切換輪播js特效怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“常用相冊圖片左右點擊切換輪播js特效怎么實現”吧！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常用相冊圖片左右點擊切換輪播js特效</title>
<meta name="keywords" content="相冊,圖片,左右,點擊切換,輪播,js特效">
<meta name="description" content="常用相冊圖片左右點擊切換輪播，可應用在商品詳情、汽車展示、相冊展示等，jQuery左右按鈕切換圖片，點擊小圖縮略圖可切換到對應的大圖，當縮略圖過多時可點擊左右按鈕控制底部縮略圖片左右滾動，進行更多的圖片切換。" />
</head>
<body>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//點擊小圖切換大圖
$("#thumbnail li a").click(function() {
$(".zoompic img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
$("#thumbnail li.current").removeClass("current");
$(this).parents("li").addClass("current");
return false;
});
$(".zoompic>img").load(function() {
$(".zoompic>img:hidden").show();
});
//小圖片左右滾動
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 < 5) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').removeClass("dasabled");
}
$('#btn-right').click(function() {
if ($slider_child_l < 5 || slider_count >= $slider_child_l - 5) {
return false;
}
slider_count++;
$slider.animate({left: '-=' + $slider_width + 'px'}, 'fast');
slider_pic();
});
$('#btn-left').click(function() {
if (slider_count <= 0) {
return false;
}
slider_count--;
$slider.animate({left: '+=' + $slider_width + 'px'}, 'fast');
slider_pic();
});
function slider_pic() {
if (slider_count >= $slider_child_l - 5) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').addClass("dasabled");
}
else if (slider_count > 0 && slider_count <= $slider_child_l - 5) {
$('#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");
}
}
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋體";}
/* zoombox */
.zoombox{width:686px;margin:20px auto 0 auto;}
.zoompic{border:solid 1px #dfdfdf;width:684px;height:394px;background:url(images/loading.gif) no-repeat 50% 50%;}
.sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}
.sliderbox .arrow-btn{width:38px;height:76px;background:url(images/arrow-btn.png) no-repeat;cursor:pointer;}
.sliderbox #btn-left{float:left;background-position:0 0;}
.sliderbox #btn-left.dasabled{background-position:0 -76px;}
.sliderbox #btn-right{float:right;background-position:-38px 0;}
.sliderbox #btn-right.dasabled{background-position:-38px -76px;}
.sliderbox .slider{float:left;height:76px;width:605px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}
.sliderbox .slider ul{position:absolute;left:0;width:999em;}
.sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;}
.sliderbox .slider li img{border:solid 1px #dfdfdf;}
.sliderbox .slider li.current img{border:solid 1px #3366cc;}
</style>
<div class="zoombox">
<div class="zoompic"><img src="images/3427.jpg" width="684" height="394" alt="美女配奧迪A4L墻紙" /></div>
<div class="sliderbox">
<div id="btn-left" class="arrow-btn dasabled"></div>
<div class="slider" id="thumbnail">
<ul>
<li class="current"><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奧迪A4L墻紙01" /></a></li>
<li><a href="images/52347.jpg" target="_blank"><img src="images/41a.jpg" width="115" height="74" alt="美女配奧迪A4L墻紙02" /></a></li>
<li><a href="images/23463.jpg" target="_blank"><img src="images/234fa.jpg" width="115" height="74" alt="美女配奧迪A4L墻紙03" /></a></li>
<li><a href="images/3247.jpg" target="_blank"><img src="images/412saf.jpg" width="115" height="74" alt="美女配奧迪A4L墻紙04" /></a></li>
<li><a href="images/26547.jpg" target="_blank"><img src="images/41356a.jpg" width="115" height="74" alt="美女配奧迪A4L墻紙05" /></a></li>
<li><a href="images/2153.jpg" target="_blank"><img src="images/432sadf.jpg" width="115" height="74" alt="美女配奧迪A4L墻紙06" /></a></li>
<li><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奧迪A4L墻紙01" /></a></li>
</ul>
</div>
<div id="btn-right" class="arrow-btn"></div>
</div>
</div><!--slider end-->
</body>
</html>
感謝各位的閱讀，以上就是“常用相冊圖片左右點擊切換輪播js特效怎么實現”的內容了，經過本文的學習后，相信大家對常用相冊圖片左右點擊切換輪播js特效怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
