jquery轮播图
效果图
需求：对右侧杂志进行轮播，左侧视口放大显示，对正在轮播的杂志图片向上放大。鼠标放上小的杂志图，则停止轮播，鼠标离开小的杂志图，则从这张杂志往后轮播。
html
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>中国博士后工作数字展馆title>
<meta name="description" content="An experimental 3D room template that aims to show exhibition details in an interesting way" />
<meta name="keywords" content="3d, room, exhibition, gallery, perspective, animation, web design, template" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../img/bsm.png">
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/weui.css" />
<link rel="stylesheet" type="text/css" href="../css/weuix.css" />
<link rel="stylesheet" type="text/css" href="../css/animations.css" />
<link rel="stylesheet" href="../iconfont/iconfont.css" />
<link href="../css/animaPhoto.css" rel="stylesheet" type="text/css" />
<script src="../js/zepto.min.js">script>
<script src="../js/zepto.weui.js">script>
<script type="text/javascript" src="../js/jquery.min.js" >script>
<script src="../js/managementInnovation.js">script>
<script>
$(function(){
jQuery.noConflict();
// $('#t1').tab({defaultIndex:2,activeClass:"bg-tab-click"});
$('#t1').tab({defaultIndex:6,activeClass:"bg-tab-click"});
})
script>
head>
<body>
<div class="container fore-bg">
<div id="managementInnovation-1" class="body-bg managementInnovation-page1-1-bg">
<div id="managementInnovationPage1" class="management-innovation-page1-1">
<div class="managementInnovation-page1-1-left">
<div class="managementInnovation-page1-1-left-viewpoint">div>
<p class="managementInnovation-page1-1-left-time">p>
div>
<div class="managementInnovation-page1-1-right">
<div class="managementInnovation-page1-1-right-title">
<p>创办《中国博士后》杂志p>
<p style="text-align: right;">打造重要宣传阵地和交流平台p>
div>
<div class="managementInnovation-page1-1-right-word">
《中国博士后》杂志创刊于1994年，是由全国博士后管委会指导、中国博士后科学基金会主办的国内唯一一份反映全国博士后工作的综合性杂志。杂志突出权威性、指导性、可读性，致力于打造全国博士后工作的重要宣传阵地和交流平台。杂志为双月刊,主要栏目包括：要闻一览、工作通讯、特别报道、专题策划、经验交流、理论探讨、人物写真、海外掠影、生活随笔、文艺欣赏等。目前，杂志拥有高层次、成规模、较稳定的读者群。
div>
<div class="managementInnovation-page1-1-right-imgs">
<span>
<img class="managementInnovation-page1-1-right-img-unselect" src="../img/page/managementInnovation/1109/page1/2014-03.jpg">
<p>2014p>
span>
<span>
<img class="managementInnovation-page1-1-right-img-unselect" src="../img/page/managementInnovation/1109/page1/2015-05.jpg">
<p>2015p>
span>
<span>
<img class="managementInnovation-page1-1-right-img-unselect" src="../img/page/managementInnovation/1109/page1/2016-06.jpg">
<p>2016p>
span>
<span>
<img class="managementInnovation-page1-1-right-img-unselect" src="../img/page/managementInnovation/1109/page1/2017-02.jpg">
<p>2017p>
span>
<span>
<img class="managementInnovation-page1-1-right-img-unselect" src="../img/page/managementInnovation/1109/page1/2018-04.jpg">
<p>2018p>
span>
<span>
<img class="managementInnovation-page1-1-right-img-unselect" src="../img/page/managementInnovation/1109/page1/2019-01.jpg">
<p>2019p>
span>
div>
<div class="managementInnovation-page1-1-right-border">div>
div>
div>
div>
<div class="body-nav-menu weui-tab" id="t1">
<div class="weui-tab-nav">
<a href="../page/pageFirst.html" id="backHome" class="weui-navbar__item weui-nav-red"> <img class="bady-tab" src="../img/main/tab-home.png"> a>
<a href="../index.html" id="backfrom" class="weui-navbar__item weui-nav-red"> <img class="bady-tab" src="../img/main/tab-tab.png"> a>
<a href="javascript:" id="pageBack" class="weui-navbar__item weui-nav-red"> <img class="bady-tab" src="../img/main/tab-back.png"> a>
<a href="javascript:" id="time1" class="weui-navbar__item weui-nav-red"> <img class="bady-tab" src="../img/main/tab-play.png"> a>
<a href="javascript:" id="pageNext" class="weui-navbar__item weui-nav-red"> <img class="bady-tab" src="../img/main/tab-right.png"> a>
div>
div>
<div class="body-nav-left page-hidden" id="navMenu">
<span><img src="../img/main/nav-bg.png">快捷导航span>
div>
<div id="bodyNavBg" class="body-nav-bg body-nav-menu-hidden">
<div id="bodyNavMenuBody" class="body-nav-menu-body body-nav-menu-hidden">
<img class="body-nav-close" id="bodyNavClose" src="../img/main/body-nav-close.png">
<div class="body-nav-menu-top">
<img src="../img/main/nav-bg.png">
<span>快捷导航span>
div>
<a href=""><p>中国博士后事业奠基人 -- 邓小平p>a>
<a href=""><p>历任党和国家主要领导人的高度重视p>a>
<a href=""><p>各级领导和各界人士的关心和支持p>a>
div>
div>
div>
<span id="timeCache" class="cache">4span>
<span id="urlCache" class="cache">developmentHistory.htmlspan>
<span id="urlCacheIndex" class="cache">2span>
<span id="urlCacheNext" class="cache">../index.htmlspan>
body>
<script src="../js/index.js">script>
<script src="../js/animaPhoto.js">script>
<script type="text/javascript">
/*返回首页*/
backHome();
pageNextClick();
pageBackClick();
backFromInit();
// talentEchartsInit();
script>
html>
CSS
/* talent 1109 创新管理*/
.managementInnovation-page1-1-bg{
background: url("../img/page/managementInnovation/1109/page1/bg_01.png") no-repeat;
background-size: 100% 100%;
}
.managementInnovation-page1-1-left{
position: absolute;
left: 6vw;
top: 10vh;
}
/*左侧轮播视口*/
.managementInnovation-page1-1-left-viewpoint{
width: 24vw;
height: 72vh;
background-image: linear-gradient(90deg,
);
box-shadow: 0px 8px 30px 0px
rgba(0, 0, 0, 0.23);
background: url("../img/page/managementInnovation/1109/page1/2014-03.jpg") no-repeat;
background-size: 100% 100%;
}
/*左侧底部出版时间*/
.managementInnovation-page1-1-left-time{
font-size: 2vh;
color: rgb(0,0,0);
text-align: center;
margin-top: 2vh;
}
/*右侧*/
.managementInnovation-page1-1-right{
position: absolute;
right: 6vw;
top: 10vh;
width: 62vw;
height: 70vh;
}
/*右侧标题*/
.managementInnovation-page1-1-right-title{
color: forestgreen;
font-size: 4vh;
}
/*右侧文字简介*/
.managementInnovation-page1-1-right-word{
text-indent: 2em;
color:rgb(0,0,0);
font-family: FZDaHei-B02S;
text-align: left;
font-size: 3vh;
margin-top: 2vh;
}
/*右侧组图*/
.managementInnovation-page1-1-right-imgs{
height: 20vh;
position: absolute;
top: 44vh;
}
.managementInnovation-page1-1-right-imgs span{
float: left;
display: inline-block;
font-family: FZDaHei-B02S;
color:rgb(0,0,0);
text-align: center;
font-size: 16px;
}
.managementInnovation-page1-1-right-img-select{
width: 9vw;
margin-left: 1vw;
margin-right: 1vw;
display: inline-block;
margin-top: -3vh;
}
.managementInnovation-page1-1-right-img-unselect{
width: 8vw;
margin-left: 1vw;
margin-right: 1vw;
display: inline-block;
}
/*右侧底边线*/
.managementInnovation-page1-1-right-border{
height: 2vh;
width: 64vw;
background-color: #ffffff;
box-shadow: 0px 10px 15px 0px
rgba(0,0,0,0.28);
position: absolute;
top: 70vh;
}
JS
var timer = null; // 自动播放定时器
/**
* 页面加载完成后执行
*/
$(document).ready(function(){
managemanetInnovationInit();
autoPlay(0);
});
function managemanetInnovationInit() {
/**
* 给轮播元素绑定click事件
*/
jQuery(".managementInnovation-page1-1-right-img-unselect").on("click", function(){
var img = jQuery(this);
img.parent().siblings("").children("img").removeClass("managementInnovation-page1-1-right-img-select");
img.parent().siblings().children("img").addClass("managementInnovation-page1-1-right-img-unselect");
img.removeClass("managementInnovation-page1-1-right-img-unselect");
img.addClass("managementInnovation-page1-1-right-img-select");
// 给左侧视口更换图片
jQuery(".managementInnovation-page1-1-left-viewpoint").css("background-image","url("+img.context.currentSrc+")");
// 换出版时间
jQuery(".managementInnovation-page1-1-left-time").html(img.siblings().first().html()+"年出版");
})
/**
* 给轮播元素绑定鼠标over事件
*/
jQuery(".managementInnovation-page1-1-right-img-unselect").on("mouseover",function () {
var img = jQuery(this);
img.parent().siblings("").children("img").removeClass("managementInnovation-page1-1-right-img-select");
img.parent().siblings().children("img").addClass("managementInnovation-page1-1-right-img-unselect");
img.removeClass("managementInnovation-page1-1-right-img-unselect");
img.addClass("managementInnovation-page1-1-right-img-select");
// 给左侧视口更换图片
jQuery(".managementInnovation-page1-1-left-viewpoint").css("background-image","url("+img.context.currentSrc+")");
clearInterval(timer);
})
/**
* 给轮播元素绑定鼠标leave事件
*/
jQuery(".managementInnovation-page1-1-right-img-unselect").on("mouseleave",function () {
var img = jQuery(this);
autoPlay(img.index());
})
};
/**
* 从下标为index的图片开始轮播
* @param index
*/
function autoPlay(index) {
/**
* 自动播放，2秒播放一次，无线循环
*/
var num = index;
var imgArr =jQuery(".managementInnovation-page1-1-right-imgs img");
timer=setInterval(function () {
if(num > imgArr.length - 1){
num=0;
}
imgArr[num].click();
num++;
},2000);
}
思路梳理：
总体分为两个部分，一个是绑定事件，一个是实现轮播逻辑。需要在外部
绑定事件：
- 给每一张要轮播的图片都绑定上click事件，实现点击时，自身放大，视口图片更换为选中的图片。
- 给每一张要轮播的图片绑定mouseover事件，实现鼠标放上时，清除轮播定时器，自身放大，视口图片更换为选中的图片
- 给每一张要轮播的图片绑定mouseleave事件，实现鼠标离开时，增加定时器，从该张往后继续轮播。
实现轮播逻辑：
在最外层定义一个定时器变量，实现一个轮播函数autoPlay，在轮播函数里增加定时器，在元素mouseover事件上，清除这个定时器。