原生JS响应式无限循环轮播图(原创)

所属分类:媒体-幻灯片和轮播图

 33304  290  查看评论 (30)
分享到微信朋友圈
X
原生JS响应式无限循环轮播图(原创) ie兼容10

发布时间:2018-12-13 23:06

使用方法

head里面加入这些文件调用js和css,路径根据实际情况自行修改

<link rel="stylesheet" href="css/style.css" />
<script src="js/slide.js"></script>

html

<div id="slide" >
    <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>
    </ul>
    <div>
        <span > < </span>
        <span > > </span>
    </div>
</div>

这里是html部分的格式理论上放多个图都行,放多了记得去修改一下UL的起始百分比宽度预设是1000%,左右导航如果不喜欢可以改css或者直接换成图片。

导入之后运行函数加容器ID的为参数就可以调用了

slideLlx("slide");//参数为字符串是外层容器的id,可以多次调用

css样式部分注意不要有命名冲突

有什么问题或者需求的可以留言,码字真累┭┮╊┭┮

相关插件-幻灯片和轮播图

jQuery自适应滑块轮播图插件zpSlide

zpSlide滑块集轮播图幻灯片,滑块集轮播图个数可自定义,并完全自适应于手机端、ipad、电脑端
  幻灯片和轮播图
 23879  224

图片标题轮播

幻灯片插件,它非常小巧,压缩后仅 1.34KB,功能也不算丰富,圆点控制、自动播放。
  幻灯片和轮播图
 29038  347

js垂直轮播广告幻灯片

js垂直轮播广告幻灯片
  幻灯片和轮播图
 30591  315

带缩略图的图片点击切换

jCarousel带缩略图的图片点击切换插件
  幻灯片和轮播图
 27561  293

讨论这个项目(30)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    如风 0
    2019/10/10 17:50:06
    星梦无痕 0
    2019/8/3 9:07:11
    收藏了,谢分享 回复
    0
    2019/7/16 9:20:34
    可以改成数字吗
        如风0
        2019/10/10 17:48:20
        应该可以的
    回复
    我叫八九 0
    2019/7/9 15:10:37
    鼠?与你 0
    2019/6/19 12:02:15
    空白式 0
    2019/3/29 15:26:45
    能不能分享一个兼容ie8的.....
        What0
        2019/4/23 16:06:30
        微软都要放弃ie了,还是换浏览器吧
    回复
    看未来 0
    2019/3/27 16:09:24
    这个挺好看的
        楠畅0
        2019/4/29 11:17:57
        好看不会做啊
    回复
    莫莫莫 0
    2019/3/15 17:14:52
    好的 优秀了
        0
        2019/3/25 14:53:16
        优秀
    回复
    琉璃 0
    2019/3/1 22:35:31
    <!DOCTYPE html>
    <lang html="en">
    
        <head>
            <title>视频练习</title>
    
            <head>
                <style>
                    #contain{
                    width:1325px;
                    height:1000px;
                    background-color:#CCCCCC;
                    }
                    #slider{
                    width:600px;
                    height:400px;}
                </style>
                <link rel="stylesheet" href="css/style.css">
    
            </head>
    
            <body>
                <div id="contain">
                    <div id="slider">
                        <ul>
                            <li><img src="text1.jpg"></li>
                            <li><img src="text2.jpg"></li>
                            <li><img src="text3.jpg"></li>
                            <li><img src="text4.jpg"></li>
                        </ul>
                        <div>
                            <span> < </span>
                            <span> > </span>
                        </div>
                    </div>
                    <script>
                        slideLlx("slider");
                    </script>
                </div>
            </body>
    
            </html>

    请问有什么问题

        西瓜0
        2019/3/1 23:06:49

        没有引用

        <script src="js/slide.js"></script>
        琉璃0
        2019/3/2 12:26:44

        发错了,已经加上了

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

        还是不行、

        西瓜0
        2019/3/2 12:58:05

        要调用相应的样式class="slide",class="prev_btn",class="next_btn"

        <div id="contain">
            <div id="slide" class="slide">
                <ul>
                    <li><img src="img/1.png"></li>
                    <li><img src="img/2.png"></li>
                    <li><img src="img/3.png"></li>
                    <li><img src="img/4.png"></li>
                </ul>
                <div> <span class="prev_btn"> < </span>
                    <span class="next_btn"> > </span></div>
            </div>
        
        </div>
        琉璃0
        2019/3/2 22:53:22
        谢谢西瓜这位老哥,已经可以了,好人一生平安.
    回复
    琉璃 0
    2019/3/1 22:24:44
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复