心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

js轮播图

发布时间：2022-06-27 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js轮播图，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

具体思路：

一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index二、添加定时器，每隔2秒钟index递增一次、调用一次切换图片函数提示:1、 index不能一直无限制的递增下去，需做判断2、调用切换图片函数时需将递增之后的index作为参数传过去三、定义图片切换函数提示:  1.遍历所有放数字索引的li，将每个li上的类去掉。  2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。  3. 根据传递过来的index值计算放图片的ul的top值  4. 改变index的值，让其等于传递过来的参数值注意：放图片的ul的top值=-index*单张图片的高度（所有图片必须等高）四、鼠标划过整个容器时，图片停止切换，离开继续提示:1.  鼠标滑过整个容器时清除定时器2.  鼠标离开时继续执行定时器，切换至下一张图片五、遍历所有放数字的li，且给他们添加索引、鼠标滑过时切换至对应的图片。        鼠标滑过时调用图片切换函数，将滑过的li的索引传过去。

假设初始的情况，下图一个网格代表一个图，初始时，显示1 ：

js轮播图

 

当进行一次轮播后，显示变为下图 显示2：

 

举例

var wrap=document.getElementById("wrap2");
    var inner=document.getElementById("inner");
    var spanList=document.getElementById("paganation").getElementsByTagName("span");
    var left=document.getElementById("left");
    var right=document.getElementById("right");
 
    var clickFlag=true;
    var time
    var index=0;
    var Distance=wrap.offsetWidth;
 
    function AutoGo(){
        var start=inner.offsetLeft;
        var end=index*Distance*(-1);
        var change=end-start;
        var timer;
        var t=0;
        var maxT=30;
        clear();
        if(index==spanList.length){
            spanList[0].className="selected";
        }else{
            spanList[index].className="selected";
        }
        clearInterval(timer);
        timer=setInterval(function(){
            t++;
            if(t>=maxT){
                clearInterval(timer);
                clickFlag=true;
            }
            inner.style.left=change/maxT*t+start+"px";
            if(index==spanList.length&&t>=maxT){
                inner.style.left=0;
                index=0;
            }
        },17);
    }
    function forward(){
        index++;
        if(index>spanList.length){
            index=0;
        }
        AutoGo();
    }
    function backward(){
        index--;
        if(index<0){
            index=spanList.length-1;
            inner.style.left=(index+1)*Distance*(-1)+"px";
        }
        AutoGo();
    }
 
    time=setInterval(forward,3000);
 
    wrap.onmouseover=function(){
        clearInterval(time);
    }
    wrap.onmouseout=function(){
        time=setInterval(forward,3000);
    }
    for(var i=0;i<spanList.length;i++){
        spanList[i].onclick=function(){
            index=this.innerText-1;
            AutoGo();
        }
    }
    left.onclick=function(){
        if(clickFlag){
            backward();
        }
        clickFlag=false;
    }
 
    right.onclick=function(){
        if(clickFlag){
            forward();
        }
        clickFlag=false;
    }
    function clear(){
        for(var i=0;i<spanList.length;i++){
            spanList[i].className="";
        }
    }

脚本宝典总结

以上是脚本宝典为你收集整理的js轮播图全部内容，希望文章能够帮你解决js轮播图所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程