基於JQ帶文字特效的輪播圖
css代碼：
*{margin:0;padding: 0;list-style:none;text-decoration:none;}
/*============
輪播圖淡入淡出，配文字效果樣式
============*/
.slider{position:relative;overflow:hidden;}
.slider ul li img{width:800px;height: 300px}
#slider_a{overflow:hidden;height:300px;}
.slider-arrows{position:absolute;top:50%;margin-top:-44px;width:100%}
.slider-arrows span{display:none;background-color:rgba(105,105,105,0.3);cursor:pointer;}
.slider-arrows span:hover{background-color:rgba(244,244,244,0.5);}
.slider-arrows span:nth-child(1){float:left;margin-left:1%}
.slider-arrows span:nth-child(2){float: right;margin-right:1%}
.slider-msg{position:absolute;top:50%;left:25%;margin-top:-42px;width:400px;}
.slider-msg i{font-style:normal;margin:5px;font-size:20px;opacity:0.8;color:#ffffff;font-weight:600;vertical-align:text-bottom;}
.slider-msg i:nth-child(1){font-size: 26px}
.slider-msg i:nth-child(2){font-size: 26px}
.slider-pagination{position:absolute;bottom:10px;width:100%;text-align: center;}
.slider-pagination span{display:inline-block;width:50px;height:8px;margin-right:5px;cursor:pointer;opacity:0.7;}
.i-position{display:inline-block;transform:translateY(300px);}
.i-animal{transform: translateY(0);transition:transform 1s;transition-delay: }html代碼：
<body>
<div style="width:800px;height:300px;background-color:#FFF0F5;margin: 0 auto;">
<h4 style="text-align: center;">淡入淡出，配文字特效</h4>
<!-- 輪播圖容器盒子 -->
<div class="slider">
<ul id="slider_a">
<li><img src="../img/1.jpg" alt="vue.js橫行霸道"></li>
<li><img src="../img/2.jpg" alt="原生JS,在冷風中瑟瑟發抖"></li>
<li><img src="../img/3.jpg" alt="PHP大戰一切後端語言"></li>
</ul>
<div class="slider-arrows">
<span><svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/></svg></span>
<span><svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"/></svg></span>
</div>
<div class="slider-msg">
<div data-img="咖啡機客戶安徽分開始對啦"></div>
<div data-img="搭建框架安防科技的驕傲看風景啊啊罰款是"></div>
<div data-img="發酵奧斯卡法教綠山咖啡家我垃圾費了水電費了"></div>
</div>
</div>
</div>
<script type="text/javascript" src="../jquery.min.js"></script>js代碼
/*---------------
輪播圖類
參數Obj是一個對象，對象要如下定義
{
"vessel":"dom1"//輪播圖容器
"elemt":"dom2"，// 獲取元素的輪播塊li
"fontelemt":"dom3"，//獲取元素的字體特效的包含元素
"arrow":"dome3"，//輪播圖的2側按鈕
"time":"1000",//定時時間，默認5s(單位毫秒)
}
---------------*/
function createSliser(obj){
var sliderObj = new Object();
var vessel = $(obj.vessel);
var slider_a = $(obj.elemt);
var sliderdesc = $(obj.fontelemt);
var arrow = $(obj.arrow);
var settime = obj.time||5000;
var arr = "cese";
var nowpic = 1;
var time;
sliderObj.init = function(){
spanBtn();
nextPic();
this.autoPlay();
eventbind();
}
/*下一張*/
function nextPic(){
for(var i = 0;i<slider_a.length;i++){
$(slider_a[i]).hide();
$(sliderdesc[i]).hide();
}
if(nowpic>slider_a.length){
nowpic = 1;
}
$(slider_a[nowpic-1]).fadeIn(2000)
$(sliderdesc[nowpic-1]).fadeIn()
wrapDesc();
spanColor();
nowpic++
}
/*前一張*/
function proPic(){
console.log(nowpic);
for(var i = 0;i<slider_a.length;i++){
$(slider_a[i]).hide();
$(sliderdesc[i]).hide();
}
if(nowpic===0){
nowpic = slider_a.length;
}
$(slider_a[nowpic-1]).fadeIn(2000);
$(sliderdesc[nowpic-1]).fadeIn();
wrapDesc();
nowpic--;
}
/*事件綁定*/
function eventbind(){
var slider_pagination =$(".slider-pagination span");
slider_pagination.on("click",function(e){
var e =e.target||event.target;
for(var i = 0;i<slider_a.length;i++){
$(slider_a[i]).hide()
$(sliderdesc[i]).hide()
}
nowpic = Number(e.dataset.id)+1;
console.log(nowpic)
$(slider_a[nowpic-1]).fadeIn(2000)
$(sliderdesc[nowpic-1]).fadeIn()
wrapDesc();
spanColor();
})
vessel.on("mouseover",function(){
clearInterval(time)
arrow[0].style.display="block";
arrow[1].style.display="block";
})
vessel.mouseout(function(){
sliderObj.autoPlay();
arrow[0].style.display="none";
arrow[1].style.display="none";
})
arrow[0].onclick=function(){
proPic();
}
arrow[1].onclick=function(){
nextPic();
}
}
/*文字渲染*/
function wrapDesc (){
var arr = [];
//console.log(nowpic)
var sliderdes =$(sliderdesc[nowpic-1])
var desc = sliderdes.data('img');
sliderdesc.html("");
//console.log(desc);
for(var i = 0;i<desc.length;i++){
arr[i] = $("<i class='i-position'>"+desc[i]+"</i>");
arr[i].css({"transition-delay":i*0.2+"s"})
sliderdes.append(arr[i]);
}
setTimeout(function(){
for(var i = 0;i<desc.length;i++){
arr[i].addClass('i-animal');
}
},100)
}
/*下方按鈕*/
function spanBtn(){
var btn = $("<div class='slider-pagination'></div>")
for(var i=0;i<slider_a.length;i++){
var tmp = $('<span data-id='+i+'></span>');
btn.append(tmp);
}
vessel.append(btn);
}
function spanColor(){
var slider_pagination =$(".slider-pagination span");
for(var i = 0; i<slider_pagination.length;i++){
slider_pagination[i].style.backgroundColor="#1E90FF";
}
slider_pagination[nowpic-1].style.backgroundColor="#BFEFFF";
}
/*自動播放*/
sliderObj.autoPlay=function(){
time=setInterval(nextPic,settime);
}
return sliderObj;
}
/*創建一個輪播圖對象*/
var slidera = createSliser({
"elemt":"#slider_a li",
"fontelemt":".slider-msg div",
"vessel":".slider",
"arrow":".slider-arrows span",
"time":"6000"
});
slidera.init();
</script>具體效果可以訪問tangjietech.top首頁