注：网页版右上方的悬浮框有目录索引
一、大致思路
- 主要实现
-
- 图片自动轮播
-
- 鼠标进入显示上一页下一页按钮。
-
- 鼠标点击按钮切换图片并停止自动轮播
- 鼠标点击按钮切换图片并停止自动轮播
1-1】h5 页面标签
<div id="picture">
<div id="picture_suzi">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="picture_suzi_show">
<a href="#"><img alt="左一张" id="picture_suzi_right" src="img/right.jpg"></a>
<a href="#"><img alt="右一张" id="picture_suzi_left" src="img/left.jpg"></a>
</div>
</div>
1-2】Script 代码
<script type="text/javascript">
// 数组 array ：存放每张图片 url
var sj; // 自动轮播事件对象
var i = 1; // 对应轮播图张数序号（1-6）
var array = ['img/img1.png', 'img/1989.jpg', 'img/img3.png', 'img/img4.png'];
// 对应鼠标进入事件
$('#picture_suzi_show').css("display", "none");
/**
* 按钮显示事件
*/
var $picture = $("#picture");
$picture.on("mouseover", function() {
$('#picture_suzi_show').css("display", "block");
});
$picture.on("mouseout", function() {
$('#picture_suzi_show').css("display", "none");
});
/**
* 按钮点击事件
* 上一张事件
*/
$('#picture_suzi_right').on("click", function() {
window.clearInterval(sj);
if(i === 1) {
alert("已经是第一张")
} else {
i = i - 1;
$('#picture').css("backgroundImage", "url(" + array[i - 1] + ")");
var $img = $('#picture_suzi li:nth-of-type(' + i + ')');
$img.siblings().css("background", "#333333");
$img.css("background", "orange");
}
});
/**
* 按钮点击事件
* 下一张事件（与上一张事件不一样？）
* 因为轮播本质和点击按钮效果一样
* 轮播也调用此方法
* 在轮播中调用此方法，在事件中调用此方法
*/
function asbd() {
if(i === array.length) {
alert("已经是最后一张")
} else {
i = i + 1;
$('#picture').css("backgroundImage", "url(" + array[i - 1] + ")");
var $img = $('#picture_suzi li:nth-of-type(' + i + ')');
$img.siblings().css("background", "#333333");
$img.css("background", "orange");
}
}
$('#picture_suzi_left').on("click", function() {
window.clearInterval(sj);
asbd();
});
/**
* 自动轮播事件
*/
$picture.css("backgroundImage", "url(" + array[i - 1] + ")");
$('#picture_suzi li:nth-of-type(' + i + ')').siblings().css("background", "#333333");
// 自动轮播
$(function() {
sj = window.setInterval(function() {
asbd();
if(i === array.length) {
i = 0;
}
}, 1500);
});
</script>
二、忘不了，你的 css
<style type="text/css">
#body{
text-align: center;
}
#picture{
position: relative;
width: 730px;
height:454px;
margin: 0 auto;
}
#picture_suzi{
position: absolute;
left: 50%;
margin-left: -96px;
bottom: 5px;
}
#picture_suzi ul{
display: inline-block;
margin: 0;
padding: 0;
}
#picture_suzi ul li{
list-style-type: none;
float: left;
width: 20px;
height: 20px;
line-height: 20px;
margin-left: 6px;
margin-right: 6px;
border-radius: 50% 50%;
text-align: center;
vertical-align: middle;
color: white;
}
#picture_suzi_show{
position: absolute;
top: 50%;
margin-top: -25px;
width: 730px;
}
#picture_suzi_show:after{
content:"";
display: block;
clear: both;
}
#picture_suzi_show img{
width: 50px;
height: 50px;
opacity: 0.4;
}
#picture_suzi_right{
float: left;
}
#picture_suzi_left{
float: right;
}
#picture_suzi li{
background-color: orange;
}
</style>
三、怕你忘记导入 jQuery
// 放在 <head></head> 对标签中使用
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>