【特效】挺不错的一个轮播图

最新推荐文章于 2024-07-12 18:27:51 发布

邹大叔

最新推荐文章于 2024-07-12 18:27:51 发布

阅读量1.3k

点赞数

分类专栏： HTML 文章标签： html 插件

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这里写图片描述

使用前必看：图片换成自己的，样式调成自己喜欢的也可以，一般的项目够用了，如果图片有点多推荐使用插件 swiper

第一种：Bootstrap 无缝轮播版（超级简单版）

特点：无缝轮播、鼠标移入图片暂停

注意：每张图片的宽高要求一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-无缝轮播</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- 白色圆圈 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!-- 图片和标题 -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/1.jpg">
                <!--标题不要可省略-->
                <div class="carousel-caption">标题1</div>
            </div>
            <div class="item">
                <img src="img/2.jpg">
                <!--标题不要可省略-->
                <div class="carousel-caption">标题2</div>
            </div>
            <div class="item">
                <img src="img/3.jpg">
                <!--标题不要可省略-->
                <div class="carousel-caption">标题3</div>
            </div>
            <div class="item">
                <img src="img/4.jpg">
                <!--标题不要可省略-->
                <div class="carousel-caption">标题4</div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

第二种：比较实用的jQuery 有缝轮播版

特点：有缝轮播、鼠标移入图片不暂停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*通用样式*/
        html,body{
            font: 12px 'microsoft yahei',arial,'SimSun',Tabhoma;
            text-align: left;
        }
        html,body,h1,h2,h3,h4,h5,h6,
        div,p,dl,dt,dd,ol,ul,li,
        table,th,td,tr,caption,
        a,img,span,strong,var,em,small,
        i,sub,sup,form,input,textarea,
        select,option,iframe,pre{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        img{
            border: 0;
        }
        input,select,textarea{
            outline:0;
        }
        textarea{
            resize:none;
            overflow: auto;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,strong,var,em,i,small{
            font-weight: normal;
            font-style: normal;
        }
        a{
            text-decoration: none;
        }
        /*公共样式*/
        .roll,#out,#out2,.con img{
            width:870px;
            height:255px;
        }
        .roll{
            position: relative;
            margin:20px auto 0;
        }
        #out,#out2,.con,.nav{
            overflow:hidden;
        }
        /*其它样式*/
        .con{
            width: 8000px;
            height: 255px;
        }
        .con img{
            float: left;
        }
        .nav{
            position: absolute;
            bottom: 5px;
            left: 45%;
        }
        .nav li{
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #B9D4C8;
            margin: 0 5px;
            float: left;
            cursor: pointer;
        }
        .left,.right{
            position: absolute;
            top:120px;
            left:0;
            width: 30px;
            height: 40px;
            font-size: 30px;
            text-align: center;
            line-height: 40px;
            color:#fff;
            background: #000;
            cursor: pointer;
            opacity:0.5;
            display: none;
        }
        .right{
            position: absolute;
            top:120px;
            left:840px;
        }
        #out:hover .left,#out:hover .right{
            display: block;
        }
        .nav .select{
            background: #5CB85C;
        }
    </style>
</head>
<body>
    <!-- 最外层包裹元素，用来控制整个大图的位置以及作为子元素定位的参考 -->
    <div class="roll">
        <div id="out">
            <!-- 包裹图片，宽要比所有图片的总宽大， -->
            <div class="con">
                <!--<img src="img/4.jpg"/>-->
                <img src="img/1.jpg"/>
                <img src="img/2.jpg"/>
                <img src="img/4.jpg"/>
                <img src="img/4.jpg"/>
                <!--<img src="img/1.jpg"/>-->
            </div>
            <!-- 放page小圆点 定位控制 z-index比图片大-->
            <ul class="nav">
                <li class="select"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 左右键 定位控制 z-index比图片大-->
            <p class="left"><</p>
            <p class="right">></p>
        </div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $.fn.extend({
            datu:function(){ //封装大图滚动函数
                var obj=$(this); //先获取这个对象
                var fir=obj.find('.con img:first').clone(); //克隆第一张图
                var las=obj.find('.con img:last').clone(); //克隆最后一张图
                obj.find('.con').append(fir); //最后面插入克隆的第一张图
                obj.find('.con').prepend(las); //最前面插入克隆的最后一张图
                var imgw=Math.floor(obj.find('.con img').width()); //获取一张图的宽度
                var out=obj.find('#out'); //获取元素目标
                out.scrollLeft(imgw); //初始化到起点
                var x=1,y=0; //图多一步故为1(相比page,中间底部的小圆点)
                var time1=null; //声明变量
                var img=obj.find('.con img'),li=obj.find('.nav li'); //一次性获取元素，优化性能
                var left=obj.find('.left'),right=obj.find('.right'); //一次性获取元素，优化性能
                function huan(){  //换一张图函数
                    clearInterval(time1); //先清除计时器
                    time1=setInterval(function(){
                        x++;
                        if(x==img.length){
                            x=2;//跳到第二张
                            out.scrollLeft(imgw);//滚动条归零
                        }
                        y++;
                        if(y==li.length){//小圆点走自己的一套
                            y=0;
                        }
                        bian(); //执行滚动函数
                    },8000) //控制大图滚动的时间节奏
                }
                function bian(){ //一张图走完的过程函数
                    li.eq(y).addClass('select').siblings().removeClass('select'); //小圆点走自己的一套
                    out.animate({scrollLeft:imgw*x}); //jq的动画控制滚动条，这里是x而不是x-1，是因为：
                    //  0 ——> 1,1 ——> 2,2 ——> 3 的顺序，在前一次的基础上再走
                    //  这里用animate动画就可以自己添加其他效果了
                }
                left.click(function(){ //左点击
                    clearInterval(time1); //先清除计时器
                    x--;
                    if(x<0){
                        x=img.length-3;//length减去本身比x（从0开始）多的1，再减去新增的最后的那张1，再减去要跳到倒数第二张产生的1，共为3
                        out.scrollLeft(imgw*(x+1),10);//滚动条加1是因为（出现第x张，还要注意插入到最前面的那一张x=5，则滚的是6张图的距离）
                    }
                    y--;
                    if(y<0){
                        y=li.length-1;// y一直减到最左边时，再点击再减就要跳到最右边 0 1 2 3  length为4，下标为3，故 li.length-1;
                    }
                    bian() //一张图走完的过程函数
                    huan() //换一张图函数
                })
                right.click(function(){ //右点击
                    clearInterval(time1); //先清除计时器
                    x++;
                    if(x==img.length){
                        x=2;
                        out.scrollLeft(imgw);
                    }
                    y++;
                    if(y==li.length){
                        y=0;
                    }
                    bian() //一张图走完的过程函数
                    huan() //换一张图函数
                })
                li.click(function(){ //page小圆点onmouseover事件
                    clearInterval(time1); //先清除计时器
                    y=$(this).index(); //y管y的
                    x=y+1; //y为1时，看到的是第一张图，实际上前面还有一张图 ——>此时 x=y+1=1+1=2，
                    bian() //一张图走完的过程函数
                    huan() //换一张图函数
                })
                huan(); //自动执行，进页面就开始滚
            }
        })

        $(function(){
            $('.roll').datu(); //封装完毕 使用时只更换roll 标签即可 $('.roll2').datu();
        })
        // 样式自己调成想要的，其他复制即可。
    </script>
</body>
</html>

第三种：底部有缝轮播（适用于小图片循环轮播）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-无缝轮播</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;
            height: 130px;
        }
        #div1 {
            width:1200px;
            height:130px;
            margin: 0 auto;
            position:relative;
            overflow:hidden;
        }
        #div1 ul {
            position:absolute;
            left:0;
            top:0;
        }
        #div1 ul li {
            float:left;
            list-style:none;
        }
        #a{
            width: 1200px;
            margin: 0 auto;
            margin-top:100px;
        }
        #a a{
            display: inline-block;
            width: 33.1%;
            text-decoration: none;
            padding: 5px;
            background: #d2620b;
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="a">
    <--javascript:void(0):代表a标签不做任何动作-->
    <a href="javascript:void(0)" id="id1"><</a>
    <a href="javascript:void(0)" id="id3">||</a>
    <a href="javascript:void(0)" id="id2">></a>
</div>

<div id="div1">
    <ul>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
    </ul>
</div>
    <script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            var oUl=document.getElementsByTagName("ul")[0];
            var oLi=document.getElementsByTagName("li");
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
            oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
            //移动速度
            var speed=2;
            //控制滚动的方向
            var a1=document.getElementById("id1");
            var a2=document.getElementById("id2");
            var a3=document.getElementById("id3");
            a1.onclick=function(){
                speed=2;
            }
            a2.onclick=function(){
                speed=-2;
            }
            a3.onclick=function(){
                speed=0;
            }
            //鼠标移开
            function  move(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left="0";
                }
                if(oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2+"px";
                }
                oUl.style.left=oUl.offsetLeft-speed+"px";
            }
            //定时器  控制移动的时间
            var timer=setInterval(move,30);
            //鼠标移入
            oDiv.onmouseover=function(){
                clearInterval(timer);
            }
            //鼠标移开
            oDiv.onmouseout=function(){
                timer=setInterval(move,30);
            }
        }
    </script>

</body>
</html>

第四种：jQuery+CSS 无缝轮播版—简单易懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bg{
            background: #fff;
        }
        ol,ul{
            list-style: none;
        }
        #play{
            width: 1200px;
            height:532px;
            position: relative;
            overflow: hidden;
            margin: 5% auto }
        #play #ul{
            position: absolute;
        }
        #play #ul li{
            float: left;
        }
        #play #ul li img{
            width: 1200px;
            height:532px;
        }
        #play #ol{
            width:100px;
            position: absolute;
            top:500px;left:550px;
        }
        #play #ol li{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            float: left;
            margin: 3px;
            border:1px solid #fff;
            cursor: pointer }
        #play #prev,#play #next{
            display:none;
            border:none;
            position: absolute;
            top:250px;
            width:30px;
            font-size: 40px;
            background:rgba(0,0,0,0.5);
            cursor: pointer }
        #play #prev{
            left:15px;
        }
        #play #next{
            right:15px;
        }
    </style>
</head>
<body>
    <div id="play">
        <ul id="ul">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
        </ul>
        <ol id="ol">
            <li class="bg"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <button id="prev"><</button>
        <button id="next">></button>
    </div>
<script src="js/jquery-1.11.3.js"></script>
<script>
    // 获取第一个图片 节点对象
    var firstImg = $('#ul li').first().clone();
    // 放在 ul 的最后
    $('#ul').append(firstImg).width($('#ul li').length*$('#ul img').width());
    var i = 0;
    var timer;
    autoPlay();
    // 下一张
    $('#next').click(function(){
        i++;
        moveImg(i);
    });
    // 上一张
    $('#prev').click(function(){
        i--;
        moveImg(i);
    });
    // 自动播放
    function autoPlay(){
        timer = setInterval(function(){
            i++;
            moveImg(i);
        }, 5000);
    }
    //操作图片
    function moveImg(num){
        // 如果是最后一张图片我们怎么办
        if(i==$('#ul li').length){
            i = 1;
            $('#ul').css({left:0});
        }
        // 是第一张
        if(i==-1){
            i=$('#ul li').length-2;
            $('#ul').css({left:($('#ul li').length-1)*-800});
        }
        // 移动图片
        $('#ul').stop().animate({left:i*-1200},400);
        // 换小点的标记
        if(i==($('#ul li').length-1)){
            $('#ol li').eq(0).addClass('bg').siblings().removeClass('bg');
        }else{
            $('#ol li').eq(i).addClass('bg').siblings().removeClass('bg');
        }
    }
    //鼠标移入图片显示左右按钮 反之
    $('#play').mouseover(function(){
        $('#prev').show();
        $('#next').show();
        clearInterval(timer);
    }).mouseout(function(){
        $('#prev').hide();
        $('#next').hide();
        autoPlay();
    });
    // 点击小图标 跳转到指定的页面
    $('#ol li').click(function(){
        i = $(this).index();
        moveImg(i);
    });
</script>
</body>
</html>