本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

html5+jquery 用极少的代码打造漂亮的网站banner幻灯片效果

网站中,一个优美的banner效果会让你的网站加分不少,很多才开始使用jquery的朋友可能觉得有一定难度,去网上找demo,发现要么太丑,要么代码量惊人,而且容易冲突,没关系,今天我正好用到,动手写了一个,我们这里用极少代码给你打造一个漂亮的banner效果:

我们先来看一下效果图

屏幕快照 2017-01-19 上午10

怎么样?如果觉得不太喜欢这样的样式,你还可以在css里修改一下,好了,直接贴代码:


<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一沙网络</title>
<script type="text/javascript" src="http://blog.earnp.com/js/jquery.min.js"></script>
<style>
body,div,ul,ol,p,img{
margin:0px;
padding:0px;
list-style: none;
}
.container{
width: 100%;
height: 300px;
float: left;
background-color: #FFFFFF;
}
.container li{
width: 100%;
height: 300px;
float: left;
}
.container img{
width: 100%;
height: 300px;
float: left;
}
.container li.disimg{
display: none;
}
.navigation{
position:relative;
top:-50px;
height: 30px;
padding-top: 10px;
padding-bottom: 10px;
display:inline-block;
width: 100%;
float: left;
text-align: center;
}
.navigation ul{
margin:0 auto;
width:150px;
}
.navigation li{
width:30px;
height:30px;
line-height:30px;
text-align:center;
color: #E6E6E6;
background-color: #666666;
border-radius: 50%;
float: left;
margin-right: 5px;
}
.navigation li.active{
background:#f60;
}
.btnLeft{
display:inline-block;
text-align:center;
width:45px;
height:60px;
line-height:60px;
position:absolute;
top:120px;
left:0px;
cursor:pointer;
background:#666666;
opacity: 0.9;
margin-left:5%; 
background-image: url(http://weixin.cuidanxia.com/images/fanhui.png);
background-position: center;
background-repeat: no-repeat;
background-size: 17px 27px;
}
.btnRight{
display:inline-block;
text-align:center;
width:45px;
height:60px;
line-height:60px;
position:absolute;
top:120px;
right:0px;
cursor:pointer;
background:#666666;
opacity: 0.9;
margin-right:5%; 
background-image: url(http://weixin.cuidanxia.com/images/fanhui.png);
background-position: center;
background-repeat: no-repeat;
background-size: 17px 27px;
transform: rotate(180deg);
}
</style>
<script>
$(function()
{
   $('.navigation>ul>li').eq(0).addClass('active');
   $('.navigation>ul>li').each(function()
   {
    var index=$(this).index();
  $(this).hover(function()
  {
    $(this).addClass('active').siblings().removeClass('active');
  $('.container>li').eq(index).stop(true).show().siblings().stop(true).hide();
   })
    });
var count=0;
var len=$(".container>li").length;
//左边点击按钮
$(".btnLeft").click(function(){
        if(count==0)
        {
count=len-1;
}else{
count--;
}
$('.navigation>ul>li').eq(count).addClass('active').siblings().removeClass('active');
$('.container>li').eq(count).stop(true).show().siblings().stop(true).hide();
})
//右边点击按钮
$(".btnRight").click(function()
{
if(count==len-1){
   count=0;
}else{
   count++;
}
$('.navigation>ul>li').eq(count).addClass('active').siblings().removeClass('active');
$('.container>li').eq(count).stop(true).show().siblings().stop(true).hide();
});
// 自动播放功能
var timer=null;
function aut()
{
    $(".btnRight").trigger("click");  
  }
timer=setInterval(aut,3000);
});
</script>
</head>
<body>
<div class="container">
  <li>
  <img src="https://aecpm.alicdn.com/simba/img/TB1NGbfLpXXXXcOXpXXSutbFXXX.jpg" />
  </li>
  <li class="disimg">
  <img src="http://d6.yihaodianimg.com/N04/M00/9C/D7/ChEiBle248mAY5dnAAFJoDS0ss828600.jpg"/>
  </li>
  <li class="disimg">
  <img src="http://d7.yihaodianimg.com/N02/M07/A9/92/ChEiBFe2vnqASwcmAAF1gReJq4c39500.webp"/>
  </li>
</div>
<div class="navigation">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
 <a href="javascript:void(0)" class="btnLeft"></a>
 <a href="javascript:void(0)" class="btnRight"></a>
</body>
</html>

好了,到这里结束了,可能你觉得代码可能有点长,但是对于banner幻灯片来说,这也是极少的了。


转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/116
问题交流群 :562864481
0
打赏
发布时间 :2016-08-22 00:27:08
分享

0 个评论

    还没有评论,感觉来抢沙发吧!

要回复文章请先登录注册