jQuery的無縫滾動,幻燈片

  1. 無縫滾動
    <pre id="line1"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動</title> <style type="text/css"> body,ul,li{margin:0;padding:0}
    ul{list-style:none;}
    .slide{
    width:500px;
    height:100px;
    border:1px solid #ddd;
    margin:20px auto 0;
    position:relative;
    overflow:hidden;
    }
    .slide ul{
    position:absolute;/相對于slide進行絕對定位/
    width:1000px;/比slide寬度大一倍,做這種連續滾動效果的時候,要在后面把內容復制一份/
    height:100px;
    left:0;/可以改變該值讓其動起來/
    top:0;
    }
    .slide ul li{
    width:90px;
    height:90px;
    margin:5px;
    background-color:#ccc;
    line-height:90px;
    text-align: center;
    font-size:30px;
    float:left;
    }
    .btns{
    width:500px;
    height:50px;
    margin:10px auto 0;
    } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> (function(){ varul = $('#slide ul');
    var left = 0;
    var deraction = 2;//每次滾動的距離

         //內容為兩套li
         $ul.html($ul.html() + $ul.html());
    
         //反復循環定時器,30ms動一下可以看起來比較平滑
         var timer = setInterval(move, 30);
    
         function move(){
             left -= deraction;
             //當第2套li完全顯示出來的時候,整個移回原點重新移動,實現向左連續滾動
             if(left < -500){
                 left = 0;
             }
             //瞬間跳回,實現向右連續滾動
             if(left > 0){
                 left = -500;
             }
    
             $ul.css({left: left});
         }
    
         $('#btn1').click(function() {
             deraction = 2;
         });
         $('#btn2').click(function() {
             deraction = -2;
         });
    
         $('#slide').mouseover(function() {
             clearInterval(timer);
         });
         $('#slide').mouseout(function() {
             timer = setInterval(move,30);
         });
     }) </script>  </head>  <body>  <div class="btns">  <input type="button" name="" value="向左" id="btn1">  <input type="button" name="" value="向右" id="btn2">  </div>  <div class="slide" id="slide">  <ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  </ul>  </div>  </body>  </html></pre>
    

效果如圖
[圖片上傳失敗...(image-178d03-1535696474925)]

2)幻燈片
html代碼

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>幻燈片</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/slide.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
<div class="center_con">

    <div class="slide fl">
        <ul class="slide_pics">
            <li><a href=""><img src="images/slide01.jpg" alt="幻燈片" /></a></li>
            <li><a href=""><img src="images/slide02.jpg" alt="幻燈片" /></a></li>
            <li><a href=""><img src="images/slide03.jpg" alt="幻燈片" /></a></li>
            <li><a href=""><img src="images/slide04.jpg" alt="幻燈片" /></a></li>
        </ul>
        <div class="prev"></div>
        <div class="next"></div>
        <ul class="points">
            <!-- 動態創建小圓點
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
    </div>

</div>

</body>
</html>

css代碼

body{
font-family: 'Microsoft Yahei';
color: #666;
font-size: 12px;
}

.center_con{
width: 600px;
height: 400px;
/background-color: cyan;/
margin: 50px auto 0;
}

/* ----------幻燈片樣式---------- /
.slide{
width: 600px;
height: 400px;
position: relative;/
父容器要設置定位,才能讓子元素相對父容器定位 */
overflow:hidden;
}
.slide .slide_pics{
width: 600px;
height: 400px;
left:0;
top:0;
position:relative;
}
.slide .slide_pics li{
width: 600px;
height: 400px;
left:0;
top:0;
position:absolute;
}

/* 左右翻頁箭頭樣式 /
.prev,.next{
width: 20px;
height: 24px;
position: absolute;/
相對父容器進行絕對定位 /
left:10px;
top:188px;
cursor: pointer;/
鼠標指針成手形 */
background: url(../images/icons.png) 0px -450px no-repeat;
}
.next{
left: 570px;
background: url(../images/icons.png) 0px -500px no-repeat;
}

/* 小圓點樣式 /
.points{
position: absolute;/
塊元素默認寬度為父寬度的100%,定位之后就變成行內塊了,它不能繼承父的寬度,如果沒有設置寬高,就由內容決定,所以也必須給它一個寬度 /
width: 100%;
height: 11px;
/
background-color: red;/
left: 0;
bottom: 9px;
text-align: center;/
行內塊的居中方式 /
font-size: 0px;/
去掉行內塊間隙,它引起小圓點沒有挨緊,并且向下超出高度范圍 /
}
.points li{
width: 11px;
height: 11px;
display: inline-block;
background-color: #9f9f9f;
margin: 0 5px;
border-radius: 50%;/
設置圓角,優雅降級,更好效果請升級瀏覽器,不兼容IE */
}
.points .active{
background-color: #cecece;
}

jQuery代碼

(function(){ varli = ('.slide_pics li'); var len =li.length;//4張
var prev =('.prev');//左按鈕
var next =('.next');//右按鈕
var nextli = 0;//將要運動過來的li
var nowli = 0;//當前要離開的li
var timer = null;

//除第一個li,都定位到右側
$li.not(':first').css({left:600});

//動態創建小圓點
$li.each(function(index){
    //創建li
    var $sli = $('<li></li>');
    //第一個li添加選中樣式
    if(index == 0){
        $sli.addClass('active');
    }
    //將小圓點的li添加到ul中
    $sli.appendTo('.points');
})

$points = $('.points li');
// alert($points.length);//4個小圓點

//小圓點的點擊事件
$points.click(function() {
    nextli = $(this).index();
    //當點擊當前張的小圓點時,不做任何操作,防止跳變的Bug
    if(nextli == nowli){
        return;
    }
    move();
    $(this).addClass('active').siblings().removeClass('active');
});

//左按鈕的點擊事件
$prev.click(function() {
    nextli--;
    move();
    //改變圓點樣式
    $points.eq(nextli).addClass('active').siblings().removeClass('active');
});

//右按鈕的點擊事件
$next.click(function() {
    nextli++;
    move();
    //改變圓點樣式
    $points.eq(nextli).addClass('active').siblings().removeClass('active');
});

//針對外層的slide做鼠標進入和離開事件,因為鼠標指針有可能進入到左右翻頁和小圓點的范圍
//mouseenter使鼠標進入子元素也能清除定時器
$('.slide').mouseenter(function() {
    clearInterval(timer);
});
$('.slide').mouseleave(function() {
    timer = setInterval(autoplay, 3000);
});

//定時器循環自動播放
timer = setInterval(autoplay, 3000);

//自動播放的邏輯與點擊下一張是相同的
function autoplay(){
    nextli++;
    move();
    //改變圓點樣式
    $points.eq(nextli).addClass('active').siblings().removeClass('active');
}

function move(){
    //向右走到第一張,再繼續走時
    if(nextli < 0){
        nextli = len - 1;//將要來的是最后一張
        nowli = 0;//要離開的是第一張
        $li.eq(nextli).css({left:-600});//把最后一張定位到左側,準備進入
        $li.eq(nowli).stop().animate({left: 600});//離開的第一張走到右側
        $li.eq(nextli).stop().animate({left: 0});//馬上要進來的最后一張走進來
        nowli = nextli;//要離開的賦值為剛進入的最后一張
        return;//下邊是正常情況的,不執行,直接返回
    }
    //向左走到最后一張,再繼續走時
    if(nextli > len - 1){
        nextli = 0;//將要來的是第一張
        nowli = len - 1;//要離開的是最后一張
        $li.eq(nextli).css({left:600});//把第一張定位到右側,準備進入
        $li.eq(nowli).stop().animate({left: -600});//離開的最后一張走到左側
        $li.eq(nextli).stop().animate({left: 0});//馬上要進來的第一張走進來
        nowli = nextli;//要離開的賦值為剛進入的第一張
        return;//下邊是正常情況的,不執行,直接返回
    }

    if(nextli > nowli){
        //馬上要進來的這張瞬間移動到右邊
        $li.eq(nextli).css({left:600});
        //當前這張離開
        $li.eq(nowli).stop().animate({left: -600});
    }else{
        //馬上要進來的這張瞬間移動到左邊
        $li.eq(nextli).css({left:-600});
        //當前這張離開
        $li.eq(nowli).stop().animate({left: 600});
    }
    //馬上要進來的這張走到0的位置
    $li.eq(nextli).stop().animate({left: 0});
    nowli = nextli;
}

})

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容