图片轮播淡入淡出|网站前端开发_前端开发者
摘要：网站前端开发_前端开发者丨web前端 https://www.rokub.com [code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatibl……
[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]
近期评论