很久没更了，因为我处于javaScript迷茫期了，我不知道怎样才算将javaScript学的很好，看了好几本书，打了下基础，基本的结构差不多可以清楚地知道，但是javascript代码没有css html直接，就算你你错了你也不知道哪里错了，很忧伤的事情，希望又看到这篇博文的人能给我一些建议。
然后最近就是去做一些页面培养一下整体的页面设计的感觉。结果我就碰到的轮播这个动态效果，看了很多人写的代码，然后理解别人的思想在试着自己敲。下面是一个自己敲得点击一个按钮就会切换图片的代码，之后还会更新轮播的代码。
21:44:35
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#banner_list a:not(:first-child)").hide();
var n = $("#banner_choose").length;
$("#banner_list a img").click(function () {
window.open($("#banner_list a").attr("href"), "_blank");
});
$("#banner_choose li ").click(function () {
var i = $(this).text() - 1;
$("#banner_list a").filter(":visible").fadeOut(50).parent().children().eq(i).fadeIn(500);
$(this).toggleClass("on");
$(this).siblings().removeClass("on");
$("#banner_list li ")
});
});
</script>
<div id="banner">
<div id="banner_list">
<a href="#" target="_blank"><img src="2.1.png" title="oo" name="oo" alt="那些让人失控的烘焙甜品"> </a>
<a href="#" target="_blank"><img src="2.2.png" title="oo" name="oo" alt="妈妈的爱心早餐表"> </a>
<a href="#" target="_blank"><img src="2.3.png" title="oo" name="oo" alt="春季必吃的滋补食物"> </a>
<a href="#" target="_blank"><img src="2.4.png" title="oo" name="oo" alt="十里桃花 灼灼芳华"> </a>
<a href="#" target="_blank"><img src="2.5.png" title="oo" name="oo" alt="食物挂起海洋风"> </a>
<a href="#" target="_blank"><img src="2.6.png" title="oo" name="oo" alt="信手拈来的排毒好物"> </a>
</div>
<ul id="banner_choose">
<li class="on"><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
</ul>
</div>
<style>
#banner {
width: 990px;
height: 400px;
border: 1px solid #ffaf0f;
}
#banner_list {
width: 990px;
height: 360px;
}
#banner_choose {
width: 950px;
height: 40px;
border: 1px solid #6f4f67;
position: relative;
top: -18px;
background: #000000;
filter: Alpha(Opacity=40);
opacity: 0.2
}
#banner_choose li {
list-style: none;
float: left;
text-align: center;
margin: 10px 5px;
border: 1px solid #ffaf0f;
width: 20px
}
#banner_choose li a {
line-height: 20px;
color: white
}
.on {
background-color: #528CE0
}
</style>
推荐一部javascript的书《javascrip权威指南》很重基础 ，很多不懂得看他会觉得很明了，有代码的讲解等等
另一种形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
}
.box {
width: 1000px;
height: 400px;
margin: 100px auto
}
.imgBox {
border: 1px solid #3CF;
width: 990px;
height: 400px;
position: relative
}
.imgBox img {
border: none
}
.imgBox .all {
display: none
}
/*图片隐藏*/
.imgBox a.cur_img {
display: inline-block
}
/*第一张图片显现*/
.title_bg {
width: 990px;
height: 40px;
position: relative;
bottom: 40px;
left: 0px;
background-color: #000;
filter: Alpha(Opacity=80);
opacity: 0.4
}
.imgId {
width: 990px;
height: 40px;
position: relative;
bottom: 110px;
left: 10px;
}
.imgId ul {
height: 40px;
width: 980px;
}
.imgId li {
display: inline;
z-index: 9999;
list-style: none;
width: 20px;
height: 20px;
color: #fff;
}
.imgId ul li a {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #6f4f67;
background: #999;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.imgId .cur_id {
background: #ffaf0f;
}
.imgId li a:hover {
color: #FFF;
}
#title {
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
}
#title:visited {
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="imgBox">
<a href="" title="" class="cur_img all"><img src="2.1.png"></a>
<a href="" title="" class="all"><img src="2.2.png"></a>
<a href="" title="" class="all"><img src="2.3.png"></a>
<a href="" title="" class="all"><img src="2.4.png"></a>
<a href="" title="" class="all"><img src="2.5.png"></a>
<a href="" title="" class="all"><img src="2.6.png"></a>
</div>
<div class="title_bg"></div>
<div class="img_title"><a href="" id="title">这是题目</a></div>
<div class="imgId">
<ul>
<li><a href="javaxriopt:void(0);" class="cur_id">1</a></li>
<li><a href="javaxriopt:void(0);">2</a></li>
<li><a href="javaxriopt:void(0);">3</a></li>
<li><a href="javaxriopt:void(0);">4</a></li>
<li><a href="javaxriopt:void(0);">5</a></li>
<li><a href="javaxriopt:void(0);">6</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var time = 2000;
var curImgId = 0;
var intervalId = setInterval(imgToggle, time);
$(".img_title a").text($(".cur_img").attr("tittle"));
$(".img_title a").attr("title", $(".cur_img").attr("title"));
$(".img_title a").attr("href", $(".cur_img").attr("href"));
$(".imgId a").click(function () {
clearInterval(intervalId);
$(".cur_img").css({display: "none"});
$(".cur_img").removeClass("cur_img");
$(".imgBox a").eq($(".imgBox a").index($(this))).fadeIn("slow");
$(".imgBox a").eq($(".imgId a")).index($(this)).addClass("cur_img");
$(".cur_id").removeClass("cur_id");
$(this).addClass("cur_id");
change();
intervalId = setInterval(imgToggle, time);
});
$(".img_title a").click(function () {
alert($(this).attr("href"));
});
$(".imgBox img").click(function () {
alert($(this).parent().attr("href"));
});
function imgToggle() {
curImgId = $(".imgId a").index($(".cur_id"));
$(".imgBox .all").css({display: "none"});
$(".cur_img").removeClass("cur_img");
if (curImgId == $(".imgId a").length - 1) {
curImgId = 0;
} else {
curImgId += 1;
}
$(".imgBox a").eq(curImgId).fadeIn("slow");
$(".imgBox a").eq(curImgId).addClass("cur_img");
$(".cur_id").removeClass("cur_id");
$(".imgId a").eq(curImgId).addClass("cur_id");
change();
}
function change() {
$(".img_title a").attr("title", $(".cur_img").attr("title"));
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("href", $(".cur_img").attr("href"));
}
});
</script>
</html>
浙公网安备 33010602011771号