很久没更了,因为我处于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 { 1000px; height: 400px; margin: 100px auto } .imgBox { border: 1px solid #3CF; 990px; height: 400px; position: relative } .imgBox img { border: none } .imgBox .all { display: none } /*图片隐藏*/ .imgBox a.cur_img { display: inline-block } /*第一张图片显现*/ .title_bg { 990px; height: 40px; position: relative; bottom: 40px; left: 0px; background-color: #000; filter: Alpha(Opacity=80); opacity: 0.4 } .imgId { 990px; height: 40px; position: relative; bottom: 110px; left: 10px; } .imgId ul { height: 40px; 980px; } .imgId li { display: inline; z-index: 9999; list-style: none; 20px; height: 20px; color: #fff; } .imgId ul li a { display: inline-block; 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>