图片左右轮播

最新推荐文章于 2022-08-22 09:05:19 发布

liiuweii

最新推荐文章于 2022-08-22 09:05:19 发布

阅读量321

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/liiuweii/article/details/51006267

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏


  
  <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>

说明：每个图片轮播都必须放在 class="imageRotation" 的容器中，所有图片放在 class="imageBox" 的容器中，标题放在 class="titleBox" 的容器中，图标放在 class="icoBox" 的容器中。图片、标题和图标的数目要相等。

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;
    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;
    }

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<=3 ? 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);
        });
    });
});

这三个配置可以更改

intervalTime = 4000,  // 间隔时间
imageSpeed =500,  // 图片动画执行速度
titleSpeed =250;  // 标题动画执行速度




第二个版本

<!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.png" /></a>
 <a href="http://www.itxueyuan.org" target="_blank"><img src="images/2.png" /></a>
 <a href="http://www.itxueyuan.org" target="_blank"><img src="images/3.png" /></a>
 <a href="http://www.itxueyuan.org" target="_blank"><img src="images/4.png" /></a>
        <a href="http://www.itxueyuan.org" target="_blank"><img src="images/5.png" /></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>

liiuweii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片左右轮播

class="imageRotation"> class="imageBox"> href="http://www.itxueyuan.org" target="_blank"> src="images/1.jpg" /> href="http://www.itxueyuan.org" target="_blank"> src="images/2.jp
复制链接

扫一扫

专栏目录