-
無縫滾動
<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">ul = $('#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代碼
li =
li.length;//4張
var ('.prev');//左按鈕
var ('.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;
}
})
