Web 前端 图片的轮播功能
效果如图
引用
<script type="text/javascript" src="..\jquery.js"></script>
<head>
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 list-style-type:none; 6 } 7 .lunbo{ 8 width: 800px; 9 height: 360px; 10 position: relative; /* <!-- 相对定位 --> */ 11 margin: 0 auto; 12 } 13 .lunbo_img { 14 15 position: absolute;/* <!-- 绝对定位 即 相对于 class="lunbo"进行定位距离他left=0,top=0 -->*/ 16 left: 0; 17 top: 0; 18 opacity: 0;/*<!--透明度=0 即看不见-->*/ 19 transform: scale(0);/* 转换是使元素改变形状、尺寸和位置的一种效果。现在0是缩小，1是一倍，2是放大2倍*/ 20 transition: all 1s ease-in-out;/*一秒内先 （ease-in-out）加速再减速*/ 21 } 22 .lunbo_img_opacity { 23 opacity: 1; 24 transform: scale(1); 25 } 26 .lunbo_btn { 27 width: 40px; 28 height: 60px; 29 position: absolute;/*<!-- 绝对定位 即 相对于 class="lunbo"进行定位距离他left=0,top=50% -->*/ 30 left: 0; 31 top: 50%; 32 margin-top: -30px; 33 line-height: 60px; 34 text-align: center; 35 36 background: rgba(22,22,22,.4);/*<!--red,green,blue,Alpha透明度-->*/ 37 color: #fff; 38 font-size: 50px; 39 font-family: YouYuan,'Microsoft YaHei',FangSong,LiSu; 40 41 cursor: pointer;/*<!--光标的形状(pointer是小手的形状)-->*/ 42 } 43 .lunbo_btn:hover { 44 font-weight: bold;/*<!--字体加粗 -->*/ 45 background: rgba(22,22,22,.7); 46 } 47 .lunbo_btn_rt { 48 right: 0; 49 left: auto; 50 } 51 .lunbo_bottom { 52 width: 120px; 53 position: absolute;/*<!-- 绝对定位 即 相对于 class="lunbo"进行定位距离他left=50%,bottom=10px -->;*/ 54 55 left: 50%; 56 bottom: 40px; 57 margin-left: -60px; 58 text-align: center; 59 font-size: 0; 60 padding: 0; 61 } 62 .lunbo_bottom li { 63 width: 10px; 64 height: 10px; 65 border-radius: 50%; 66 float: left; 67 background: rgba(34,34,34,.5); 68 margin: 0 7px; 69 cursor: pointer; 70 } 71 .lunbo_bottom .on { 72 background: rgba(0,0,0,.7); 73 } 74 </style>
1 <script type="text/javascript"> 2 $(function () { 3 var lunboimg = 0; 4 var lunboimgbottom = $(".lunbo img").size();//<!-- 获得图片的个数 --> 5 for (var j = 0; j < lunboimgbottom; j++) { 6 $(".lunbo_bottom").append("<li></li>");//<!-- 加子控件 --> 7 } 8 //底部按钮 9 $(".lunbo_bottom li").eq(0).addClass("on").siblings().removeClass("on");//索引为0的加.on样式，它的同胞（siblings）去掉.on样式 10 //hover鼠标指针浮动在其上的元素，并设置其样式： 11 $(".lunbo_bottom li").hover(function () { 12 $(this).addClass("on").siblings().removeClass("on");//鼠标当前触碰的加.on样式，它的同胞（siblings）去掉.on样式 13 $(".lunbo_img").eq($(this).index()).addClass("lunbo_img_opacity").siblings().removeClass("lunbo_img_opacity"); 14 //鼠标当前触碰的加.lunbo_img_opacity样式，它的同胞（siblings）去掉.lunbo_img_opacity样式 15 //$(this).index()是JQ语句即当前的元素的索引 16 }) 17 //自动切换 18 var lunboAuto = setInterval(function () { 19 //setInterval(要调用的函数或要执行的代码串,时间间隔ms) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 20 lunboimg++; 21 lunboChange(); 22 }, 3000);//3000ms 23 $(".lunbo").hover(function () { 24 clearInterval(lunboAuto);}, function () { 25 lunboAuto = setInterval(function () { 26 lunboimg++; 27 lunboChange(); 28 }, 3000) 29 }) 30 //clearInterval()取消 setInterval() 设置的 time即setInterval（）停止，参数是setInterval() 返回的 ID 值即“lunboAuto” 31 //左侧按钮 32 $(".lunbo_btn_lt").click(function () { 33 lunboimg--; 34 lunboChange(); 35 }) 36 //右侧按钮 37 $(".lunbo_btn_rt").click(function () { 38 lunboimg++; 39 lunboChange(); 40 }) 41 function lunboChange() { 42 if (lunboimg == -1) { 43 $(".lunbo_img").eq(lunboimgbottom - 1).addClass("lunbo_img_opacity").siblings().removeClass("lunbo_img_opacity"); 44 lunboimg = lunboimgbottom - 1; 45 } 46 if (lunboimg == lunboimgbottom) { 47 $(".lunbo_img").eq(0).addClass("lunbo_img_opacity").siblings().removeClass("lunbo_img_opacity"); 48 lunboimg = 0; 49 } 50 $(".lunbo_img").eq(lunboimg).addClass("lunbo_img_opacity").siblings().removeClass("lunbo_img_opacity"); 51 $(".lunbo_bottom li").eq(lunboimg).addClass("on").siblings().removeClass("on"); 52 } 53 }) 54 </script>
</head>
1 <body> 2 <div class="lunbo "> 3 4 <img src="..images\banner1.jpg" class="lunbo_img lunbo_img_opacity"/> 5 <img src="..images\banner2.jpg" class="lunbo_img"/> 6 <img src="..images\banner3.jpg" class="lunbo_img"/> 7 <img src="..images\banner4.jpg" class="lunbo_img"/> 8 <img src="..images\banner5.jpg" class="lunbo_img"/> 9 10 <ul class="lunbo_bottom"></ul> 11 <div class="lunbo_btn lunbo_btn_lt"><</div> 12 <div class="lunbo_btn lunbo_btn_rt">></div> 13 14 </div> 15 </body>
