首页 > 代码库 > 轮播图
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
一、小练习
1.选项卡
$(".tab li").click(function(){
$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass(‘cur‘);
$("div").hide().eq($(this).index()).show();
});
2.轮播图
详见项目里面jq轮播图
*{
margin: 0;
padding:0;
user-select:none;
}
img{
width: 500px;
height: 400px;
float: left;
}
.father{
margin: 50px auto;
width: 500px;
height: 400px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.da{
width: 2100px;
height: 400px;
}
span{
width: 25px;
height: 50px;
background-color: rgba(0,0,0,.2);
text-align: center;
line-height: 50px;
font-size: 18px;
position: absolute;
top: 190px;
cursor: pointer;
}
.left{
left: 10px;
}
.right{
right:10px;
}
.dian{
position: absolute;
bottom: 10px;
right: 10px;
}
.dian li{
float: left;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: gray;
margin: 10px;
list-style: none;
cursor: pointer;
}
.dian li.on{
background-color: black;
}
</style>
<div class="father">
<div class="da">
<img src="http://www.mamicode.com/images/2.jpg" >
<img src="http://www.mamicode.com/images/3.jpg" >
<img src="http://www.mamicode.com/images/4.jpg" >
<img src="http://www.mamicode.com/images/7.jpg" >
</div>
<div class="jian">
<span class="left"><</span>
<span class="right">></span>
</div>
<ul class="dian">
<li class="on"></li>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
</div>
<script>
$(document).ready(function(){
// 3.1右边
$(".right").click(function(){
clear();
// 3.1.1右边箭头
$(".da").stop().animate({marginLeft:"-500px"},1000,function(){
$(".da").append($(".da img:eq(0)"));
$(".da").css("marginLeft","0px");
});
// 3.1.2小圆点
if($("li.on").next().length!=0){
$("li.on").removeClass("on").next().addClass("on");
}else{
$("li.on").removeClass("on").siblings().first().addClass("on");
}
});
// 3.2左边
$(".left").click(function(){
clear();
// 3.2.1左边箭头
$(".da").css("marginLeft","-500px");
$(".da").prepend($(".da img:eq(3)"));
$(".da").animate({marginLeft:"0px"},1000);
// 3.2.2小圆点
if($("li.on").prev().length!=0){
$("li.on").removeClass("on").prev().addClass("on");
}else{
$("li.on").removeClass("on").siblings().last().addClass("on");
}
});
// 清除计时封装
function clear(){
clearInterval(jishi);
jishi=setInterval(jishiqi,3000);
};
// 计时器封装
var jishi=setInterval(jishiqi,3000);
// 添加定时器
function jishiqi(){
$("ul.d").stop().animate({marginLeft:"-400px"},1000,function(){
$("ul.d").append($("ul.d li:eq(0)"));
$("ul.d").css("marginLeft","0px");
});
};
});
2.第二种轮播图
// 1.小轮播图
$(".dian li").click(function(){
var number = $(this).index();
$(".slun").animate({marginLeft: (-1090)*number+"px"},1000);
$(".dian li").eq($(this).index()).addClass("on").siblings().removeClass("on");
console.log(number);
});
</script>
3.第三种轮播图
$(document).ready(function(){
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
3.表格
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
表示为12345
12345
(2)colspan属性用在td标签中，用来指定单元格横向跨越的列数：
rowspan的作用是指定单元格纵向跨越的行数 rowspan="2"
4.列表里面的复选框
4.1if else的写法
if(data=http://www.mamicode.com/=‘yes‘){
/**$(‘#warn‘).html(data);*/
$(‘#warn‘).html("该imei号存在！");
}else if(data=http://www.mamicode.com/=‘no‘){
/**$(‘#warn‘).html(data);*/
$(‘#warn‘).html("该imei号不存在，请重新输入！");
}else{
$(‘#warn‘).html("未知错误！");
}
$(function () { 、
// 2.6全选反选
$("#wrap button.all").click(function(){
if($("#wrap ul input[type=‘checkbox‘]").attr("checked") == "checked"){
$("#wrap ul input[type=‘checkbox‘]").removeAttr("checked","checked");
$("#wrap ul input[type=‘checkbox‘]").prop("checked",true);
}else {
if($("#wrap ul input[type=‘checkbox‘]").is(":checked")){
$("#wrap ul input[type=‘checkbox‘]").removeAttr("checked");
$("#wrap ul input[type=‘checkbox‘]").prop("checked",false);
}else{
// 2.6.1禁用情况下
if ($("#wrap ul input[type=‘checkbox‘]").is(":disabled")) {
$("#wrap ul input[type=‘checkbox‘]").removeAttr("checked");
$("#wrap ul input[type=‘checkbox‘]").prop("checked","checked");
$("#wrap ul input[disabled=‘disabled‘]").removeAttr("checked");
$("#wrap ul input[disabled=‘disabled‘]").prop("checked", false);
}else{
$("#wrap ul input[type=‘checkbox‘]").removeAttr("checked");
$("#wrap ul input[type=‘checkbox‘]").prop("checked","checked");
}
}
}
});
});
// 2.2删除
$("#but button:eq(1)").click(function(){
// 2.2.1第一种方法
$("#wrap ul input[name=‘text‘]:checked").parents("li").remove();
// 2.2.2第二种方法
// $("#wrap ul input[name=‘text‘]:checked").each(function(){
// var n=$(this).parents("li").index();
// $("#wrap ul").find("li:eq("+n+")").remove();
// });
});
// 2.5刷新
$("#but button:eq(5)").click(function(){
$("#wrap ul input").removeAttr("disabled");
});
// 2.5.1禁止选中该列
$("#wrap li button:eq(2)").click(function(){
$("#wrap").find("ul input").attr("disabled","disabled");
});
// 2.4置顶
$("#but button:eq(2)").click(function(){
var ding =$("#wrap ul input[type=‘checkbox‘]:checked").parents("li");
$("#wrap ul").prepend(ding);
});
// 2.3取消置顶
$("#but button:eq(3)").click(function(){
$("input:checked").each(function () {
var _index=$(this).attr("value");
// 因为可能会有多选 找到选中的input 遍历 每次都是根据他自己的value找到他之前的那个位置并插进去.会有删除的情况
if($("input").eq(_index).attr("value")-_index==-1){
$("#wrap ul li").eq($(this).attr("value")-1).after($(this).parents("li"));
}else{
var el_index=$("input").eq(_index).attr("value")-_index;
$("#wrap ul li").eq($(this).attr("value")-1-el_index).after($(this).parents("li"));
}
})
});
二、知识点
1.首行缩进，或者input的padding-left：5px
text-indent：2em；
2.form表单：
(1)textarea宽度不能拖动:min-width：；max-width:；
(2)input最多输入20个字符串：<maxlength=20>
3.a链接
(1)跳转到新页面target=_blank或者_self
(2)页内锚点
顶部：<a href="http://www.mamicode.com/index.html?#ha"></a>其中？是路径和参数的分割符
文章：<p name="ha"></p>
4.字体
(1)大标题：#333，文章内容#666。不要使用纯黑色
(2)字体倾斜：font-size:italic;
(3)文字间的间距：letter-spacing:10px;
5.透明
transparent,opacity。
小三角：border:20px solid transparent;border-top-color：red;w0;h0;
6.toggle属性
$("div").click(function(){
$(this).toggleClass("width");
});会出来卷帘的效果
$("div").click(function(){
$("input").toggle();
});就是show和hide的区别
可进行点击更换背景颜色。响应点击事件
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
7.背景固定
background: url(images/15.jpg) center fixed;
background-size:cover;
8.边框
border-radius：0 0 15px 0；上右下左
9.背景色渐变。必须带兼容性
background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
<!-- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/0
background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/
-->
10.不规则元素居中
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;
正常：
vertical-align: middle;
line-height：100%
11.定位
position:sticky用法
position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
三、jq中的知识点
1.bom操作：找到第一个ul中的第一个li
$("ul:eq(0)").children("li:eq(0)").click(function(){});
2.$(function(){})和$(document).ready(function(){})
3.顺序：jq。bootstrap。插件。最后外联js
4.自动刷新
function myrefresh(){
window.location.reload();
}
setTimeout(‘myrefresh()‘,1000); //指定1秒刷新一次
或者 <a href="javascript:location.reload();">哈哈哈哈</a>不可以#
5.jq中不喜欢用遍历each，是可以用for
选择器+遍历
$(‘div‘).each(function (i){});
// 4.页面内列表数
$("#myselect").change(function(){
var opt=$(this).val();
for(i=opt;i<$("#wrap ul li").length;i++){
$("#wrap ul li").eq(i).hide();
}
for(j=0;j<opt;j++){
$("#wrap ul li").eq(j).show();
}
});
四、bootstrap中的知识
1.禁止响应式布局有如下几步：
移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。
通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important 。
如果使用了导航条，需要移除所有导航条的折叠和展开行为。
对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
.container{
width: 1080px!important;
}
.col-md-4{
width: 360px!important;
display: inline-block;
}
五、兼容性
$(document).ready(function(){
var doc=document,inputs=doc.getElementsByTagName(‘input‘),supportPlaceholder=‘placeholder‘in doc.createElement(‘input‘),placeholder=function(input){var text=input.getAttribute(‘placeholder‘),defaultValue=http://www.mamicode.com/input.defaultValue;
if(defaultValue=http://www.mamicode.com/=‘‘){
input.value=http://www.mamicode.com/text}
input.onfocus=function(){
if(input.value=http://www.mamicode.com/==text){this.value=‘‘}};
input.onblur=function(){if(input.value=http://www.mamicode.com/==‘‘){this.value=text}}};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute(‘placeholder‘);
if(input.type===‘text‘&&text){placeholder(input)}}}});
这个是ie9解决不知palceholder的代码
六、自定义input复选框
<style>
#container {
margin: 20px auto;
}
#container span {
position: relative;
}
#container .input_check {
position: absolute;
visibility: hidden;
}
#container .input_check+label {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #fd8845;
}
#container .input_check:checked+label:after {
content: "";
position: absolute;
left: 2px;
bottom: 12px;
width: 9px;
height: 4px;
border: 2px solid #fd8845;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="container">
<span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span>
<span><input type="checkbox"class="input_check" id="check4"><label for="check4"></label></span>
</div>
</body>
七、滑动固定在顶部
$("#wrap").scroll(function(){
var juli=$("#wrap .gud").offset().top;
var hua = $("#wrap").scrollTop();
if(hua>0){
$("#wrap .gud").css({"position":"fixed","top":juli});
}else{
$("#wrap .gud").css({"position":"static"});
}
});
$(window).scroll(function () {
var gun = $("body").scrollTop();
if(gun>0){
$("#wrap .gud").css({"position":"absolute","top":0});
}
})
八、排序
一、 冒泡排列
for(i=a.length-1;i>0;i--){
for(j=0;j<i;j++){
var kong=0;
if(a[j]>a[j+1]){
kong=a[j];
a[j]=a[j+1];
a[j+1]=kong;}
}
}
document.write(a+"<br>");
二、选择排序
for(x=0;x<a.length-1;x++){
for(y=x+1;y<a.length;y++){
var center=0;
if(a[x]>a[y]){
center=a[x];
a[x]=a[y];
a[y]=center;
}
}
}
document.write(a);
</body>
</html>
$(function () {
ShowMap(‘120.452932,36.1171‘, ‘青岛博讯通‘, ‘成盛花园‘, ‘021-888888888‘, ‘021-6666666‘, ‘20‘);
})
function getInfo(id) {
$.ajax({
type: "POST",
url: "WebUserControl/Contact/GetInfo.ashx",
cache: false,
async: false,
data: { ID: id },
success: function (data) {
data = http://www.mamicode.com/eval(data);
var length = data.length;
if (length > 0) {
ShowMap(data[0]["Image"], data[0]["NewsTitle"], data[0]["Address"], data[0]["Phone"], data[0]["NewsTags"], data[0]["NewsNum"]);
}
}
});
}
function ShowMap(zuobiao, name, addrsee, phone, chuanzhen, zoom) {
var arrzuobiao = zuobiao.split(‘,‘);
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(arrzuobiao[0], arrzuobiao[1]), zoom);
map.addControl(new BMap.NavigationControl());
var marker = new BMap.Marker(new BMap.Point(arrzuobiao[0], arrzuobiao[1]));
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow(‘<p style="color: #bf0008;font-size:14px;">‘ + name + ‘</p><p>地址：‘ + addrsee + ‘</p><p>电话：‘ + phone + ‘</p><p>传真：‘ + chuanzhen + ‘</p>‘);
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
marker.openInfoWindow(infoWindow);
}
轮播图