轮播图
html页面
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/css.css" /><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script type="text/javascript"> $(function(){ //手动轮播 var length = $('#img li').length; for(i = 1;i <= length; i ++){ var li = '<li>' + i + '</li>'; $('#button').append(li); } $('#img li').eq(0).show(); $('#button').eq(0).addClass('action'); $('#button li').mouseover(function(){ $(this).addClass('action').siblings().removeClass('action'); var index = $(this).index(); $('#img li').eq(index).fadeIn(500).siblings().fadeOut(500); }) //自动轮播 var i = 0; var t = setInterval(move,1000); function move(){ i ++; if(i == size){ i = 0; } $('#button li').eq(i).addClass('action').siblings().removeClass('action'); $('#img li').eq(i).fadeIn(500).siblings().fadeOut(500); } //鼠标放上去,停止轮播.移开继续轮播 $('#banner').hover(function(){ clearInterval(t); },function(){ t = setInterval(move,1000); }) //左右轮播 $('#banner .left').click(function(){ move_left(); }) $('#banner .right').click(function(){ move(); }) function move_left(){ i--; if(i==-1){ i = size - 1; } $('#button li').eq(i).addClass('action').siblings().removeClass('action'); $('#img li').eq(i).fadeIn(500).siblings().fadeOut(500); } }) </script></head><body><div id = 'banner'><ul id = 'img'><li><a href="#"><img src = 'img/1.jpg'></a></li><li><a href="#"><img src = 'img/2.jpg'></a></li><li><a href="#"><img src = 'img/3.jpg'></a></li><li><a href="#"><img src = 'img/4.jpg'></a></li><li><a href="#"><img src = 'img/5.jpg'></a></li></ul><ul id = 'button'><!--<li class ='action'>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>--></ul><!--class里面的那个空格,相当风骚--><div class = 'left btn'><</div><div class = 'right btn'>></div></div></body></html>
css页面
@charset "utf-8";*{ margin: 0;padding: 0;}a{ text-decoration: none;color: #000000;}body{ font-size: 1em;color: #000000;}.clear{ clear: both;}ul{ list-style: none;}img{ border: none;vertical-align:bottom;}#banner{ width: 80%;height: 500px;position: absolute;top: 100px;bottom: 0;left: 10%;right: 0;}#banner #img li img{ width: 100%;height: 500px;}#banner #img li { position:absolute;width: 100%;height: 500px;display: block;}#button li{ width: 20px;height: 20px;background: #ADC0D4;z-index: 100;margin: 10px 10px;display: inline-block; font-size: 1em;border-radius: 50%;text-align: center;cursor: pointer;}#button{ position: absolute;top: 420px;left: 520px;}#banner #button .action{ background: red;}#banner .btn{ z-index:100;position: absolute;top: 50%;width: 70px;height: 70px;display:none;background: rgba(0,0,0,0.2); font-size: 50px;text-align: center;color: #FF9500;cursor: pointer;}#banner .left{ left: 0;}#banner .right{ right: 0;}#banner:hover .btn{ display: block;}
ゞ 浴缸里的玫瑰
布满荆棘的人生
淩亂°似流年
柔情只为你懂
还没有评论，来说两句吧...