4-3视频问题
来源：4-3 自动切换效果代码分析
夕落呀
2018-12-09 00:04:37
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端响应式项目</title>
<!-- <link rel="stylesheet" href="./css/reset.css"> -->
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="app" id="app">
<div class="box">
<div class="header">
<a href="#" class="header_address">北京</a>
<a href="#" class="header_form">
<input name="">
</a>
<a href="#" class="header_message">
<i class="fa fa-comment-o fa-lg"></i>
</a>
</div>
<div class="banner">
<div class="inner">
<div class="innerwraper"><img src="img/banner1.jpg" alt=""></div>
<div class="innerwraper"><img src="img/banner2.jpg" alt=""></div>
<div class="innerwraper"><img src="img/banner3.jpg" alt=""></div>
<div class="innerwraper"><img src="img/banner4.jpg" alt=""></div>
<div class="innerwraper"><img src="img/banner1.jpg" alt=""></div>
</div>
<div class="pagination">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="footer">
<div class="footericon icon_active">
<a class="icon_a">
<i class="fa fa-camera-retro fa-lg"></i>
</a>
我的
</div>
<div class="footericon">
<a class="icon_a">
<i class="fa fa-camera fa-lg"></i>
</a>
相机
</div>
<div class="footericon">
<a class="icon_a">
<i class="fa fa-calendar fa-lg"></i>
</a>
日历
</div>
<div class="footericon">
<a class="icon_a">
<i class="fa fa-envelope-open fa-lg"></i>
</a>
信息
</div>
</div>
</div>
<script type="text/javascript" src="./vendor/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
</body>
</html>
css
*{
margin:0;
padding:0;
list-style: none;
}
body{
font-family: "ralewayregular", Helvetica Neue, Helvetica,
Arial, Microsoft YaHei,sans-serif;
font-size: 14px;
}
a{
text-decoration: none;
}
.box{
max-width: 6.4rem;
margin:0 auto;
}
/*header样式*/
.header{
height: 44px;
display: -webkit-flex;
background: #ef1313;
padding:0 15px;
align-items: center;
}
.header_address{
margin-right:15px;
color:#fff;
}
.header_form{
flex:1;
}
.header_form input{
width: 100%;
height: 28px;
border: none;
box-sizing: border-box;
border-radius: 8px;
outline: none;
text-indent: 1em;
}
.header_message{
margin-left: 15px;
color: #fff;
}
/*banner样式*/
.banner{
width: 6.4rem;
height: 2.6rem;
overflow: hidden;
position: relative;
background: #666;
}
.inner{
position: relative;
width: 9999px;
top:0;
left:0;
}
.innerwraper{
width: 6.4rem;
float: left;
}
.innerwraper img{
width: 100%;
}
.pagination{
position: absolute;
width: 100%;
bottom: 10px;
text-align: center;
}
.pagination span{
display: inline-block;
width: .16rem;
height: .16rem;
border-radius: 50%;
background: #9aa499;
cursor: pointer;
margin: 0 5px;
}
.pagination .active{
background: #fff;
}
/*footer样式*/
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 54px;
display: -webkit-flex;
border-top: 1px solid #ccc;
text-align: center;
font-size: 12px;
}
.footericon{
flex: 1;
}
.icon_a{
display: block;
margin: 8px 0 ;
}
.icon_active{
color: #c9394a;
}
js
(function(doc, win) {
// document文档对象
var docEl = doc.documentElement,
// 窗口旋转或者大小改变事件
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
// 页面宽度
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 根据页面宽度设置页面html根元素的字体大小
if (clientWidth >= 640) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
// 如果不支持addEventListener方法（老版本IE）就退出当前函数
if (!doc.addEventListener) return;
// 绑定窗口变化事件（设置根字体）
win.addEventListener(resizeEvt, recalc, false);
// 绑定页面装载成功事件（设置根字体）
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
})(document, window);
var innerGroup = $('.innerwraper');
var spanGroup = $('.pagination span');
var imgWidth = $('.innerwraper img:first-child').eq(0).width();
var _index = 0;
var timer = null;
// 点击小圆点切换图片
spanGroup.on('click',function(){
_index = spanGroup.index($(this));
selectPic(_index);
});
function selectPic(num) {
clearInterval(timer);
spanGroup.eq(num).addClass('active').siblings().removeClass('active');
if(num %4 == 0){
spanGroup.eq(0).addClass('active').siblings().removeClass('active');
}
$('.inner').stop().animate({
left: -num*imgWidth
},1000,function(){
// 点击切换图片效果结束后，自动开始播放
timer = setInterval(go, 2000);
// 检查是否到最后一张
if(_index == innerGroup.length-1){
_index %= 4; // _index = _index % 4
$('.inner').css('left','0px');
}
})
}
function stopChange(){
if(timer){
clearInterval(timer);
}
}
function slide(){
$('.banner').mouseover(function(){
stopChange();
})
$('.banner').mouseout(function(){
autoPlay();
})
}
slide();
function autoPlay(){
timer = setInterval(go, 2000);
}
autoPlay();
function go(){
_index++;
if(_index >= innerGroup.length){
_index = 0;
}
selectPic(_index);
}
老师 想让它滑过banner的时候停止切换，离开的时候继续，我在里面加上下面的这段代码后好像不行，切换越来越快，为啥会出现这样 不是很理解
function stopChange(){
if(timer){
clearInterval(timer);
}
}
function slide(){
$('.banner').mouseover(function(){
stopChange();
})
$('.banner').mouseout(function(){
autoPlay();
})
}
slide();
1回答
-
Miss路
2018-12-09
同学，你好。这种实现轮播的方式不太适合做鼠标移入暂停播放的效果，你可以看看之前学过第一个阶段的js轮播图课程，这个课程的实现方式比较适合，或者采用你做过的jQuery作业的也可以。这个课程中的轮播，老师是讲了一个简单的轮播特效，功能不完备，重点是在移动布局方面。可以直接拿之前学过的功能比较完备的轮播图来用。
如果帮助到了你，欢迎采纳！
0
相似问题