jquery輪播圖詳解，40行代碼便可簡單解決。

時間 2019-11-17

原文原文鏈接

我在兩個月之前沒有接觸過html,css,jquery,javascript。今天我卻在這裏分享一篇技術貼，可能在技術大牛面前個人文章漏洞百出，也請斧正。javascript

能夠看出來，不管是div+css佈局仍是jquery其實真的很簡單，只要不停的練習就會有很大進步。天天150行代碼，會幫助咱們走的更遠。對於編程對於腳本語言，咱們這樣的學生娃沒有和比人同樣初中，高中就開始研究，要想走在時代的前沿須要怎樣的努力和毅力，是咱們一類人須要思考的方向。css

下面解釋下焦點圖，焦點圖使用範圍很是廣，banner和animation很容易抓住用戶的眼球，因此作好這個也就是一個網頁一個app的關鍵之一。html

焦點圖實現的方式不少種，能夠是css的jjq的甚至其餘框架的，jq最近很火這裏以此舉例。前端

下面進一段html代碼：html5

<!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標籤是提供左右按鈕，電機能夠實現左右滑動。java

下面附上css代碼：jquery

@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。css3

下面附上jquery代碼:web

<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（）就能夠輕鬆搞定。在網上看到不少朋友也有分享，後面我會附上不少的html5的新功能，還有w3c標準以及css3的各類新鮮玩意。你們一塊兒交流學習，共同進步。編程

我是自學er,也沒有啥子技術，只是愛好，興趣使然，能夠一步一步的走進去，發現web前端的更深層的東西，天天都在瞻仰大山，攀爬中，遲早有一天會登上高山，而後創造高山。