/*效果图*/

HTML:    <div class="scroll">
       <div class="picbox">
        <ul class="piclist mainlist">
             <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
                         <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg2.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg3.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg4.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg5.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                    <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
        </ul>
        <ul class="piclist swaplist"></ul>
    </div>
    <div class="og_prev"></div>
    <div class="og_next"></div>
</div>

CSS:

* {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    font-size:12px;
}
a {
    text-decoration:none;
}
.scroll {
    width:760px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
.picbox {
    width:730px;
    height:340px;
    background:#fff;
    border:1px solid #DED7D1;
    overflow:hidden;
    position:relative;
    margin:15px;
}
.picbox ul {
    height:285px;
    padding-top:5px;
}
.piclist {
    position:absolute;
    left:0px;
    top:0px;
}
.piclist li.goodlist {
    width:221px;
    margin:10px 0;
    padding:0px 5px;
    margin-right:-1px;
    float:left;
    padding-left: 20px;
}
.piclist li.goodlist img {
    width:100%;
    height:120px;
}
.swaplist {
    position:absolute;
    left:-3000px;
    top:0px;
}
.og_prev, .og_next {
    width:30px;
    height:60px;
    background:url(../images/btn.png) no-repeat;
    position:absolute;
    top:152px;
    z-index:99;
    cursor:pointer;
}
.og_prev {
    background-position:0 0;
    left:0px;
}
.og_prev:hover {
    background-position:0 -60px;
}
.og_next {
    background-position:-30px 0;
    right:0px;
}
.og_next:hover {
    background-position:-30px -60px;
}
.goodlist img.pics {
    width:85px;
    height:135px;
    float:left;
    background:#fff url(../images/loading.gif) center center no-repeat;
}
.title {
    width:100%;
    height:22px;
    line-height:22px;
    display:block;
    color:#363636;
    text-align: center;
    margin-top: 10px;
}
.scrolling_picture{overflow:hidden; display:block;width:90%;}

JS:

$(function(){
    linum = $('.mainlist li').length;//图片数量
    w = linum/2 * 232;//ul宽度
    $('.piclist').css('width', w + 'px');//ul宽度
    $('.swaplist').html($('.mainlist').html());//复制内容
    
    $('.og_next').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>4){//多于4张图片
            ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
            sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
            if(ml<=0 && ml>w*-1){//默认图片显示时
                $('.swaplist').css({left: '928px'});//交换图片放在显示区域右侧
                $('.mainlist').animate({left: ml - 928 + 'px'},'slow');//默认图片滚动                
                if(ml==(w-928)*-1){//默认图片最后一屏时
                    $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
                }
            }else{//交换图片显示时
                $('.mainlist').css({left: '928px'})//默认图片放在显示区域右
                $('.swaplist').animate({left: sl - 928 + 'px'},'slow');//交换图片滚动
                if(sl==(w-928)*-1){//交换图片最后一屏时
                    $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
                }
            }
        }
    })
    $('.og_prev').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>4){
            ml = parseInt($('.mainlist').css('left'));
            sl = parseInt($('.swaplist').css('left'));
            if(ml<=0 && ml>w*-1){
                $('.swaplist').css({left: w * -1 + 'px'});
                $('.mainlist').animate({left: ml + 928 + 'px'},'slow');                
                if(ml==0){
                    $('.swaplist').animate({left: (w - 928) * -1 + 'px'},'slow');
                }
            }else{
                $('.mainlist').css({left: (w - 928) * -1 + 'px'});
                $('.swaplist').animate({left: sl + 928 + 'px'},'slow');
                if(sl==0){
                    $('.mainlist').animate({left: '0px'},'slow');
                }
            }
        }
    });
});

js实现多行图片点击(自动)左右无缝轮播特效的更多相关文章

  1. react使用swiper,解决添加点击事件首位图片点击失效,解决轮播按钮被覆盖问题

    JS部分 createSwiper1() { var option = { // slidesPerView: 5, slidesPerView: 3, centeredSlides:true, }; ...

  2. js+css3实现多行图片点击(自动)左右无缝轮播特效

    /*效果图*/ HTML:    <div class="scroll">       <div class="picbox">     ...

  3. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  6. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  7. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  9. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

随机推荐

  1. Android项目实战(三十一):异步下载apk文件并安装(非静默安装)

    前言: 实现异步下载apk文件 并 安装.(进度条对话框显示下载进度的展现方式) 涉及技术点: 1.ProgressDialog   进度条对话框  用于显示下载进度 2.AsyncTask     ...

  2. centos 安装gcc->联网 问题解决

    本篇部分摘抄至TD_时缔 VMware虚拟机下安装centosmini版本,安装后第一件事就是yum update 但是有错:cannot find a valid baseurl for repo ...

  3. 我个人的Java学习经验(一家之言)

    声明:本文只是我的个人经验之谈,或者连经验之谈都算不上,因为我觉得自己还是个新手,没有什么经验可谈,就算是我分享一下自己从开始学习Java到现在的一些心路历程吧,各位看官暂且看吧,欢迎交流.第一部分算 ...

  4. iOS使用StroryBoard页面跳转及传值

    之前在网上iOS的页面跳转大多都是按回以前的那种xib的形式,但鄙人是使用storyboard的.这篇就只介绍利用storyboard进行页面跳转与传值. 新建页面 iOS的程序也是使用了MVC的思想 ...

  5. [转]支持向量机SVM总结

    首先,对于支持向量机(SVM)的简单总结: 1. Maximum Margin Classifier 2. Lagrange Duality 3. Support Vector 4. Kernel 5 ...

  6. muduo库整体架构简析

    muduo是一个高质量的Reactor网络库,采用one loop per thread + thread loop架构实现,代码简洁,逻辑清晰,是学习网络编程的很好的典范. muduo的代码分为两部 ...

  7. 【转】Spring源码编译

    原文地址: http://www.flyoung.me/2013/08/02/springcodecompile/ 参考资料: https://github.com/spring-projects/s ...

  8. Oracle Jdbc驱动下载及安装本地maven仓库

    由于二进制许可 binary license的限制,oracle jdbc驱动不能通过共有仓库来获取,所以你可以下载下来添加到自己的本地仓库或私有仓库中. 添加到本地仓库步骤如下: 下载Oracle ...

  9. 【LeetCode】Binary Tree Level Order Traversal 【BFS】

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  10. CoreGraphics--饼状图

    //传入数据,饼状图 pieChartView.dataArr = @[@20,@50,@80,@70,@40]; - (void)drawRect:(CGRect)rect { // Drawing ...