JS圖片輪播[左右輪播

時間 2019-11-18
原文原文鏈接
直接能夠用,網上摘下來的!javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS圖片輪播特效-左右切換</title>
 
<style type="text/css">
.imageRotation{
 height:270px;
 width:570px;
 overflow:hidden;  /*--超出容器的全部元素都不可見--*/
 position:relative;  /*--相對定位--*/
 border:10px solid #eee;
 bodrer-radius:5px;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 }
/*-------------圖片容器---------------*/
.imageBox{
 position:absolute;  /*--固定定位--*/
 height:270px;
 top:0px;
 left:0px;
 overflow:hidden;
 }
.imageBox img {
 display:block;
 height:270px;
 width:570px;
 float:left;
 border:none;
 }
/*-------------標題容器---------------*/
.titleBox{
 position:absolute;
 bottom:0px;
 width:570px;
 height:40px;
 overflow:hidden;
 }
.titleBox p{
 position:absolute;
 bottom:-40px;
 width:550px;
 height:40px;
 margin:0px;
 padding:0px 10px;
 line-height:40px;
 z-index:1;
 border-top:1px solid #000;
 background-color:#000;
 color:#fff;
 font-family:"微軟雅黑","yahei";
 opacity:0.5;
 -moz-opacity:0.5;
 -webkit-opacity:0.5;
 filter:alpha(opacity=50);
 }
.titleBox p span{
 opacity:1;
 -moz-opacity:1;
 -webkit-opacity:1;
 filter:alpha(opacity=100);
 }
.titleBox p.active{
 bottom:0px;
 }
/*-------------圖標容器---------------*/
.icoBox{
 position:absolute;  /*--固定定位--*/
 bottom:14px;
 right:15px;
 width:76px;
 height:12px;
 text-align:center;
 line-height:40px;
 z-index:2;
 }
.icoBox span{
 display:block;
 float:left;
 height:12px;
 width:12px;
 margin-left:3px;
 overflow:hidden;
 background:url("images/ico.png") 0px 0px no-repeat;
 cursor:pointer;
 }
.icoBox span.active {
 background-position:0px -12px;
 cursor:default;
 }
</style>
</head>
<body>
<div class="imageRotation"> 
 <div class="imageBox">
 <a href="http://www.itxueyuan.org" target="_blank"><img src="images/1.jpg" /></a>
 <a href="http://www.itxueyuan.org" target="_blank"><img src="images/2.jpg" /></a>
 <a href="http://www.itxueyuan.org" target="_blank"><img src="images/3.jpg" /></a>
 <a href="http://www.itxueyuan.org" target="_blank"><img src="images/4.jpg" /></a>
        <a href="http://www.itxueyuan.org" target="_blank"><img src="images/5.jpg" /></a>
 </div>
    <div class="titleBox">
     <p class="active"><span>第一張圖片標題</span></p>
        <p>第二張圖片標題</p>
        <p>第三張圖片標</p>
        <p>第四張圖片標題</p>
        <p>第五張圖片標題</p>
    </div>
 <div class="icoBox">
 <span class="active" rel="1">1</span>
 <span rel="2">2</span>
 <span rel="3">3</span>
 <span rel="4">4</span>
        <span rel="5">5</span>
 </div>
</div>
 
<script type="text/javascript" src="http://www.itxueyuan.org/uploads/javascript/jquery.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
 $(".imageRotation").each(function(){
 // 獲取有關參數
 var imageRotation = this,  // 圖片輪換容器
 imageBox = $(imageRotation).children(".imageBox")[0],  // 圖片容器
 titleBox = $(imageRotation).children(".titleBox")[0],  // 標題容器
 titleArr = $(titleBox).children(),  // 全部標題（數組）
 icoBox = $(imageRotation).children(".icoBox")[0],  // 圖標容器
 icoArr = $(icoBox).children(),  // 全部圖標（數組）
 imageWidth = $(imageRotation).width(),  // 圖片寬度
 imageNum = $(imageBox).children().size(),  // 圖片數量
 imageReelWidth = imageWidth*imageNum,  // 圖片容器寬度
 activeID = parseInt($($(icoBox).children(".active")[0]).attr("rel")),  // 當前圖片ID
 nextID = 0,  // 下張圖片ID
 setIntervalID,  // setInterval() 函數ID
 intervalTime = 4000,  // 間隔時間
 imageSpeed =500,  // 圖片動畫執行速度
 titleSpeed =250;  // 標題動畫執行速度
 // 設置 圖片容器 的寬度
 $(imageBox).css({'width' : imageReelWidth + "px"});
 // 圖片輪換函數
 var rotate=function(clickID){
 if(clickID){ nextID = clickID; }
 else{ nextID=activeID<=4 ? activeID+1 : 1; }
 // 交換圖標
 $(icoArr[activeID-1]).removeClass("active");
 $(icoArr[nextID-1]).addClass("active");
 // 交換標題
 $(titleArr[activeID-1]).animate(
 {bottom:"-40px"},
 titleSpeed,
 function(){
 $(titleArr[nextID-1]).animate({bottom:"0px"} , titleSpeed);
 }
 );
 // 交換圖片
 $(imageBox).animate({left:"-"+(nextID-1)*imageWidth+"px"} , imageSpeed);
 // 交換IP
 activeID = nextID;
 }
 setIntervalID=setInterval(rotate,intervalTime);
 $(imageBox).hover(
 function(){ clearInterval(setIntervalID); },
 function(){ setIntervalID=setInterval(rotate,intervalTime); }
 ); 
 $(icoArr).click(function(){
 clearInterval(setIntervalID);
 var clickID = parseInt($(this).attr("rel"));
 rotate(clickID);
 setIntervalID=setInterval(rotate,intervalTime);
 });
 });
});
</script>
 
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。