轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

项目源代码下载地址：轮播图

以下为项目实现效果：（由于gif太大，所以只上传一张图片，但效果完全能实现，经测试，在ie各版本浏览器及chrome，firefox等浏览器中均能实现效果，可以实现点击切换图片，无缝滚动和非无缝滚动两种效果）

页面源代码：index.html(以下注释自行切换，为了项目清晰，所以用了四个js文件，分别实现不同的效果)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>轮播图</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

<div class="slider">

    <div class="slider-inner" id="slider_inner">

        <button class="btn-left" id="btn_left">&lt;</button>

        <button class="btn-right" id="btn_right">&gt;</button>

    </div>

</div>

<script src="js/jquery-1.12.4.js"></script>

<script src="js/jquery1.js"></script>

<!--<script src="js/jquery2.js"></script>-->

<!--<script src="js/js1.js"></script>-->

<!--<script src="js/js2.js"></script>-->

</body>

</html>

index.css（以下为项目css文件，解决了ie低版本浏览器的兼容问题，不然的话会出现一些问题）

/**

*Created by xxc on 2019/4/28

*/

*{

    margin:;

    padding:;

}

a{

    display: block;

}

li{

    list-style: none;

    vertical-align: middle;

}

img{

    display: block;//兼容ie

    border-width:;//兼容ie

}

.slider{

    width: 730px;

    height: 454px;

    margin: 20px auto;

    border: 1px solid #ccc;

    padding: 5px;

}

.slider .slider-inner{

    width: 100%;

    height: 100%;

    overflow: hidden;

    position: relative;

}

.slider .slider-inner ul{

    width: 800%;

    position: absolute;

    left:;

    top:;

}

.slider .slider-inner ul li{

    float: left;

    display: block;

}

.slider .slider-indicator{

    position: absolute;

    right: 50px;

    bottom: 20px;

    z-index:;

}

.slider .slider-indicator i{

    display: inline-block;

    width: 20px;

    height: 20px;

    text-align: center;

    line-height: 20px;

    background-color: #fff;

    cursor: pointer;

    font-style: normal;

    margin-left: 5px;

}

.slider .slider-indicator i.current,

.slider .slider-indicator i:hover{

    background-color: orange;

}

.slider .slider-inner button{

    width: 20px;

    height: 40px;

    background-color: #aeb5ad;

    background-color: rgba(0,0,0,.3);

    position: absolute;

    top: 50%;

    margin-top: -20px;

    z-index:;

    border: none;

    outline: none;

    color: #fff;

    cursor: pointer;

}

.slider .slider-inner button.btn-right{

    right:;

}

以下为js的四种实现方法：

js1.js代码：

/**

 *Created by xxc on 2019/4/28

 */

var images = [

    "images/1.jpg",

    "images/2.jpg",

    "images/3.jpg",

    "images/4.jpg",

    "images/5.jpg",

    "images/6.jpg"]

function $(id) {

    return document.getElementById(id);

}

function getFirstElementByParent(parent) {

    if(parent.firstElementChild){

        return parent.firstElementChild;

    }else{

        var ele=parent.firstChild;

        while (ele&&ele.nodeType!==1){

            ele=ele.nextSibling;

        }

        return ele;

    }

}

window.onload = function () {

    function slider(images,speed,imgWidth) {

        var ul = document.createElement('ul');

        ul.setAttribute('id','slider_list');

        for(var j = 0;j<images.length;j++){

            var li = document.createElement('li');

            var a = document.createElement('a');

            var img = document.createElement('img');

            img.setAttribute('src',images[j]);

            a.appendChild(img);

            li.appendChild(a);

            ul.appendChild(li);

        }

        $("slider_inner").appendChild(ul);

        var div = document.createElement('div');

        div.setAttribute('class','slider-indicator');

        div.setAttribute('id','slider_indicator');

        for(var j = 0;j<images.length;j++){

            var i = document.createElement('i');

            i.innerHTML = j+1;

            div.appendChild(i);

        }

        getFirstElementByParent(div).setAttribute('class','current');

        $("slider_inner").appendChild(div);

        var isquares = $("slider_indicator").getElementsByTagName("i");

        var timer=null,i=0;

        function animate(){

            i--;

            if(i<-(images.length-1)){

                i=0;

            }

            $("slider_list").style.left = i*imgWidth+"px";

            for(var j = 0;j<isquares.length;j++){

                isquares[j].removeAttribute('class','');

            }

            isquares[-i].setAttribute('class','current');

        }

        timer = setInterval(animate,speed);

        for(var k = 0;k<isquares.length;k++){

            isquares[k].index = k+1;

            isquares[k].onmouseover = function () {

                clearInterval(timer);

                for(var j = 0;j<isquares.length;j++){

                    isquares[j].removeAttribute('class','');

                }

                this.setAttribute('class','current');

                i=-(this.index-1);

                $("slider_list").style.left = i*imgWidth+"px";

                timer = setInterval(animate,speed);

            }

        }

        $("btn_left").onclick = function () {

            i++;

            if(i>0){

                i=-(images.length-1);

            }

            for(var j = 0;j<isquares.length;j++){

                isquares[j].removeAttribute('class','');

            }

            isquares[-i].setAttribute('class','current');

            $("slider_list").style.left = i*imgWidth+"px";

        }

        $("btn_right").onclick = function () {

            i--;

            if(i<-(images.length-1)){

                i=0;

            }

            for(var j = 0;j<isquares.length;j++){

                isquares[j].removeAttribute('class','');

            }

            isquares[-i].setAttribute('class','current');

            $("slider_list").style.left = i*imgWidth+"px";

        }

        $("slider_inner").onmouseover = function () {

            clearInterval(timer);

        }

        $("slider_inner").onmouseout = function () {

            timer = setInterval(animate,speed);

        }

    }

    //images:图片数据

    //2000：轮播速度

    //730：图片宽度

    slider(images,2000,730);

}

js2.js代码：

/**

 *Created by xxc on 2019/4/28

 */

var images = [

    "images/1.jpg",

    "images/2.jpg",

    "images/3.jpg",

    "images/4.jpg",

    "images/5.jpg",

    "images/6.jpg"]

function $(id) {

    return document.getElementById(id);

}

function getFirstElementByParent(parent) {

    if(parent.firstElementChild){

        return parent.firstElementChild;

    }else{

        var ele=parent.firstChild;

        while (ele&&ele.nodeType!==1){

            ele=ele.nextSibling;

        }

        return ele;

    }

}

window.onload = function () {

    var length = images.length

    function animate(element,target) {

        var now = element.offsetLeft;

        var step = now > target ? -10 : 10;

        var timers = setInterval(function () {

            now += step;

            if(Math.abs(now-target)<=Math.abs(step)){

                clearInterval(timers);

                element.style.left = target+"px";

            }else {

                element.style.left = now+"px";

            }

        },10)

    }

    function slider(images,speed,imgWidth) {

        var ul = document.createElement('ul');

        ul.setAttribute('id','slider_list');

        for(var j = 0;j<length;j++){

            var li = document.createElement('li');

            var a = document.createElement('a');

            var img = document.createElement('img');

            img.setAttribute('src',images[j]);

            a.appendChild(img);

            li.appendChild(a);

            ul.appendChild(li);

        }

        ul.appendChild(getFirstElementByParent(ul).cloneNode(true));

        $("slider_inner").appendChild(ul);

        var div = document.createElement('div');

        div.setAttribute('class','slider-indicator');

        div.setAttribute('id','slider_indicator');

        for(var j = 0;j<images.length;j++){

            var i = document.createElement('i');

            i.innerHTML = j+1;

            div.appendChild(i);

        }

        getFirstElementByParent(div).setAttribute('class','current');

        $("slider_inner").appendChild(div);

        var isquares = $("slider_indicator").getElementsByTagName("i");

        var timer=null,i=0;

        function autoPlay(){

            if(i==-length){

                $("slider_list").style.left = 0;

                i=0;

            }

            i--;

            animate($("slider_list"),i*imgWidth);

            for(var j = 0;j<length;j++){

                isquares[j].removeAttribute('class','');

            }

            if(i==-length){

                isquares[0].setAttribute('class','current');

            }else {

                isquares[-i].setAttribute('class','current');

            }

        }

        timer = setInterval(autoPlay,speed);

        for(var k = 0;k<isquares.length;k++){

            isquares[k].index = k+1;

            isquares[k].onmouseover = function () {

                clearInterval(timer);

                for(var j = 0;j<isquares.length;j++){

                    isquares[j].removeAttribute('class','');

                }

                this.setAttribute('class','current');

                i=-(this.index-1);

                $("slider_list").style.left = i*imgWidth+"px";

                timer = setInterval(autoPlay,speed);

            }

        }

        $("btn_left").onclick = function () {

            clearInterval(timer);

            if(i==0){

                i=-length;

                $("slider_list").style.left = i*imgWidth+"px";

            }

            for(var j = 0;j<isquares.length;j++){

                isquares[j].removeAttribute('class','');

            }

            i++;

            isquares[-i].setAttribute('class','current');

            animate($("slider_list"),i*imgWidth)

        }

        $("btn_right").onclick = function () {

            clearInterval(timer);

            if(i==-length){

                i=0;

                $("slider_list").style.left = 0;

            }

            for(var j = 0;j<isquares.length;j++){

                isquares[j].removeAttribute('class','');

            }

            i--;

            if(i==-length){

                animate($("slider_list"),i*imgWidth)

                isquares[0].setAttribute('class','current');

            }else {

                isquares[-i].setAttribute('class','current');

                animate($("slider_list"),i*imgWidth)

            }

        }

        $("slider_inner").onmouseover = function () {

            clearInterval(timer);

        }

        $("slider_inner").onmouseout = function () {

            timer = setInterval(autoPlay,speed);

        }

    }

    //images:图片数据

    //2000：轮播速度

    //730：图片宽度

    slider(images,2000,730);

}

jquery1.js代码：

/**

 *Created by xxc on 2019/4/28

 */

var images = [

    "images/1.jpg",

    "images/2.jpg",

    "images/3.jpg",

    "images/4.jpg",

    "images/5.jpg",

    "images/6.jpg"];

$(function () {

    function animate(images,speed,imgWidth) {

        var length = images.length;

        $("#slider_inner").append("<ul id='slider_list'></ul><div id='slider_indicator' class='slider-indicator'></div>");

        for(var i = 0;i<images.length;i++){

            $("#slider_inner #slider_list").append("<li><a href='#'><img src='"+images[i]+"'></a></li>")

            $("#slider_indicator").append("<i>"+(i+1)+"</i>");

        }

        $("#slider_indicator i:eq(0)").addClass("current");

        var timer = null,k=0;

        function autoPlay(){

            k--;

            if(k<-(length-1)){

                k=0;

            }

            $("#slider_list").css('left',k*imgWidth+'px');

            $("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");

        }

        timer = setInterval(autoPlay,speed)

        $("#slider_indicator i").mouseover(function () {

            clearInterval(timer);

            var $this = $(this);

            $("#slider_list").css('left',-($this.index())*imgWidth+'px');

            k=-($this.index());

            $this.addClass("current").siblings().removeClass("current");

            timer = setInterval(autoPlay,speed)

        })

        $("#btn_left").click(function () {

            k++;

            if(k>0){

                k=-(length-1);

            }

            $("#slider_list").css('left',k*imgWidth+'px');

            $("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");

        })

        $("#btn_right").click(function () {

            k--;

            if(k<-(length-1)){

                k=0;

            }

            $("#slider_list").css('left',k*imgWidth+'px');

            $("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");

        })

        $("#slider_inner").mouseover(function () {

            clearInterval(timer);

        }).mouseout(function () {

            timer = setInterval(autoPlay,speed)

        })

    }

    animate(images,2000,730);

})

jquery2.js代码

/**

 *Created by xxc on 2019/4/28

 */

var images = [

    "images/1.jpg",

    "images/2.jpg",

    "images/3.jpg",

    "images/4.jpg",

    "images/5.jpg",

    "images/6.jpg"];

$(function () {

    function animates(images,speed,imgWidth) {

        var length = images.length;

        $("#slider_inner").append("<ul id='slider_list'></ul><div id='slider_indicator' class='slider-indicator'></div>");

        for(var i = 0;i<images.length;i++){

            $("#slider_inner #slider_list").append("<li><a href='#'><img src='"+images[i]+"'></a></li>")

            $("#slider_indicator").append("<i>"+(i+1)+"</i>");

        }

        $("#slider_indicator i:eq(0)").addClass("current");

        $("#slider_inner #slider_list").append("<li><a href='#'><img src='"+images[0]+"'></a></li>")

        var timer = null,k=0;

        function autoPlay(){

            k--;

            $("#slider_list").animate({'left':k*imgWidth+'px'},1000);

            if(k==-length){

                $("#slider_indicator i:eq(0)").addClass("current").siblings("i").removeClass("current");

                $("#slider_list").animate({'left':0},0);

                k=0

            }else {

                $("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");

            }

        }

        timer = setInterval(autoPlay,speed)

        $("#slider_inner").mouseover(function () {

            clearInterval(timer);

        }).mouseout(function () {

            timer = setInterval(autoPlay,speed)

        })

        $("#slider_indicator i").mouseover(function () {

            clearInterval(timer);

            var $this = $(this);

            $("#slider_list").css('left',-($this.index())*imgWidth+'px');

            k=-($this.index());

            $this.addClass("current").siblings().removeClass("current");

            timer = setInterval(autoPlay,speed);

        })

        $("#btn_left").click(function () {

            k++;

            if(k==1){

                $("#slider_list").animate({'left':-length*imgWidth+'px'},0);

                $("#slider_list").animate({'left':-(length-1)*imgWidth+'px'},1000);

                $("#slider_indicator i:eq("+(length-1)+")").addClass("current").siblings("i").removeClass("current");

                k=-(length-1);

            }else {

                $("#slider_list").animate({'left':k*imgWidth+'px'},1000);

                $("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");

            }

        })

        $("#btn_right").click(function () {

            k--;

                $("#slider_list").animate({'left':k*imgWidth+'px'},1000);

            if(k==-length){

                $("#slider_indicator i:eq(0)").addClass("current").siblings("i").removeClass("current");

                $("#slider_list").animate({'left':0},0);

                k=0

            }else {

                $("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");

            }

        })

    }

    animates(images,2000,730);

})

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器的更多相关文章

高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
轮播图原生js实现和jquery实现和js面向对象方式实现
原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
无限循环轮播图之JS部分（原生JS）
JS逻辑与框架调用, <script type="text/javascript"> var oBox = document.getElementById('box') ...
jquery里面的attr和css来设置轮播图竟然效果不一致
/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...
原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

随机推荐

android检测手机是否安装某个app
public static boolean isAvilible(Context context, String packageName){ //获取packagemanager final Pack ...
Matlab作图
修改线宽 plot(x,y,'LineWidth',1.5) 在xlabel,ylabel,title中使用latex语言 xlabel('$x$','interpreter','latex') yl ...
Forward团队-爬虫豆瓣top250项目-需求分析
一. 需求:1.爬取豆瓣电影top250. 2.获取电影名称,排名,分数,简介,导演,演员. 3.将爬取到的数据保存,以便随时查看. 3.可以将获取到的数据展示给用户. 二. 参考: 豆瓣api参考资 ...
java基础-day10
第10天 IO 今日内容介绍 u IO流概述及FileWriter类使用 u FileReader类使用 u 缓冲流介绍和使用 u IO流相关案例第1章 IO流概述及FileWriter类使用 ...
sudo执行脚本找不到环境变量和命令
简介变量普通用户下,设置并export一个变量,然后利用sudo执行echo命令,能得到变量的值,但是如果把echo命令写入脚本,然后再sudo执行脚本,就找不到变量,未能获取到值,如题情况如下: ...
mysql_事务
事务是针对数据的,不是针对结构的存储引擎innodb支持事务,myisam不支持事务需求:有一张银行账户表,有A用户给B账户转账,A账户减少,B账户增加,但是A操作之后断电. 解决方案:A减少钱,但 ...
node-lessons
教程:https://github.com/alsotang/node-lessons 0 nvm 的全称是 Node Version Manager,之所以需要这个工具,是因为 Node.js 的各 ...
[leet code 4] Median of Two Sorted Arrays
1 题目 There are two sorted arrays A and B of size m and n respectively. Find the median of the two so ...
Win10家庭版无法远程桌面连接的解决方法
远程桌面连接服务器,是大家常用的一个桌面功能.在XP.Win7时代,大部分同学都是使用“盗版”操作系统,分分钟弄个“旗舰版”没有问题.可是,到了Win8.Win10时代,许多电脑都是预装的Window ...
[NewCoder 7] 用两个栈实现队列
题目描述用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 水题,直接上代码: class Solution { public: void push(int nod ...

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器的更多相关文章

随机推荐

热门专题