|
|
@@ -7,66 +7,75 @@
|
|
|
<title>Document</title>
|
|
|
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_z46pr7nyg5p.css">
|
|
|
<style>
|
|
|
- *{
|
|
|
+ * {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
- li{
|
|
|
+
|
|
|
+ li {
|
|
|
list-style: none;
|
|
|
}
|
|
|
|
|
|
- .swiper-content{
|
|
|
+ .swiper-content {
|
|
|
width: 1226px;
|
|
|
height: 460px;
|
|
|
margin: 100px auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
- .swiper-nav{
|
|
|
+ .swiper-nav {
|
|
|
width: 234px;
|
|
|
height: 100%;
|
|
|
- background-color: rgba(105, 101, 101,0.6);
|
|
|
+ background-color: rgba(105, 101, 101, 0.6);
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
- .swiper-nav ul{
|
|
|
+
|
|
|
+ .swiper-nav ul {
|
|
|
padding: 30px 0;
|
|
|
}
|
|
|
- .swiper-nav ul li{
|
|
|
+
|
|
|
+ .swiper-nav ul li {
|
|
|
color: #fff;
|
|
|
font-size: 14px;
|
|
|
padding: 0 20px;
|
|
|
height: 42px;
|
|
|
line-height: 42px;
|
|
|
}
|
|
|
- .swiper-nav ul li:hover{
|
|
|
+
|
|
|
+ .swiper-nav ul li:hover {
|
|
|
background-color: #ff6700;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .swiper-nav li i{
|
|
|
+
|
|
|
+ .swiper-nav li i {
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
- .swiper-content .swiper-img img{
|
|
|
+ .swiper-content .swiper-img img {
|
|
|
width: 1226px;
|
|
|
height: 460px;
|
|
|
}
|
|
|
- .swiper-content .swiper-img li{
|
|
|
+
|
|
|
+ .swiper-content .swiper-img li {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
display: none;
|
|
|
}
|
|
|
- .swiper-content .swiper-img .active{
|
|
|
+
|
|
|
+ .swiper-content .swiper-img .active {
|
|
|
display: block;
|
|
|
}
|
|
|
- .swiper-btn .arr-btn{
|
|
|
+
|
|
|
+ .swiper-btn .arr-btn {
|
|
|
position: absolute;
|
|
|
- top:50%;
|
|
|
+ top: 50%;
|
|
|
margin-top: -35px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .swiper-btn .arr-btn .left-btn{
|
|
|
+
|
|
|
+ .swiper-btn .arr-btn .left-btn {
|
|
|
position: absolute;
|
|
|
left: 234px;
|
|
|
width: 41px;
|
|
|
@@ -74,11 +83,13 @@
|
|
|
background-image: url("./image/icon-slides.png");
|
|
|
background-position: -84px 0;
|
|
|
}
|
|
|
- .swiper-btn .arr-btn .left-btn:hover{
|
|
|
+
|
|
|
+ .swiper-btn .arr-btn .left-btn:hover {
|
|
|
background-position: 0 0;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .swiper-btn .arr-btn .right-btn{
|
|
|
+
|
|
|
+ .swiper-btn .arr-btn .right-btn {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
width: 41px;
|
|
|
@@ -86,30 +97,35 @@
|
|
|
background-image: url("./image/icon-slides.png");
|
|
|
background-position: -125px 0;
|
|
|
}
|
|
|
- .swiper-btn .arr-btn .right-btn:hover{
|
|
|
+
|
|
|
+ .swiper-btn .arr-btn .right-btn:hover {
|
|
|
background-position: -41px 0;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .swiper-btn .dot-btn ul{
|
|
|
+
|
|
|
+ .swiper-btn .dot-btn ul {
|
|
|
position: absolute;
|
|
|
right: 30px;
|
|
|
bottom: 30px;
|
|
|
}
|
|
|
- .swiper-btn .dot-btn li{
|
|
|
+
|
|
|
+ .swiper-btn .dot-btn li {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
- background-color: rgba(0,0,0,.4);
|
|
|
- border:2px solid hsla(0,0%,100%,.3);
|
|
|
+ background-color: rgba(0, 0, 0, .4);
|
|
|
+ border: 2px solid hsla(0, 0%, 100%, .3);
|
|
|
border-radius: 50%;
|
|
|
float: left;
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
- .swiper-btn .dot-btn li:hover{
|
|
|
+
|
|
|
+ .swiper-btn .dot-btn li:hover {
|
|
|
background: hsla(0, 0%, 100%, .4);
|
|
|
border-color: rgba(0, 0, 0, .4);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .swiper-btn .dot-btn .active{
|
|
|
+
|
|
|
+ .swiper-btn .dot-btn .active {
|
|
|
background: hsla(0, 0%, 100%, .4);
|
|
|
border-color: rgba(0, 0, 0, .4);
|
|
|
}
|
|
|
@@ -180,23 +196,29 @@
|
|
|
// 获取小点按钮
|
|
|
var dotItem = document.getElementsByClassName("dot-item");
|
|
|
// 获取轮播图图片
|
|
|
- var swiperItem = document.getElementsByClassName("swiper-item");
|
|
|
+ var swiperItem = document.getElementsByClassName("swiper-item");
|
|
|
// 获取向左按钮
|
|
|
var leftBtn = document.getElementsByClassName("left-btn");
|
|
|
leftBtn = leftBtn[0];
|
|
|
// 获取向右按钮
|
|
|
var rightBtn = document.getElementsByClassName("right-btn");
|
|
|
rightBtn = rightBtn[0];
|
|
|
+ // 获取轮播图容器
|
|
|
+ var swiperContent = document.getElementsByClassName("swiper-content");
|
|
|
+ swiperContent = swiperContent[0];
|
|
|
|
|
|
// 定义变量保存当前是第几个轮播图
|
|
|
var nowIndex = 0;
|
|
|
|
|
|
+ // 定义定时函数的接收变量
|
|
|
+ var timer = null;
|
|
|
+
|
|
|
// 把切换图片封装成一个函数
|
|
|
// 你告诉这个显示第几张图片即可
|
|
|
// k 带标要显示的轮播图
|
|
|
- function changeImg(k){
|
|
|
+ function changeImg(k) {
|
|
|
// 移除所有被选中的的轮播图和小圆点
|
|
|
- for(var i=0;i<swiperItem.length;i++){
|
|
|
+ for (var i = 0; i < swiperItem.length; i++) {
|
|
|
// 移除轮播图选中效果
|
|
|
swiperItem[i].classList.remove("active");
|
|
|
// 移除小圆点选中效果
|
|
|
@@ -209,16 +231,16 @@
|
|
|
}
|
|
|
|
|
|
// 第二步为小圆点绑定事件
|
|
|
- for(var i=0;i<dotItem.length;i++){
|
|
|
+ for (var i = 0; i < dotItem.length; i++) {
|
|
|
// 为每一个绑定事件的标签分配一个编号
|
|
|
dotItem[i].index = i;
|
|
|
// 为每一个按钮绑定事件
|
|
|
- dotItem[i].onclick = function(){
|
|
|
+ dotItem[i].onclick = function () {
|
|
|
// 同步当前索引
|
|
|
nowIndex = this.index;
|
|
|
// 调用切换图片函数
|
|
|
changeImg(nowIndex);
|
|
|
-
|
|
|
+
|
|
|
// console.log(this.index);
|
|
|
// // 第四步 移除没有被选中的轮播图及效果
|
|
|
// for(var j=0;j<dotItem.length;j++){
|
|
|
@@ -235,11 +257,11 @@
|
|
|
|
|
|
|
|
|
// 为向右按钮绑定事件
|
|
|
- rightBtn.onclick = function(){
|
|
|
+ rightBtn.onclick = function () {
|
|
|
// 每次点击向右按钮进行 让当前索引nowIndex +1操作
|
|
|
nowIndex++;
|
|
|
// 如果超出了轮播图数量的范围 返回第一张图片
|
|
|
- if(nowIndex>=swiperItem.length){
|
|
|
+ if (nowIndex >= swiperItem.length) {
|
|
|
nowIndex = 0
|
|
|
}
|
|
|
|
|
|
@@ -249,7 +271,7 @@
|
|
|
|
|
|
// nowIndex++;
|
|
|
// nowIndex%=6;
|
|
|
-
|
|
|
+
|
|
|
// for(var i=0;i<swiperItem.length;i++){
|
|
|
// swiperItem[i].classList.remove("active");
|
|
|
// dotItem[i].classList.remove("active");
|
|
|
@@ -258,15 +280,38 @@
|
|
|
// dotItem[nowIndex].classList.add("active");
|
|
|
}
|
|
|
// 为向左按钮绑定事件
|
|
|
- leftBtn.onclick = function(){
|
|
|
+ leftBtn.onclick = function () {
|
|
|
nowIndex--;
|
|
|
- if(nowIndex<0){
|
|
|
- nowIndex = swiperItem.length-1;
|
|
|
+ if (nowIndex < 0) {
|
|
|
+ nowIndex = swiperItem.length - 1;
|
|
|
}
|
|
|
changeImg(nowIndex);
|
|
|
}
|
|
|
|
|
|
- </script>
|
|
|
+ // 定时播放
|
|
|
+ function play() {
|
|
|
+ timer = setInterval(function () {
|
|
|
+ nowIndex++
|
|
|
+ if (nowIndex >= swiperItem.length) {
|
|
|
+ nowIndex = 0;
|
|
|
+ }
|
|
|
+ changeImg(nowIndex)
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用定时播放函数
|
|
|
+ play();
|
|
|
+
|
|
|
+ // 鼠标移入清除定时函数
|
|
|
+ swiperContent.onmouseenter = function () {
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ // 鼠标移出继续定时轮播
|
|
|
+ swiperContent.onmouseleave = function () {
|
|
|
+ play();
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
