使用JQuery实现简单的图片切换

来源：互联网发布：ntfs mac 2016注册码编辑：程序博客网时间：2024/06/02 11:26

1.html代码

<div id="slides-show"><div class="slides-wrap"><div class="slides-item"><img src="img/slide-1.jpg"/></div><div class="slides-item"><img src="img/slide-2.jpg"/></div><div class="slides-item"><img src="img/slide-3.jpg"/></div></div></div>

2.css代码

#slides-show  { height: 510px; width: 1024px;  position: relative;  overflow: hidden;}#slides-show .slides-wrap{ position: absolute; top:0px; left: 0;}#slides-show .slides-item{ padding: 0; height: 520px;}#slides-show .slides-item img{ width: 1024px; height: 520px; margin-bottom:0;}

3.js

<script type="text/javascript">$(document).ready(function(){var len=$("#slides-show .slides-wrap .slides-item").length;var cur=0;var flag=false;function slide(){$("#slides-show .slides-wrap").css("top", "-"+ (cur * 520) + "px");if(flag) {cur += 1; flag=false;$("#slides-show .slides-wrap").fadeOut(3000);}else{ flag=true;$("#slides-show .slides-wrap").fadeIn(1000);}if(cur > len -1) cur=0;console.log(cur);}slide();setInterval(function(){slide();},3000);});</script>

ps：记得引入JQuery

<script src="js/jquery.min.js"></script>

全部代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用JQuery实现简单的图片切换</title><style type="text/css">#slides-show  { height: 510px; width: 1024px;  position: relative;  overflow: hidden;}#slides-show .slides-wrap{ position: absolute; top:0px; left: 0;}#slides-show .slides-item{ padding: 0; height: 520px;}#slides-show .slides-item img{ width: 1024px; height: 520px; margin-bottom:0;}</style><script src="js/jquery.min.js"></script></head><body><div id="slides-show"><div class="slides-wrap"><div class="slides-item"><img src="img/slide-1.jpg"/></div><div class="slides-item"><img src="img/slide-2.jpg"/></div><div class="slides-item"><img src="img/slide-3.jpg"/></div></div></div><script type="text/javascript">$(document).ready(function(){var len=$("#slides-show .slides-wrap .slides-item").length;var cur=0;var flag=false;function slide(){$("#slides-show .slides-wrap").css("top", "-"+ (cur * 520) + "px");if(flag) {cur += 1; flag=false;$("#slides-show .slides-wrap").fadeOut(3000);}else{ flag=true;$("#slides-show .slides-wrap").fadeIn(1000);}if(cur > len -1) cur=0;console.log(cur);}slide();setInterval(function(){slide();},3000);});</script></body></html>

0 0