码迷,mamicode.com
首页 > Web开发 > 详细

CSS/HTML/JS实现图片轮播

时间:2017-08-16 17:32:32      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:css   href   title   设置   pretty   默认   lis   otto   ram   

实现原理

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

注:需要导入jquery库

html代码

<div class="banner">
    <img src="1.png">
    <ul>
        <li><a href="1.png">1</a></li>
        <li><a href="2.png">2</a></li>
        <li><a href="3.png">3</a></li>
        <li><a href="4.png">4</a></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();
});

CSS/HTML/JS实现图片轮播

标签:css   href   title   设置   pretty   默认   lis   otto   ram   

原文地址:http://www.cnblogs.com/ikei/p/7373683.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!