web实现轮播图

最新推荐文章于 2024-05-20 11:56:24 发布

置顶 Revival_Liang

最新推荐文章于 2024-05-20 11:56:24 发布

阅读量6.9k

点赞数 8

分类专栏： web 文章标签： web轮播图前端实现轮播图 web前端轮播图 html轮播图网页轮播图

本文链接：https://blog.csdn.net/Revival_Liang/article/details/57409522

版权

web 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

html代码，图片请自行准备

<!DOCTYPE html>      
<html>      
    <head>      
        <meta charset="utf-8" />      
        <title></title>      
        <link rel="stylesheet" href="css/banner.css" />    
        <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>    
        <script src="js/banner.js" ></script>     
    </head>      
    <body style="text-align: center;">      
        <div class="box">      
            <ul>      
                <li>    
                    <a href="#">
                    	<img src="img/b.jpg"/>    
                    </a>    
                </li>      
                <li>    
                    <a href="#">
                    	<img src="img/b.jpg"/>    
                </a>    
                </li>      
                <li>    
                    <a href="#"><img src="img/b.jpg"/>    
                </a>    
                </li>      
            </ul>             
        </div>      
        <div>    
        </div>    
        <!--有些刚接触编程可能不知道，为什么要把js代码放着呢？因为在上面的html加载完之后，js里面的元素才不会为空，若放在html元素之前，    
            则在js执行的时候，会出现元素不存在的异常，因为html元素还没加载，程序的执行是从上往下执行的，这点不可不查。-->    
            <script type="text/javascript">  
            var bannerStyle = {selectedStyle:"selectedStyle",indicatorPosition:"left",dotStyle:"dotStyle",indicatorBoxStyle:"indicatorBoxStyle",buttonStyle:"bannerButtonStyle",showButton:true,automaticSwitch:false,buttonMargin:"30px",delay:500};	
           	banner($(".box"),bannerStyle);
        	</script>     
    </body>      
</html>

js代码：

//轮播图  
function banner(box,bannerStyle){    
var liWidth,buttonBox,indicator,leftButton,buttonHieght,rightButton,methodId,liNumber,boxWidth = box.width(),index = 0;       
//此处为重点    
var cloneObject = box.children("ul").children("li").first().clone();    
//此处为重点       
box.children("ul").append(cloneObject);
liNumber = box.children("ul").children("li").length;
box.css("width",boxWidth);
box.append("<div><button><</button><button>></button></div>");
box.append("<div></div>");
buttonBox = box.children("div").eq(0).addClass("buttonBoxStyle");
indicator = box.children("div").eq(1).addClass(bannerStyle.indicatorBoxStyle);
leftButton = buttonBox.find("button").eq(0).addClass(bannerStyle.buttonStyle).css("left",bannerStyle.buttonMargin);    
rightButton = buttonBox.find("button").eq(1).addClass(bannerStyle.buttonStyle).css("right",bannerStyle.buttonMargin);    
buttonHieght = leftButton.height();
buttonBox.css("margin-top",-buttonHieght/2);
box.children("ul").children("li").css("width",boxWidth);
box.children("ul").children("li").children("a").children("img").css("width",boxWidth);
box.css("height",box.children("ul").children("li").children("a").children("img").height());
buttonBox.css("width",boxWidth);
indicator.css("width",boxWidth);
liWidth = box.children("ul").children("li").width();
//添加指示器
for(var a = 0;a<liNumber-1;a++){    
    indicator.append("<span></span>");    
    indicator.find("span").eq(a).addClass(bannerStyle.dotStyle);    
    if(a == 0){    
    indicator.find("span").eq(0).addClass(bannerStyle.selectedStyle);    
    }    
    if(a == liNumber-2){    
        indicator.find("span").eq(a).css("margin-right","0px");    
    }    
    indicator.find("span").eq(a).click(function(){    
        index = $(this).index();    
        move();    
    });    
}    
if(bannerStyle.indicatorPosition=="left"){
	indicator.css("text-align","left");
	indicator.css("padding-left","10px");
}else if(bannerStyle.indicatorPosition=="right"){
	indicator.css("text-align","right");
	indicator.css("padding-right","10px");
}else{
	indicator.css("left","0px");
}
   leftButton.click(function(){    
    index--;    
    move();    
   });    
   rightButton.click(function(){    
    index++;    
    move();    
   });    
   function move(){    
    //滑动到最左再接着向左滑动的话便进入    
   if(index == -1){    
    index = liNumber-2;    
    box.children("ul").css("left",-(liNumber-1)*liWidth);    
   }    
   //滑动到最右再接着向左滑动的话便进入    
   if(index == liNumber){    
    box.children("ul").css("left","0px");    
        index = 1;    
   }    
    box.children("ul").stop().animate({left:-index*liWidth},bannerStyle.delay);    
    //设置指示器    
    if(index!=liNumber-1){    
        indicator.children().eq(index).addClass(bannerStyle.selectedStyle).siblings().removeClass(bannerStyle.selectedStyle);    
    }else{    
        indicator.children().eq(0).addClass(bannerStyle.selectedStyle).siblings().removeClass(bannerStyle.selectedStyle);    
    }    
   }    
    if(bannerStyle.showButton){
        buttonBox.css("visibility","visible"); 	
    }else{
    	buttonBox.css("visibility","hidden"); 	
    }
    if(bannerStyle.automaticSwitch)
   setTime();    
   function setTime(){       
   methodId=setInterval(function(){   
            index++;    
            move();    
        },2000);    
     }    
        box.hover(function(){    
            clearInterval(methodId);
            if(!bannerStyle.showButton)
            buttonBox.css("visibility","visible");    
        },    
        function(){      
			if(bannerStyle.automaticSwitch)
            setTime();  
            if(!bannerStyle.showButton)
            buttonBox.css("visibility","hidden");    
        });     
}

css代码：

div,ul,li{      
            margin: 0px;      
            padding: 0px;      
        }      
            .box{           
                overflow: hidden;    
                width: 100%; 
                height: auto;         
                display: inline-block;      
                position: relative;      
            }      
            .box>ul>li{      
                float: left;              
                position: relative;         
            }      
            .box>ul{           
                width: 99999px;          
                list-style: none;
                position: absolute;           
            }      
            /*按钮盒子风格*/
            .buttonBoxStyle{        
                top: 50%;      
                position: relative;      
                width: 100%;          
                z-index: 1;   
            }     
            /*buttonStyle*/ 
            .bannerButtonStyle{     
                border-radius: 50%;     
                color: white;         
                position: absolute;      
                font-size: 26px;      
                border-style: none;      
                width: 50px;      
                height: 50px;      
                background: rgba(0,0,0,0.4);      
            }        
            /*指示器盒子风格*/ 
            .indicatorBoxStyle{      
            	left: 0px;   
                bottom: 5px;      
                position: absolute; 
            }
            /*指示器圆点的基础风格*/     
            .dotStyle{    
                display: inline-block;    
                width: 8px;    
                height: 8px;    
                margin-right: 10px;    
                background: orangered;    
                border-radius: 50%;    
                border: 1px solid white;    
            } 
            /*选中圆点的颜色*/
            .selectedStyle{background: #333333;}

效果图：

（功能）

1，可以点击左右或点击圆点切换。

2，鼠标放上去停止滚动。