<style> //css样式
*{padding:0;
margin:0;
box-sizing: border-box;
}
.mar{
height:500px;
500px;
background:aqua;
margin:0 auto;
}
ul,ol{list-style:none ;}
.bannner{
height:200px;
100%;
background:darkcyan;
}
.bannner li{
float:left;
height:100%;
150px;
text-align:center;
line-height:50px;
font-size:15px;
}
.bann{
height:300px;
100%;
background:gold;
}
.bann ol:nth-child(1){
height:300px;
100%;
background:Red;
}
.bann ol:nth-child(2){
height:300px;
100%;
background:green;
}
.bann ol:nth-child(3){
height:300px;
100%;
background:maroon;
}
.aa{background:aqua;}
.bb{background:bisque;}
</style>
<body>
<div class="mar" style="overflow:hidden;"> // html布局
<ol id="bannner" class="bannner">
<li>点击1</li>
<li>点击2</li>
<li>点击3</li>
</ol>
<div class="bann" id="bann" >
<ol >内容以</ol>
<ol >内容以</ol>
<ol >内容以</ol>
</div>
</div>
<script> //js部分
var b =document.getElementById("bannner")
var bo = b.getElementsByTagName("li") //获取id 和下面的名字
console.log(bo);
var cn =document.getElementById("bann").getElementsByTagName("ol")
console.log(cn);
for (var i=0; i<bo.length; i++){ //循环还给每个li标签有个点击事件
bo[i].index= i;
bo[i].onclick=function(){
for (var i=0; i<bo.length; i++){
bo[i].className="aa";
cn[i].style.display="none"; //清除样式，隐藏向对应的块
}
this.className="bb";
cn[this.index].style.display="block"; //this.index等于b[0];
}
}
</script>
做出来的样式：上面有3个块
加上js的效果如下：
当点击第二块的时候下面的绿色显示出来。
banner鼠标点击上去停止的函数：
var bn= document.getElementById("ga");
console.log(bn);
bn.onmouseover=function(){
Swiper.autoplay.stop();
}
bn.onmouseout=function(){
Swiper.autoplay.start();
}
另一种的选项卡
<script>
var bt = document.getElementsByClassName("btn_list")[0].children; //通过获取类名来获取下面的haizi
console.log(bt);
var cn = document.getElementsByClassName("con_list")[0].children;
for (var i=0; i<bt.length; i++){
bt[i].index = i; //通过下标来获取每个想对应的
bt[i].onclick= function(){
// alert(this.index); //循坏已经结束 提示每次都是3
for (var x=0;x<cn.length; x++){ //如何找到相对应的快
cn[x].style.display ="none"; //先隐藏所有的内容快
}
cn[this.index].style.display="block";//点击的时候让他显示
}
}
</script>
JQ选项卡
$(document).ready(function(){ //准备
$(" [name='btn']").click(function(){ //获取name属性为btn的li标签
$(" [name='btn']").eq($(this).index()).prop("class","cur").siblings().prop("class",'aoo'); //点击当前的这个设置一个样式，其他的同胞设置另一个样式
$("#q ol").eq($(this).index()).show().siblings().hide(); //在这个点击事件种来点击这个快显示其他块消失；
});
.aoo{background:#f2f9fe !important; color: #285e9a !important;}
.cur{background:linear-gradient( #224d85,#3073be); color: #f2f9fe !important;}
JQ轮播图
$("#bb").mouseover(function(){ //获取swiper的ID让鼠标悬停来触发一个函数
mySwiper.autoplay.stop(); //让我的swiper来暂停
});
$("#bb").mouseout(function(){
mySwiper.autoplay.start();
});
<link rel="stylesheet" href="css/swiper.min.css"> //链接swiper的css 放在head里面
<link rel="stylesheet" href="css/domstyle.css" /> //改变swiper的宽度、高度、以及设置照片
<script src="js/swiper.min.js"></script> //链接swiper的js
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> //链接jq
<script src="js/lihuan.js" ></script> //自己通过jsl 来设置
swiper js初始化的代码
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', //水平方向
loop: true, //循坏
autoplay: { //自动播放
delay: 2000,
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
jQ点击的时候切换照片然后双击删除
$(document).ready(function(){
$(function(){
var timer = null; //定义定时器空
var photo = $("#cicluar img") ; //获取img给变量
var bb = $(".fi") //获取input file
photo.bind("click",function() //点击 {
clearTimeout(timer); //清空定时器
timer = setTimeout(function(){ //延迟设置
bb.click();
bb.on("change",function(){ //添加一个函数 on 或者bind
var sss = (getfiles(this.files[0])); //当前的这个图片以数组呈现，fanhu
bb.parent().find("img").attr("src",sss ); //找到设置获取的图片
bb.parent().next().text("123122"); //下面文本改变
})
},300) //延迟时间
})
photo.on("dblclick",function(){ //双击事件
clearTimeout(timer); //请空定时器
bb.parent().find("img").attr("src","img/jia.jpg"); //换回图片
bb.parent().next().text('支持格式：JPG、JPEG、PNG格式，小于2M'); //换回文本
}
)
})
function getfiles(file){ //获取file
var url1 = window.webkitURL.createObjectURL(file); //进入窗口
console.log(url1);
return url1; //返回给getfiles
}
});
l另一种图片上传：
$(document).ready(function(){
$(".fi").change(function(){
var objurl = getObjectURL(this.files[0]);
$("#img").attr("src",objurl);
$("#img").parent().next().text("双击请删除")
$(".fi").hide();
})
$("#img").dblclick(function(){
$(".fi").show().val("");
$("#img").attr("src","img/jia.jpg");
$("#img").parent().next().text("支持格式：JPG、JPEG、PNG格式，小于2M")
})
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
})