jquery滚动图片导航与图片放大效果模板

2019-03-06 23:13|来源: 书生

jquery滚动图片导航与图片放大效果模板实现图片左右滚动并放大效果


jquery滚动图片导航效果:

把鼠标放到霜个图标上,就会出现图片放大的效果:


源码如下:

<!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>jquery实现图片滚动并放大效果</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
    
<body>
<div class="sliderbox">
    <div id="btn-left" class="arrow-btn dasabled"></div>
    <div class="slider">
    <ul>
            <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.jpg"/></a></li>
        <li><a href="" target="_blank"><img src="6.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>
</body>
</html>


相关问答

更多

我写的java图片查看器怎么让图片缩小放大呢?

放大像素会失真,如果你要实现这一共能的话可以用JLabel来显示图片。有一个方法可以实现图片的缩放ImageIcon ii = new ImageIcon("img/item.jpg"); Image img = ii.getImage(); img = img.getScaledInstance(100, 100, Image.SCALE_DEFAULT); ii = new ImageIcon(img);这个例子的getScaledInstance方法可以生成一个新的Image对象,可以缩放成 ...

您好,我在解决使用jquery mobile实现图片滑动的效果

怎样用JQuery Mobile实现图片滑动 像...能再滑动图片切换加点效果吗?比如:手...提问者对回答的评价: 感谢,如果把...

JQuery如何实现如图片的效果

这个麻烦的地方不在javascript,使用不使用jQuery对于实现效果没有太大的帮助。 需要写好css样式表,用js切换一下class属性就OK了。

jquery、css、放大背景图片

可以用 Css3 的动画效果: @-webkit-keyframes sigma{ 0% {transform: scale(1);} 100% {transform: scale(2);} } .easeBg{ transform-origin: center; animation: sigma 1s; overflow: hidden; }

jQuery什么插件能实现这种效果,把鼠标放在小图片上面就能显示大图片???

使用js和jquery都可以实现,jquery中有一个方法是hover方法,解释是一个模仿悬停事件,具体思路就是需要两个容器,一个放原始图片,另外一个放放大图片(放大图片可以是实例化图片,也可以是根据原始图片获取的),当鼠标移到原始图片上时出发放大时间,移出时出发隐藏事件,自己可以规定,纯手打。

jquery 实现图片滚动的特效问题

有插件的 .. jcarousellite.min.js 比如这个 就很好 .. 找的时候看demo 很简单的 ...

jquery 图片切换简单效果

去懒人图库看一眼,有这个效果. //d.lanrentuku.com/down/js/jiaodiantu-838/

jquery 放大镜效果

<html> <head> <script src="jquery-1.4.2.js"></script> <script> $().ready(function(){ $("img").hover( function(){ width=$(this).attr("width"); height=$(this).attr("height"); $(this).attr("width",width+50) .attr("height",height+50); }, function(){ $(thi ...

jquery easyui如何做到下面图片的效果

你下载完完整的easyui后,里面有个demo文件夹,有几个布局layout1,layout2。就是这样的布局,如果你想要,我可以发给你的