您的位置：首页 > 其它

如何快速写出漂亮的轮播图、幻灯片？

2016-11-24 19:16 501 查看 
JS实现-----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
/*轮播图*/
.banner{
overflow: hidden;
width: 1100px;
}
.banner>ul>li>img{
width: 100%;
}
.banner>ul{
list-style: none;
width: 50000px;
}
.banner ul li{
float: left;
}
</style>

</head>
<body>
<div class="banner">
<ul>
<li><img src="images/banner01.jpg" alt=""/></li>
<li><img src="images/banner02.jpg" alt=""/></li>
<li><img src="images/banner03.jpg" alt=""/></li>
<li><img src="images/banner04.jpg" alt=""/></li>
<li><img src="images/banner05.jpg" alt=""/></li>
</ul>

</div>

<script src="jquery.js"></script>
<script>
//首页轮播图
function auto(){
var width = $('.banner ul li img').css('width');
$('.banner ul').animate({
'margin-left':'-'+width
},750 , function(e){
$('.banner ul').css({
'margin-left':'-'+0
}).children('li').last().after($('.banner ul li').first());
});
}
setInterval(auto , 2000);
</script>
</body>
</html>
----------------------------------------------------------------------------
纯CSS实现幻灯片：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>.myDiv {width: 1100px;height: 500px;margin: 20px auto;background-size: over;background-position: center;-webkit-animation-name: loop;-webkit-animation-duration: 20s;-webkit-animation-iteration-count: infinite;}@-webkit-keyframes loop{0% {background: url(images/banner01.jpg) no-repeat;}25% {background: url(images/banner02.jpg) no-repeat;}50% {background: url(images/banner03.jpg) no-repeat;}75% {background: url(images/banner04.jpg) no-repeat;}100% {background: url(images/banner05.jpg) no-repeat;}}</style></head><body><div class="myDiv"></div></body></html>
都不喜欢？？
插件可以不？？？
http://pan.baidu.com/s/1bpwwNBh

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航