zoukankan      html  css  js  c++  java
  • jq实现轮播图

    之前设计了一个校团委网站,里面有一个轮播图效果,上网后查看了许多方法,觉得下面这个方法最为适用,记录下来

    js代码:

    $(document).ready(function () {
                    //无缝切换轮播
                    var i = 0;//索引
                    var clone = $(".banner .imgList li").first().clone();//克隆第一张图片
                    $(".banner .imgList").append(clone);//复制到列表最后
                    var size = $(".banner .imgList li").size();//记录图片总数
    
                    /*自动轮播*/
    
                    var t = setInterval(function () { i++; move();},2000);
    
                    /*鼠标悬停事件*/
    
                    $(".banner").hover(function () {
                        clearInterval(t);//鼠标悬停时清除定时器
                    }, function () {
                        t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器
                    });
    
    
    
    
                    /*鼠标滑入原点事件*/
    
                    $(".banner .indexList li").hover(function () {
                        var index = $(this).index();//获取当前索引值
                        i = index;
                        $(".banner .imgList").stop().animate({ left: -index * 1366 }, 500);
                        $(this).addClass("onIndex").siblings().removeClass("onIndex");
                        $(".infoList").find("li").removeClass().eq(i).addClass("onInfo");
                    });
    
    
    
                    /*向左按钮*/
                    $(".prev").click(function () {
                        i--;
                        move();
                    })
    
                    
                    /*向右按钮*/
                    $(".next").click(function () {
                        i++;
                        move();
                    });
    
                    /*移动事件*/
                    function move() {
                        //情况1索引为5
                        if (i == size) {//当索引变为5,将left变为0,此时图片依旧未变,而之后把索引变为1,执行animate(),使得动画效果如同从第一张切换到第二张
                            $(".banner .imgList").css({ left: 0 });//无时间移动
                            i = 1;
                        }
                        //情况2索引为-1
                        if (i == -1) {
                            $(".banner .imgList").css({ left: -(size - 1) * 1366 });
                            i = size - 2;
                        }
                        $(".banner .imgList").stop().animate({ left: -i * 1366 }, 500);
    
                        if (i == size - 1) {//当索引指向的是复制的项,把突出显示转移到第一张图片
                            $(".banner .indexList li").eq(0).addClass("onIndex").siblings().removeClass();
                            $(".banner .infoList li").eq(0).addClass("onInfo").siblings().removeClass();
                        } else {
                            $(".banner .indexList li").eq(i).addClass("onIndex").siblings().removeClass();
                            $(".banner .infoList li").eq(i).addClass("onInfo").siblings().removeClass();
                        }
                    }               
    });

    html代码:

    <div class="wrapper">
                    <div class="banner">
                        <ul class="imgList">
                            <li><a href="#"><img src="img/2017届粤西全体大合照.png"/></a></li>
                            <li><a href="#"><img src="img/部门素拓合照.png"/></a></li>
                            <li><a href="#"><img src="img/班级合照3.png"/></a></li>
                            <li><a href="#"><img src="img/粤西动员大会.png"/></a></li>
                        </ul>
                        <ul class="infoList">
                            <li class="onInfo">就业工作学生协助会成功举办粤西专场招聘会</li>
                            <li >部门素拓合照</li>
                            <li >班级合照</li>
                            <li >粤西动员大会</li>
                        </ul>
                        <ul class="indexList">
                            <li class="onIndex"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="bg"></div>
                        <div class="instructor">
                            <img class="prev" src="img/左箭头.png" />
                            <img class="next" src="img/右箭头.png"/>
                        </div>    
                    </div>
                </div>

     下面是原生js实现图片轮播的功能:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                body,li,ul,img{
                    margin: 0;
                    padding:0;
                }
                ul{
                    list-style: none;
                }
                img{
                    width: 500px;
                    height: 350px;
                }
                .wrapper{
                    position: relative;
                    top: 130px;
                    left: 400px;
                    width: 500px;
                    height: 350px;
                    overflow:hidden;
                }
                .banner{
                    position: relative;
                    width: 3000px;
                    height: 350px;
                }
                .wrapper .banner .imgList{
                    position: absolute;
                }
                .wrapper .banner .imgList li{
                    float: left;
                }
            </style>
            
        </head>
        <body>
            <div class="wrapper">
                <div class="banner">
                    <ul class="imgList" title="2333" style="left: 0px;">
                        <li><a href="#"><img src="img/一轮面试.jpg" /></a></li>
                        <li><a href="#"><img src="img/三轮合照.jpg" /></a></li>
                        <li><a href="#"><img src="img/二轮面试.jpg" /></a></li>
                        <li><a href="#"><img src="img/第一次会议修改.jpg" /></a></li>
                        <li><a href="#"><img src="img/粤西3.png" /></a></li>
                    </ul>
                    
                </div>
            </div>
            <script type="text/javascript">
                var i=0;
                var e=document.getElementsByClassName("imgList")[0];
                var list=e.getElementsByTagName("li")[0];
                var clone=list.cloneNode(true);//注意,appendChild是用于移动元素的,不是用来复制拷贝元素的            
                e.appendChild(clone);
                var width=list.getElementsByTagName("img")[0].width;    //获取宽度
                var length=e.getElementsByTagName("li").length;         //获取总长度
                
                function transMove(value){
                    var left=parseInt(e.style.left);
                    if(left>value){
                        e.style.left=(left-10)+"px";
                        var repeat="transMove("+value+")";
                        var g=setTimeout(repeat,20);
                    }
                }
                var t=setInterval(function(){i++;move();},2000);
                function move(){
                    if(i==length){
                        e.style.left="0px";//直接给标签添加属性
                        i=1;
                    }
                    if(i==-1){
                        e.style.left='-1*(length-1)*width+"px"';
                        i=length-2;
                    }
                    //e.style.setProperty("left",-1*i*width+"px");
                    transMove(-1*i*width);
                }
            </script>
        </body>
    </html>
  • 相关阅读:
    hadoop环境搭建之分布式的建立3
    hadoop环境搭建之分布式的建立2
    hadoop环境搭建之分布式的建立1
    安装Centos虚拟机
    VMWare安装虚拟机
    VMware虚拟机的下载及安装
    启用并登陆Administrator账户后显示“无法登陆到你的账户”
    Windows PowerShell打不开,无法重装.net framework
    中国软件杯赛题分析
    每周总结(10)
  • 原文地址:https://www.cnblogs.com/runhua/p/6863893.html
Copyright © 2011-2022 走看看