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

2019-09-11 郑州网站建设  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

    <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=http://www.divcss5.com/html/"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() {


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1937.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • JS
  • Doctype
  • !
  • л
  • Ч
  • -
  • public