<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小例子</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
#main {
margin-top: 20px;
}
* {
margin: 0;
padding: 0;
word-wrap: break-word;
}
a {
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a.underline:hover {
text-decoration: underline;
}
a img {
border: none;
}
body {
margin: 0px;
padding: 0px;
position: relative;
}
body,
td,
div,
a,
li,
form {
color: #391f0e;
line-height: 20px;
font-family: Arial, "Microsoft yahei"
}
div,
form,
p,
img,
ul,
ol,
li,
dl,
dt,
dd,
button,
input {
margin: 0px;
padding: 0px;
font-size: 12px;
}
li {
list-style: none;
}
/*table{font-size: 13px;}*/
.clear {
clear: both !important;
width: 0px !important;
height: 0px !important;
line-height: 0px !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
position: static !important;
background: none !important;
}
/* For IE 6/7 (trigger hasLayout) */
.fl {
float: left;
}
.fr {
float: right;
}
.block {
display: block !important;
}
.box {
width: 100%;
margin: 0 auto;
height: auto;
}
.w {
width: 1000px;
margin: 0 auto;
}
/*通用样式结束*/
.a_a {
height: 500px;
overflow: hidden;
position: relative;
}
.a_b {
height: 500px;
width: 5000px;
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s, -o-transform 1s;
}
.a_c {
width: 1000px;
height: 500px;
}
.left {
background: url(../img/064.png) no-repeat;
height: 60px;
width: 60px;
background-size: 100% 100%;
position: absolute;
top: 250px;
left: 370px;
}
.left:hover {
cursor: pointer;
}
.right:hover {
cursor: pointer;
}
.right {
background: url(../img/063.png) no-repeat;
height: 60px;
width: 60px;
background-size: 100% 100%;
position: absolute;
top: 250px;
left: 1500px;
}
</style>
</head>
<body>
<div class="box">
<div class="w a_a">
<div class="a_b">
<div class="a_c fl" style="background-color: gray;"></div>
<div class="a_c fl" style="background-color: darkmagenta"></div>
<div class="a_c fl" style="background-color: blue;"></div>
<div class="a_c fl" style="background-color: green;"></div>
<div class="a_c fl" style="background-color: paleturquoise;"></div>
<div class="clear"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<script>
$(function() {
$('.left').click(
function() {
var a = $('.a_b').attr('id').substr(1, 4); //substr 截取字符串 从索引1的位置开始截取 截取4个字符串
alert(a);
if(a != 0) {
var e = a - 1000;
$('.a_b').attr('id', -e);
$('.a_b').css("transform", "translate(-" + e + "px)");
}
}
)
$('.right').click(
function() {
var a = $('.a_b').attr('id');
if(a != -4000) {
var e = a - 1000;
$('.a_b').attr('id', e);
$('.a_b').css("transform", "translate(" + e + "px)");
}
}
)
})
</script>
</body>
</html>
jquery 写tab切换：
$(function()
{
$('.about-5-1>div').click(
function()
{
var i = $(this).index(); //定义变量i 为当前对象的索引。
$(this).parent().siblings('div').hide();
if(i == 0) {
$(this).parent().siblings('.about-5-2').show();
$(this).addClass("current").siblings().removeClass("current");
}
if(i == 1) {
$(this).parent().siblings('.about-5-3').show();
$(this).addClass("current").siblings().removeClass("current");
}
if(i == 2) {
$(this).parent().siblings('.about-5-4').show();
$(this).addClass("current").siblings().removeClass("current");
}
if(i == 3) {
$(this).parent().siblings('.about-5-5').show();
$(this).addClass("current").siblings().removeClass("current");
}
}
)
})