css和js实现最简单的轮播图效果

css和js实现最简单的轮播图效果

之前见网上的轮播图太复杂了，所以我来写一个最简单的,实现的灵感来自于《JavaScript DOM编程艺术》一书。

---

目录

实现原理

将点击的a标签的href属性值赋给img标签的src属性，这样有个好处，就是如果浏览器不支持js的话，点击a标签也可跳转到图片地址看到图片，不会影响内容的呈现

注：需要导入jquery库

效果图

---

html代码

<div class="banner">
    <img src="1.png">
    <ul>
        <li><a href="1.png">1a>li>
        <li><a href="2.png">2a>li>
        <li><a href="3.png">3a>li>
        <li><a href="4.png">4a>li>
    ul>
div>

css代码

/* 先取消默认样式 */
a { text-decoration: none; }
ul { list-style-type: none; }
ul, li {
    padding: 0;
    margin: 0;
}
.banner li {
    float: left;
}
.banner img {
    width: 600px;
    height: 400px;
}
/* relative和absolute用于控制切换按钮位置 */
.banner {
    position: relative;
    width: 600px;
    height: 400px;
    margin: auto;
}
.banner ul {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.banner ul li {margin-left: 5px;}
.banner ul li a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #8c8c8c;
    text-align: center;
    border-radius: 50%; /* 让按钮变圆形 */
    color: #FFF
}

js代码

导入jquery库

<script src="jquery.js">script>

$(document).ready(function(){  // 在一开始绑定a的点击切换轮播图事件
    $(".banner>ul>li>a").click(function(){
       banner(this);
       return false;
    });
    bannerRoll();
});
// 用a标签按钮切换轮播图
function banner(obj) {  // obj 当前标签
    var img = $(obj).parent().parent().prev();
    $(img).attr("src", $(obj).attr("href"));
}
var t;  // 用于标识定时器
function bannerRoll() {
    t = setInterval(showPic, 3000);     // 设置每三秒调用换图函数换张图
}
var x = 0;  // 全局变量，记录当前第几张轮播图
function showPic() {
    // 获取a父标签li的个数，轮流播放
    var arr_uls = $(".banner>ul");
    arr_uls.each(function() {   // 遍历ul标签，给它的img换张图
        if (x >= $(this).children().length) x = 0;
        $(this).prev("img").attr("src", arr_uls.children("li").eq(x).children("a").attr("href"));
    });
    x++;
}
//鼠标经过盒子时，清除定时
$(".banner").mouseenter( function(){
        clearInterval(t);
}).mouseleave( function(){
    //鼠标离开盒子时，再次定时
    bannerRoll();
});

---

2017-4-17 更新： 添加鼠标移入停止轮播功能

---

源码下载

• 下载地址

往期博客地址

• css + jQuery实现最简单标签页

• 博客地址