我在兩個月以前沒有接觸過html,css,jquery,javascript。今天我卻在這裏分享一篇技術貼，可能在技術大牛面前我的文章漏洞百出，也請斧正。
可以看出來，無論是div+css佈局還是jquery其實真的很簡單，只要不停的練習就會有很大進步。每天150行代碼，會幫助我們走的更遠。對於編程對於腳本語言，我們這樣的學生娃沒有和比人一樣初中，高中就開始研究，要想走在時代的前沿需要怎樣的努力和毅力，是我們一類人需要思考的方向。
下面解釋下焦點圖，焦點圖使用範圍非常廣，banner和animation很容易抓住用戶的眼球，所以做好這個也就是一個網頁一個app的關鍵之一。
焦點圖實現的方式很多種，可以是css的jjq的甚至其他框架的，jq最近很火這裏以此舉例。
下面進一段html代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>橫向滑動的懸停焦點圖全代碼</title>
<link href="css/slidepic8.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="slideBox">
<ul>
<li><img src="image/Lslide3.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide4.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide5.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide6.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide2.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide1.jpg" alt="" width="300" height="480"/></li>
</ul>
<div class="spanBox">
<span class="active">q</span>
<span>a</span>
<span>z</span>
<span>w</span>
<span>s</span>
<span>x</span>
</div>
<div class="prev"><img src="image/left_arrow.jpg" width="15" height="50" alt=""/></div>
<div class="next"><img src="image/right_arrow.jpg" width="15" height="50" alt=""/></div>
</div>
</body>
</html>上面是html代碼，代碼的結構比較簡單，這裏解釋一下，ul標籤是要左右移動的，所以怎麼設置position屬性？，然後span標籤是提供索引和下標控制符，綁定動畫的。prev和next類名的div標籤是提供左右按鈕，電機可以實現左右滑動。
下面附上css代碼：
@charset "utf-8";
/* CSS Document */
*{
padding:0px;
border:0px;
margin:0px;
}
ul {
list-style:none;
}
.slideBox {
margin:50px auto;
width:300px;
height:480px;
box-shadow:2px 2px 10px #C38DD4;
border-radius:20px;
position:relative;
overflow:hidden;
}
.slideBox ul {
position:relative;
width:2000px;}
.slideBox ul li {
float:left;
width:300px;
height:480px;
position:relative;
}
.spanBox {
position:absolute;
width:300px;
height:20px;
bottom:10px;
left:80px;
}
.spanBox span {
width:18px;
height:18px;
margin-left:5px;
background-color:rgba(201,178,207,1.00);
float:left;
line-height:16px;
text-align:center;
text-shadow:2px 2px 2px #C5EBF0;
font-family:cabin-sketch;
font-size:15px;
}
.slideBox .spanBox .active {
background-color:rgba(155,83,244,0.79);
border:solid 1px #BEEBEC;
border-radius:4px;
}
.prev {
position:absolute;
left:0px;
top:320px;
float:left;
border-left:solid 1px rgba(251,245,246,1.00);
opacity:0.5;
}
.next {
width:15px;
height:50px;
position:absolute;
right:0px;
top:320px;
float:right;
border-right:solid 1px rgba(245,237,237,1.00);
opacity:0.5
}我是鏈接的外部css文件，然後請注意一下各種屬性和值。電腦端的話，html是相當於文本結構常說的dom，解碼的時候配合css屬性進行渲染，具體的屬性請大家自己測試，在四種常用的瀏覽器測試一下css屬性，我這裏就偷懶了沒有加上-webkit-，-moz-等等，大家如果需要用可以hack。
下面附上jquery代碼:
<script type="text/javascript">
$(document).ready(function(){
var slideBox = $(".slideBox");
var ul = slideBox.find("ul");
var oneWidth = slideBox.find("ul li").eq(0).width();
var number = slideBox.find(".spanBox span"); //注意分號 和逗號的用法
var timer = null;
var sw = 0;
//每個span綁定click事件，完成切換顏色和動畫，以及讀取參數值
number.on("click",function (){
$(this).addClass("active").siblings("span").removeClass("active");
sw=$(this).index();
ul.animate({
"right":oneWidth*sw, //ul標籤的動畫爲向左移動；
});
});
//左右按鈕的控制效果
$(".next").stop(true,true).click(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
$(".prev").stop(true,true).click(function (){
sw--;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
//定時器的使用，自動開始
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
//hover事件完成懸停和，左右圖標的動畫效果
slideBox.hover(function(){
$(".next,.prev").animate({
"opacity":1,
},200);
clearInterval(timer);
},function(){
$(".next,.prev").animate({
"opacity":0.5,
},500);
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
})
})
</script>在代碼中也分爲幾個部分，讓大家清晰明瞭。其實很簡單就是幾個參數，幾個函數，整個過程就click事件，hover時間，animate方法，setInterval（）就可以輕鬆搞定。
我是自學er,也沒有啥子技術，只是愛好，興趣使然，可以一步一步的走進去，發現web前端的更深層的東西，每天都在瞻仰大山，攀爬中，早晚有一天會登上高山，然後創造高山。