图片轮播淡入淡出_网站前端开发_前端开发者

网站前端开发_前端开发者web前端

https://www.rokub.com

 

[code]<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>轮播图</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<link href=”” rel=”stylesheet”>
<script src=”jquery.js” type=”text/javascript”></script>
<style type=”text/css”>
*{margin:0;padding:0;list-style: none} img{border:0;}.clear{clear:both;}

.flex{width:1200px;height:400px;margin:50px auto;position: relative;overflow: hidden;cursor: pointer;}
.flex ul.slider{height:400px;position: absolute;}
.flex ul.slider li{width:1200px;height:400px;float:left;}
.flex ul.slider li img{width:1200px;}

.btn{position: relative;left:0;top:45%;cursor: pointer;display: none;}
.btn .prev{width:50px;height:50px;background: url(images/prev.png);position:absolute;left:10px;}
.btn .next{width:50px;height:50px;background: url(images/next.png);position:absolute;right:10px;}

.dot{position: absolute;left:70%;top:93%;}
.dot li{width:13px;height:13px;float:left;margin-left:10px;background: url(images/dot.png);background-position: -13px 0;cursor: pointer;}
.dot li.cur{background-position: 0 0;}

</style>
</head>
<body>
<div class=”flex”>
<ul class=”slider”>
<li><img src=”images/img1.jpg” width=”1200″ height=”400″></li>
<li><img src=”images/img2.jpg” width=”1200″ height=”400″></li>
<li><img src=”images/img3.jpg” width=”1200″ height=”400″></li>
<li><img src=”images/img4.jpg” width=”1200″ height=”400″></li>
<li><img src=”images/img5.jpg” width=”1200″ height=”400″></li>
</ul>
<ul class=”btn”>
<li class=”prev”></li>
<li class=”next”></li>
</ul>
<ol class=”dot”>
<li class=”cur”></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

</div>
<script type=”text/javascript”>
$(function(){
var linum=$(“.slider li”).length;
var liwidth=$(“.slider li”).width();
$(“.slider”).css(“width”,linum*liwidth);

var i=0;
function autoplay(){
    if(i<linum-1){i++;}else{i=0;}    
    $(".slider").animate({"left":-liwidth*i+"px"},500);
    $(".dot li").eq(i).addClass("cur").siblings().removeClass("cur"); 
}
function autoplayprev(){
    if(i<=0){i=4;}else{i--;}
    $(".slider").animate({"left":-liwidth*i+"px"},500);
    $(".dot li").eq(i).addClass("cur").siblings().removeClass("cur"); 
}

//鼠标经过前进后退按钮,按钮显示与隐藏
$(“.flex”).hover(function(){
$(“.btn”).css(“display”,”block”);
clearInterval(set);
},function(){
$(“.btn”).css(“display”,”none”);
set=setInterval(autoplay,5000);
})

$(".btn .prev").click(function(){
    if(!$(".slider").is(":animated")){
        autoplayprev();
    }               
})
$(".btn .next").click(function(){
    if(!$(".slider").is(":animated")){
        autoplay();
    }
})

//点击小圆点当前小圆点变为黄色,图片轮播
$(“.dot li”).click(function(){
var x=$(this).index();
i=x;
$(“.slider”).animate({“left”:-liwidth*i+”px”},500);
$(“.dot li”).eq(i).addClass(“cur”).siblings().removeClass(“cur”);

});

 var set= setInterval(autoplay,5000);

});
</script>
</body>
</html>[/code]

 

网站前端开发_前端开发者web前端

https://www.rokub.com

» 本文来自:前端开发者 » 《图片轮播淡入淡出_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/10140.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!