一个简单的图片轮播。。

最新推荐文章于 2022-04-27 22:39:06 发布

dream_hai

最新推荐文章于 2022-04-27 22:39:06 发布

阅读量485

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/dream_hai/article/details/64440552

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

  开始的时候使用js更换背景图片的方式实现，由于要支持ie8，ie8不能支持background-size。于是借助img标签来同一图片的大小。用相对定位来控制不同图片的展现。 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>青海省</title>
    <link rel="stylesheet" href="newe.css">
    <!--[if IE 8]>
    	<style>
		.nav-circle{
			 background: url("gray_yuan.png");
		}
		.nav-circle-active{
			background: url("white_yuan.png");
		}
		</style>
    <![endif]-->
</head>
<body>
<div class="main">
    <div  id ="back" >
        <div id="img-all">
            <div class="back-img">
                <img src="bei.jpg" alt="">
            </div>
            <div class="back-img">
                <img src="bei2.jpg" alt="">
            </div>
            <div class="back-img">
                <img src="bei3.jpg" alt="">
            </div>
        </div>
        <div id="top-nav" >
            <span class="nav-circle nav-circle-active" id="0"></span>
            <span class="nav-circle" id="1"></span>
            <span class="nav-circle" id="2"></span>
        </div>
    </div>
</div>
<script>
window.onload = function(){
    addEvent(document.getElementById("0"),"click",change_first);
    addEvent(document.getElementById("1"),"click",change_second);
    addEvent(document.getElementById("2"),"click",change_third);
    setInterval(function () {
        change();
    },5000);
};
function change_first(){
    var margin = parseInt(document.getElementById("img-all").style.left);
    if(isNaN(margin)){
        margin = 0;
    }
    if(margin == -1350){
        move_circle();
        move_img(margin,50,0);
    }else if(margin == -2700){
        move_img(margin,100,0);
    }
}
function change_second(){
    var margin = parseInt(document.getElementById("img-all").style.left);
    if(isNaN(margin)){
        margin = 0;
    }
    if(margin == 0){
        move_img(margin,-50,-1350);
    }else if(margin == -2700){
        move_circle();
        move_img(margin,50,-1350);
    }
}
function change_third(){
    var margin = parseInt(document.getElementById("img-all").style.left);
    if(isNaN(margin)){
        margin = 0;
    }
    if(margin == 0){
        move_circle();
        move_img(margin,-100,-2700);
    }else if(margin == -1350){
        move_img(margin,-50,-2700);
    }
}
function change(){
    var margin = parseInt(document.getElementById("img-all").style.left);
    if(isNaN(margin)){
        margin = 0;
    }
    if(margin == 0){
        move_img(margin,-50,-1350);
    }else if(margin == -1350){
        move_img(margin,-50,-2700);
    }else if(margin == -2700){
        move_img(margin,100,0);
    }
}
function move_img(margin,speed,end){        /*移动图片用  开始 速度 结束*/
    move_circle();
    var temp = setInterval(function(){
        margin += speed;
        document.getElementById("img-all").style.left = margin + "px";
        if(margin == end){
            clearInterval(temp);
        }
    },20);
}
function move_circle() {
    var nav = getClassNames("nav-circle","span");
    for(var i = 0; i < 3; i++){
        if(nav[i].className == 'nav-circle nav-circle-active'){
            nav[i].className = 'nav-circle';
            if(i == 2){
                i = 0;
                nav[i].className = 'nav-circle nav-circle-active';
                break;
            }else{
                nav[i+1].className = 'nav-circle nav-circle-active';
                break;
            }
        }
    }
}
function addEvent(obj,type,handle){
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}
function getClassNames(classStr,tagName){
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(classStr)
    }else {
        var nodes = document.getElementsByTagName(tagName),ret = [];
        for(var i = 0; i < nodes.length; i++) {
            if(hasClass(nodes[i],classStr)){
                ret.push(nodes[i])
            }
        }
        return ret;
    }
}
function hasClass(tagStr,classStr){
    var arr=tagStr.className.split(/\s+/ ); /* //这个正则表达式是因为class可以有多个,判断是否包含  */
    for (var i=0;i<arr.length;i++){
        if (arr[i]==classStr){
            return true ;
        }
    }
    return false ;
}
</script>
</body>
</html>
newe.css文件中的内容
html,body{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "MicroSoft YaHei";
}
img{
    border:none;/*ie9下被a标签包裹的img会有一个2像素宽的边框*/
}
.main{
    min-width: 1100px;
}
#back{
    width: 1350px;
    height: 330px;
    position: relative;
    overflow: hidden;
}
#img-all{
    width:4050px;
    height: 330px;
    position: absolute;
    left: 0;
}
.back-img{
    width:1350px;
    height:330px;
    background: white;
    float: left;
   right:100px;
}
.back-img img{
    width:1350px;
    height: 330px;
}
#top-nav{
    position: absolute;
    height: 30px;
    width: 100px;
    color: #fff;
    bottom: 5px;
    left:600px;
}
.nav-circle{
    display: inline-block;
    width: 16px;
    height:16px;
    border-radius: 8px;
    margin: 0 5px;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
}
.nav-circle-active{
    display: inline-block;
    width: 16px;
    height:16px;
    border-radius: 8px;
    margin: 0 5px;
    cursor: pointer;
    background: #fff;
}

css样式表优先级。。看在多次不如试一次

dream_hai

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的图片轮播。。

开始的时候使用js更换背景图片的方式实现，由于要支持ie8，ie8不能支持background-size。于是借助img标签来同一图片的大小。用相对定位来控制不同图片的展现。青海省 .nav-circle{ background: url("gray_yuan.png"); } .nav-circle-active{ backgroun
复制链接

扫一扫

专栏目录