一步一个记录--简单的jquery轮播图，按钮状态控制，layer弹窗
2017-01-23 15:43
537 查看
一直想把实习时学的东西记录下来，奈何刚刚实习不到一个月，写什么都特别慢，但是觉得真的有必要把写的东西做个记录，方便以后学习和复习。
把做的轮播图记录一下，代码好长，好多地方可以优化，以后有时间一定把代码优化一下，这么多重复的代码应该不好吧，对系统会有影响吧（还不知道啥影响哈哈）
把做的轮播图记录一下，代码好长，好多地方可以优化，以后有时间一定把代码优化一下，这么多重复的代码应该不好吧，对系统会有影响吧（还不知道啥影响哈哈）
//后台是c#写的，还不是很懂，学校学的c#都忘了，慢慢捡回来
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VqdResult.aspx.cs" Inherits="Imms.Web.Page.Status.VqdResult" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>结果</title>
<script type="text/javascript" src="../../style/javaScript/jquery/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" src="../../style/javaScript/jquery/jquery-3.1.0.js"></script>
//layer弹窗
<script type="text/javascript" src="../../style/control/layer-v3.0.1/layer/layer.js"></script>
<style type="text/css">
body {
overflow: auto;
}
* {
margin: 0;
padding: 0;
list-style-type: none;
}
/*body{background:url(img/bg.gif);}*/
#main {
margin: 0 auto;
}
a, img {
border: none;
}
#top {
width: 760px;
margin: 0 auto;
position: relative;
padding-top:40px;
}
#spanTong {
position: absolute;bottom:0px;
font-size: 20px;
font-weight: bold;
}
#disPlay img {
height: 18px;
width: 18px;
position: absolute;left: 740px;bottom: 0px;
}
.v_out {
width: 760px;
overflow: hidden;
margin: 0px auto;
}
.v_show {
width: 760px;
overflow: hidden;
position: relative;
height: 590px;
float: left;
}
.v_cont {
width: 6650px;
position: absolute;
left: 0px;
top: 0px;
}
.v_cont ul {
float: left;
text-align: center;
line-height: 50px;
}
.v_cont ul li {
width: 760px;
height: 570px;
background: #f8f8f8;
float: left;
margin-top: 3px;
}
.zx_slider .btnbox {
width: 750px;
height: 60px;
}
.zx_slider .btnbox a {
cursor: pointer;
display: inline-block;
float: left;
width: 126px;
height: 54px;
margin: 0 0 0 10px;
}
.zx_slider .btnbox a img {
position: relative;
display: inline;
width: 120px;
height: 48px;
float: left;
border: 2px solid #392101;
border-radius: 2px;
}
.zx_slider .btnbox a .img_hover {
border: 2px solid #e4471f;
border-radius: 2px;
}
.hi_btn {
width: 740px;
height: 330px;
position: absolute;
left: 0px;
top: 0px;
display: block;
}
.button_light {
width: 180px;
height: 30px;
float: left;
margin-right: 16px;
margin-bottom: 10px;
}
.button_light .span1 {
width: 20px;
height: 20px;
float: left;
background: url(../../style/image/picStatus/R.png) no-repeat 0px 4px;
}
p {
clear: both;
}
.button_light strong {
font-size: 14px;
}
button {
border: 1px solid #CCC;
-webkit-border-radius: 3px;
text-decoration: none;
color: black;
background: #D1EFFF;
font-size: 13px;
}
button:hover {
background: #fee287;
}
</style>
<script type="text/javascript">
//将json转化为可传值到WebMethod的string
function jsonToString(json) {
var arr = [];
var fmt = function (s) {
if (typeof s == 'object' && s != null) return jsonToString(s);
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
}
for(var i in json) arr.push("'" + i + "':" + fmt(json[i]));
return '{' + arr.join(',') + '}';
}
function FrameCallbackComplete(s, e) {
var data = JSON.parse(e.result);
//在这里更新界面的图标以及控制按钮的可见
console.log(data);
if (data[0].丢失开关) {
if (data[0].已丢失) {
$("#d1").css("background", "url(../../style/image/picStatus/R.png) no-repeat 0 4px");
$("#b1").html("");
$("#b1").html("误报");
} else {
$("#d1").css("background", "url(../../style/image/picStatus/G.png) no-repeat 0 4px");
$("#b1").html("");
$("#b1").html("漏报");
}
} else {
console.log(data[0].丢失开关);
$("#d1").css("background", "url(../../style/image/picStatus/W.png) no-repeat 0 4px");
$("#b1").html("");
$("#b1").html("开启");
}
function vqdBtnClick(i) {
$.ajax({
type:"POST",
url:"VqdResult.aspx/Mark",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
data: jsonToString({deviceCode:'1',vqdType:document.getElementById('s' + i).innerHTML,optType:document.getElementById('b' + i).innerHTML}),
success: function (obj) {
if (obj.d)
alert("sucess");
},
error: function(err) {
alert(err);
}
}
);
}
</script>
</head>
<body>
//dev的样式，还不知道什么意思，趁着春节放假把dev学会
<form runat="server">
<dx:ASPxCallback ID="FrameCallback" runat="server" ClientInstanceName="FrameCallback" OnCallback="FrameCallback_OnCallback">
<ClientSideEvents CallbackComplete="FrameCallbackComplete"></ClientSideEvents>
</dx:ASPxCallback>
</form>
<div id="main">
<div id="top">
<span id="spanTong">通道</span>
<div id="disPlay">
<img src="../../style/image/button/0315-arrow-up2.png" alt="" />
</div>
</div>
<div class="zx_slider v_out">
<div class="v_show">
<div class="imgbox v_cont">
<ul>
<li>
<img id="img0" alt="Danx" src="" /></li>
<li>
<img id="img1" alt="Danx" src="" /></li>
<li>
<img id="img2" alt="Danx" src="" /></li>
<li>
<img id="img3" alt="Danx" src="" /></li>
</ul>
</div>
</div>
<div class="png"></div>
<a href="#" id="hi_btn0" class="hi_btn"></a>
<a href="#" id="hi_btn1" class="hi_btn"></a>
<a href="#" id="hi_btn2" class="hi_btn"></a>
<a href="#" id="hi_btn3" class="hi_btn"></a>
<div class="btnbox">
<a onmouseover="btn_m_over(0)">
<img alt="Danx" id="btn_img0" class="thumb img_hover" src="" /></a>
<a onmouseover="btn_m_over(1)">
<img alt="Danx" id="btn_img1" class="thumb" src="" /></a>
<a onmouseover="btn_m_over(2)">
<img alt="Danx" id="btn_img2" class="thumb" src="" /></a>
<a onmouseover="btn_m_over(3)">
<img alt="Danx" id="btn_img3" class="thumb" src="" /></a>
</div>
</div>
<div id="button_all" style="width: 1024px; height: 300px; margin: 10px auto;">
<hr />
<ul>
<p style="margin: 10px; margin-left: 0px;">
<span style="margin-top: 10px;"><strong>基础类:</strong></span><span style="font-size: 14px;color:#778899">哈哈这里写图片描述</span>
</p>
<li class="button_light">
<span id="d1" class="span1"></span>
<strong id="s1">丢失</strong>
<button id="b1" style="padding: 4px 10px; font-size: 14px;">误报</button>
<button style="padding: 4px 10px; font-size: 14px;" onclick="vqdBtnClick(1)">忽略</button>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//实现轮播图
var slider_count = 4;
$(".slider_p_div").hide();
$("#slider_p0").show();
$(".hi_btn").hide();
$("#hi_btn0").show();
$(".img_hover").animate({ bottom: '10px' });
var slider_i = 1;
var m_over = true;
function zx_slider() {
if (m_over) {
if (slider_i < 0) { slider_i = slider_count; }
//p
$(".slider_p_div").hide();
$("#slider_p" + slider_i).show();
//p end
//hi_btn
$(".hi_btn").hide();
$("#hi_btn" + slider_i).show();
//hi_btn end
//btn
$(".btnbox img").stop(true, true);
$(".btnbox img").removeClass("img_hover");
$(".btnbox img").animate({ bottom: '0px' }, 200);
$("#btn_img" + slider_i).addClass("img_hover");
$("#btn_img" + slider_i).animate({ bottom: '10px' }, 200);
//btn end
$(".imgbox").stop();
$(".imgbox").animate({ left: '-760' * slider_i + 'px' });
if (slider_i < slider_count) {
slider_i++;
} else {
slider_i = 0;
}
}
}
function btn_m_over(btn_i) {
if (slider_i - 1 != btn_i) {
m_over = true;
slider_i = btn_i;
zx_slider();
m_over = false;
}
}
$(".zx_slider").mouseover(function () {
m_over = false;
});
$(".zx_slider").mouseout(function () {
m_over = true;
});
//点击控制图片显示隐藏
var temp = false;
$("#disPlay img").click(function(){
if(temp){
$(".zx_slider").slideDown();
$("#disPlay img").attr('src','../../style/image/button/0315-arrow-up2.png');
temp = false;
}else{
$("#disPlay img").attr('src','../../style/image/button/0319-arrow-down2.png');
$(".zx_slider").slideUp();
temp=true;
}
});
//控制图片按比例缩放
var w = 760;
var h = 570;
$("li img").each(function () {
var img_w = $(this).width();
var img_h = $(this).height();
if (img_w > w) {
var height = (w * img_h) / img_w;
$(this).css({
"width": w, "height": height
});
}
if (img_w < w) {
$(this).css({
"width": w, "height": h
});
}
});
//layer弹窗
$('#s1').mouseover(function () {
layer.tips('诊断', '#s1', {
tips: [3, '#78BA32']
});
})
})
</script>
<div>
</div>
</body>
</html>
效果就是这样的啦，虽然不怎么好看，涉及到业务的就打码了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery使用一个按钮控制图片的伸缩实现思路
- 游戏简单控制逻辑 一个轻量级的状态机
- 状态开关按钮ToggleButton的简单使用：实现动态控制布局
- 【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮
- 用jquery做一个简单的图片轮播效果
- jquery制作一个简单的轮播
- JQuery悬停控制图片轮播――代码简单
- layer(全称：jQuery-plugin-layer)，一个可以让你想到即可做到的web弹窗（层）解决方案（js组件）非常好的层效果
- 一个简单的页面弹窗插件 jquery.pageMsgFrame.js
- Jquery教你写一个简单的轮播.
- Jquery实现选中记录按钮状态激活，未选中按钮状态未激活
- 写一个方法进行各种属性的更新，而不要每个界面设置改变都改变一个属性。就是点击应用或确定按钮时调用这个更新属性的方法，遍历所有（控制对象属性的）界面控件的状态（值），进行属性修改和刷新。
- jQuery实现一个简单的轮播图
- 一个简单实用的jquery轮播插件
- jquery图片轮播，点击左右按钮轮播，可控制是否自动播放，是否循环轮播（自写）
- jQuery使用一个按钮控制图片的伸缩实现思路
- jQuery使用一个按钮控制图片的伸缩
- 一个按钮控制div的显示与隐藏。运用jquery的toggle双、多事件绑定方法
- 游戏简单控制逻辑 一个轻量级的状态机
- JQuery悬停控制图片轮播――代码简单