轮播图采用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: 0;
    padding: 0;
}
a{
    display: block;
}
li{
    list-style: none;
    vertical-align: middle;
}
img{
    display: block;//兼容ie
    border-width: 0;//兼容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: 0;
    top: 0;
}
.slider .slider-inner ul li{
    float: left;
    display: block;
}
.slider .slider-indicator{
    position: absolute;
    right: 50px;
    bottom: 20px;
    z-index: 1001;
}
.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: 1;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
}
.slider .slider-inner button.btn-right{
    right: 0;
}

以下为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);
})

原文地址：https://www.cnblogs.com/alex-xxc/p/10793277.html

时间： 2024-10-02 17:07:34

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

轮播图左右箭头 jquery

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="view

类似轮播图的简单jQuery代码

代码和个人解析: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&

无限循环轮播图之JS部分（原生JS）

JS逻辑与框架调用 1 <script type="text/javascript"> 2 var oBox = document.getElementById('box'); 3 var oPrev = document.getElementById('prev'); 4 var oNext = document.getElementById('next'); 5 var oUl = oBox.children[0]; 6 var aLi = oUl.children;

jquery里面的attr和css来设置轮播图竟然效果不一致

/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document:this) // .querySelectorAll(selector); // return elems.length==0?null:elems.length==1?elems[0]:elems; // } /*广告图片数组*/ var imgs=[ {"i":0,"img&

jquery轮播图

咱们今天还是轮播图,今天说jquery的轮播图! 首先,要有个插件: 请无视Zepto插件,他没起到任何作用! 就是这两个啦! 然后就是代码! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js&q

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

无缝轮播图的例子

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/lunbo.css"/> </head> <body> <div id="

js实现图片轮播图（一）

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总

记一个好用的轮播图的FlexSlider

之前给自己公司的主页套用过一个js动态生成的轮播图,但是从载入的时机和载入后的效果都不太理想,又懒得去优化了,这次偶然遇到一个比较不错的轮播图的js插件,记录之. 首先它是给予jquery的,引进jquery和jquery.flexslider-min.js,然后定义div范围,在div内定义好要轮播的ul和li标签,然后设置flex参数渲染即可.不多说,上代码 <html> <body> <div class="flexslider"> <u