常用相册图片左右点击切换轮播js特效怎么实现

发布时间：2022-03-14 15:34:59 来源：亿速云阅读：171 作者：iii 栏目：web开发

这篇文章主要讲解了“常用相册图片左右点击切换轮播js特效怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“常用相册图片左右点击切换轮播js特效怎么实现”吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>常用相册图片左右点击切换轮播js特效</title>

</head>

<body>

$(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>

*{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>

<ul>

</ul>

</div>

</div>

</div>

</body>

</html>

感谢各位的阅读，以上就是“常用相册图片左右点击切换轮播js特效怎么实现”的内容了，经过本文的学习后，相信大家对常用相册图片左右点击切换轮播js特效怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

向AI问一下细节

常用相册图片左右点击切换轮播js特效怎么实现

猜你喜欢

最新资讯

相关推荐

相关标签