欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jQuery自动滚动五屏图片通栏代码 手动滚动 点击滚动 点击滑动 左右滚动 点击滚动 有大用

shiping1 的头像
见附件 jQuery自动滚动五屏图片通栏代码.zip

修改相应的css文件
但最后发现 有问题  如果有两个地方使用这种 滚屏的话 会发生冲突 
我的解决办法如下:
1)把 原来的jscarousel.js代码 复制一下 还放到 jscarousel.js里面  如下
把 第二个的 jsCarousel: function(options) {
改成 jsCarousel2: function(options) {
再一个 就是把
第一处的  var current = $('.visible');
代码 变成 var current = $('#jsCarousel .visible');
把第二处的  var current = $('.visible');
 代码 变成  var current = $('#jsCarousel2 .visible');

同时在 html处写如相的代码
  <script type="text/javascript">
$(document).ready(function() {
    $('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) {
    // 可在这里加入点击图片之后触发的效果
    $("#overlay_pic").attr('src', src);
    $(".overlay").show();
    }, autoscroll: false });
    
    $(".overlay").click(function(){
        $(this).hide();
    });
    
第二处的代码
    $('#jsCarousel2').jsCarousel2({ onthumbnailclick: function(src) {
    // 可在这里加入点击图片之后触发的效果
    $("#overlay_pic2").attr('src', src);
    $(".overlay2").show();
    }, autoscroll: false });
    
    $(".overlay2").click(function(){
        $(this).hide();
    });
});

</script>
当然 相应的第二处的 html代码处 也要做相应的修改
就是改class和id






普通分类: