首页 > 代码库 > 图片轮播
图片轮播
实现图片轮播
1、HTML代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="http://www.mamicode.com/css/style.css"> </head> <body> <div class="adver"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="arrowLeft"><</div><div class="arrowRight">></div> </div> <script src="http://www.mamicode.com/js/jquery-1.12.4.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/carousel.js"></script> </body> </html>
css代码如下:
ul,li{padding: 0;margin: 0; list-style: none;} .adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");} ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;} ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "??????"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;} .arrowLeft,.arrowRight{ position: absolute; width: 30px; background:rgba(0,0,0,0.2); height: 50px; line-height: 50px; text-align: center; top:200px; z-index: 150; font-family: "??????"; font-size: 28px; font-weight: bold; cursor: pointer; display: none; } .arrowLeft{left: 10px;} .arrowRight{right: 10px;} li:nth-of-type(1){ background: orange; }
jquery代码如下
$(document).ready(function(){ var img=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"); $(".adver").mouseover(function(){ $(".arrowLeft").show(); $(".arrowRight").show(); }).mouseout(function(){ $(".arrowLeft").hide(); $(".arrowRight").hide(); }); var num = 0; $(".arrowRight").click(function(){ // 向左 if(num==img.length-1){ alert("已经是最后一张了"); }else{ num++; $(".adver").css("background","url(‘images/"+img [num]+"‘)"); $("li:eq("+num+")").css("background","orange"); $("li:eq("+num+")").siblings().css("background","#333"); } }); $(".arrowLeft").click(function(){ // 向右 if(num==0){ alert("这已经是第一张了"); } else{ num--; $(".adver").css("background","url(‘images/"+img [num]+"‘)"); $("li:eq("+num+")").css("background","orange"); $("li:eq("+num+")").siblings().css("background","#333");} }); $("li").click(function(){ // 点击数字 num = $("li").index(this); $(".adver").css("background","url(‘images/"+img [num]+"‘)"); $(this).css("background","orange"); $(this).siblings().css("background","#333"); }); });
图片轮播
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。