<style> //css样式
*{padding:0; margin:0; box-sizing: border-box; } .mar{ height:500px; width:500px; background:aqua; margin:0 auto; } ul,ol{list-style:none ;} .bannner{ height:200px; width:100%; background:darkcyan; } .bannner li{ float:left; height:100%; width:150px; text-align:center; line-height:50px; font-size:15px; } .bann{ height:300px; width:100%; background:gold; } .bann ol:nth-child(1){ height:300px; width:100%; background:Red; } .bann ol:nth-child(2){ height:300px; width:100%; background:green; } .bann ol:nth-child(3){ height:300px; width: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].οnclick=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.οnmοuseοver=function(){ Swiper.autoplay.stop(); } bn.οnmοuseοut=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].οnclick= 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 ; } })