简易轮播图：
var imgArr = ["../img/a.jpeg", "../img/b.jpeg", "../img/c.jpeg", "../img/d.jpeg", "../img/e.jpeg"];
var iconArr = ["../img/icon_a.jpeg", "../img/icon_b.jpeg", "../img/icon_c.jpeg", "../img/icon_d.jpeg", "../img/icon_e.jpeg"];
var pre;
init();
function init() {
document.body.style.margin = "0px";
var div = createBg(document.body);
createIcon(div);
}
function createBg(parent) {
//图片容器
var div = document.createElement("div");
Object.assign(div.style, {
width: document.documentElement.offsetWidth + "px",
height: document.documentElement.offsetWidth / 3 + "px",
backgroundImage: "url(" + imgArr[0] + ")",
backgroundSize: "100% 100%",
transition: "all 1s"
});
parent.appendChild(div);
return div;
}
function createIcon(parent) {
//小图的容器
var margin = 40;
var padding = 10;
var height = (parent.offsetHeight - margin * 2 - padding * 4) / iconArr.length;
for (var i = 0; i < iconArr.length; i++) {
var img = new Image();
if (i === 0) pre = img;
img.src = iconArr[i];
Object.assign(img.style, {
position: "absolute",
display: "block",
border: "2px solid " + (i === 0 ? "#ff9d00" : "rgba(0,0,0,0)"),
height: (height - 4) + "px",
right: "50px",
top: margin + (height + (i === 0 ? 0 : padding)) * i + "px"
});
parent.appendChild(img);
img.addEventListener("click", clickHandler);
}
}
function clickHandler(e) {
var arr = Array.from(this.parentElement.children);
var index = arr.indexOf(this);
this.parentElement.style.backgroundImage = "url(" + imgArr[index] + ")";
pre.style.border = "2px solid rgba(0,0,0,0)";
pre = this;
pre.style.border = "2px solid #ff9d00";
}
效果：
CSS+HTML的：
效果一样
{
margin: 0;
}
div
{
width: 100%;
height:455px;
background-image: url("./img/a.jpeg");
background-size: 100% 100%;
transition: all 1s;
}
img{
position: absolute;
display: block;
right:50px;
border:2px solid rgba(0,0,0,0);
top:40px
}
img:nth-child(1){
border: 2px solid #ff9d00;
}
img:nth-child(2){
top:121px;
}
img:nth-child(3){
top:202px;
}
img:nth-child(4){
top:283px;
}
img:nth-child(5){
top:364px;
}
</style>
</head>
<body>
<div>
<img src="img/icon_a.jpeg">
<img src="img/icon_b.jpeg">
<img src="img/icon_c.jpeg">
<img src="img/icon_d.jpeg">
<img src="img/icon_e.jpeg">
</div>
<script>
var pre;
var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"];
init();
function init() {
var imgs=document.getElementsByTagName("img");
for(var i=0;i<imgs.length;i++){
imgs[i].addEventListener("click",clickHandler);
}
pre=imgs[0];
}
function clickHandler(e) {
var arr=Array.from(this.parentElement.children);
var index=arr.indexOf(this);
var div=document.querySelector("div");
div.style.backgroundImage="url("+imgArr[index]+")";
pre.style.border="2px solid rgba(0,0,0,0)";
pre=this;
pre.style.border="2px solid #ff9d00";
}
JQ兼容所有端
HTML样式：
<style>
.show-swpier{width:600px;height:300px;}
.show-swpier img{width:100%;height:100%;}
.swiper-container{width:100%;height:100%;position: relative;z-index:1;overflow:hidden;}
.swiper-wrap{width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;white-space: nowrap;transition:left 0.3s;-webkit-transition:left 0.3s;}
.swiper-slide{width:100%;height:100%;display: inline-block;transition:opacity 0.5s;}
.pagination{width:auto;height:auto;position: absolute;z-index:5;left:50%;bottom:8%;transform: translateX(-50%);-webkit-transform: translateX(-50%); white-space: nowrap;} 水平居中
.dot{width:28px;height:8px;background-color:rgba(0,0,0,0.6);display: inline-block;cursor:pointer;}
.dot.active{background-color:rgba(255,255,255,0.6);}
</style>
</head>
<body>
<div id="show-swiper" class="show-swpier">
<div class="swiper-container">
<div class="swiper-wrap">
<div class="swiper-slide"><img src="./images/banner1.jpg" alt=""></div><div class="swiper-slide"><img src="./images/banner2.jpg" alt=""></div><div class="swiper-slide"><img src="./images/banner3.jpg" alt=""></div>
</div>
<div class="pagination">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<script>
new Swiper();
</script>
JS
(function($,factory){
if(typeof module!=='undefined'&&module.exports){
module.export=factory($);
}else if(typeof define==='function'&& define.amd){
define(function(){
return factory($);
})
}else if(typeof window!=='undefined'){
window.Swiper=factory($);
}//兼容所有端。
//继承
//第一个参数是否深度拷贝false浅拷贝，true深拷贝
//第二个参数源对象
//第三个参数目标对象
})(window.jQuery,function($){
var Swiper=function(opts){
var $this=this;
$this.opts=$.extend(false,Swiper.default,opts);
$this.el=$($this.opts.el);
$this.dot=$this.el.find(".dot")
$this.swiperWrap=$this.el.find(".swiper-wrap");
$this.swiperSlide=$this.el.find(".swiper-slide");
$this.index=0;
$this.timer=null;
$this.init();
};
Swiper.default={
el:"#show-swiper",
autoPlay:1000,
animate:"slide"
};
// 初始化数据
Swiper.prototype.init=function(){
var $this=this;
$this.bindEvent();
$this.typeRun();
$this.autoPlay();
};
Swiper.prototype.bindEvent=function(){//点击小点切换
var $this=this;
//点击分页器
$this.dot.on("click",function(){
$this.index=$(this).index();
$this.typeRun();
});
$this.swiperWrap.parent().on("mouseover",function(){
clearInterval($this.timer);
});//鼠标进入暂停动画
$this.swiperWrap.parent().on("mouseout",function(){
$this.autoPlay();
});//鼠标离开开始动画
};
//自动播放
Swiper.prototype.autoPlay=function(){
var $this=this;
$this.timer=setInterval(function(){
$this.index++;
if($this.index>=$this.swiperSlide.length){
$this.index=0
}
$this.typeRun();
},$this.opts.autoPlay)
};
//小点的滑动
Swiper.prototype.slideRun=function(){
var $this=this;
$this.dot.removeClass("active");
$this.dot.eq($this.index).addClass("active");
var iLeft=$this.index*$this.swiperWrap.width();
$this.swiperWrap.css("left",-iLeft);
};
//淡入淡出的效果
Swiper.prototype.opacityRun=function(){
var $this=this;
$this.swiperSlide.css({"position":"absolute","z-index":"1",
"left":"0","top":"0","opacity":"0"});
$this.swiperSlide.eq("this.index").css({"opacity":"1"});
$this.dot.removeClass("active");
$this.dot.eq($this.index).addClass("active");
};
//类型动画
Swiper.prototype.typeRun=function(){
var $this=this;
if($this.opts.animate==='slide'){
$this.slideRun(); //滑动
}else if($this.opts.animate==='opactity'){
$this.opacityRun(); 淡入淡出
}
};
return Swiper;
});
效果：
vue动画淡入淡出轮播图：
<style>
[v-cloak]{
display:none;
}
.swiper-main{width:600px;height:300px;position: relative;z-index:1;}
.swiper-main .swiper-wrap{width:100%;height:100%;}
.swiper-main .swiper-wrap .slide{width:100%;height:100%;position: absolute;z-index:1;left:0;top:0;}
.swiper-main .swiper-wrap .slide img{width:100%;height:100%;}
.swiper-main .page{width:auto;height:auto;position: absolute;bottom:10%;left:50%;transform: translateX(-50%);display:flex;z-index:2;}
.swiper-main .page .spot{width:28px;height:10px;background-color:rgba(255,255,255,0.8);margin-left:5px;margin-right:5px;cursor: pointer;}
.swiper-main .page .spot.active{background-color:rgba(0,0,0,0.8);}
.slide-enter-active,.slide-leave-active{transition:opacity 1s;}
.slide-enter{opacity:0} //透明度0-1是enter;1-0是leave
.slide-enter-to{opacity:1}
.slide-leave{opacity:1}
.slide-leave-to{opacity:0}
</style>
</head>
<body>
<div id="app" v-cloak></div>
<script src="js/vue.js"></script>
<script>
let SwiperComponent={
template:`
<div class="swiper-main">
<div class="swiper-wrap">
<transition-group name="slide">
<div class="slide" v-for="(item,index) in slides" :key="index" v-show="item.isShow"><img :src="item.image" alt=""></div>
</transition-group>
</div>
<div class="page">
<div :class="{spot:true,active:item.isShow}" v-for="(item,index) in slides" :key="index" @click="changeImage(index)"></div>
</div>
</div>
`,
components:{
},
data(){
return {
slides:[
{image:"./images/banner1.jpg",isShow:true},
{image:"./images/banner2.jpg",isShow:false},
{image:"./images/banner3.jpg",isShow:false}
]
}
},
methods: {
changeImage(index){
// console.log(index);
for(let i=0;i<this.slides.length;i++){
if(this.slides[i].isShow){
this.slides[i].isShow=false;
break;
}
}
this.slides[index].isShow=true;
this.$set(this.slides,index,this.slides[index]);
}
},
};
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
