較完整的輪播圖特效

js代碼：

/**

* Created by Administrator on 16-7-18.

*/

$(function(){

//主圖區域輪播代碼

var linum = $('.slider-item').length;

var sitemW = $('.slider-item').width();

var proW = $('.slider-item').width() / linum;//進度條分段寬度值,應是個百分比數

// alert(proW);

var index = 0;

$('.slider-item').mouseover(function(){

index = $('.slider-item').index(this);//這句話能夠獲得滑過期當前li的索引值，後面沒用上

});

var carouselId = window.setInterval(function(){

if(index == linum)

index = 0;

var snum = sitemW * index;//輪播圖傳參及執行

carouselMoveBy(snum);

var prow = proW*(index+1);//進度條傳參及執行

changeProW(prow);

index++;//這句話最關鍵，跟隨着setInterval的index++才能作到定時給索引值，each遍歷之類的作不到

},4000);

$('.index-slider').hover(function(){//鼠標滑入時，中止動效

clearInterval(carouselId);

$('.unslider-arrow').addClass('backcolor');//鼠標滑入時，左右箭頭的黑色背景逐步顯現

 

},function(){//移開光標後，動畫繼續

$('.unslider-arrow').removeClass('backcolor');//鼠標滑開時，左右箭頭的背景色逐步變透明隱藏，即去掉黑色便可

carouselId = window.setInterval(function(){

if(index == linum)

index = 0;

var snum = sitemW * index;//輪播圖傳參及執行

carouselMoveBy(snum);

var prow = proW*(index+1);//進度條傳參及執行

changeProW(prow);

index++;//這句話最關鍵，跟隨着setInterval的index++才能作到定時給索引值，each遍歷之類的作不到

},4000);

});

$('.prev').click(function(){//前置箭頭點擊事件

console.log(index);//能獲得當前正確的索引值

--index;

var snum = sitemW * index;//輪播圖傳參及執行

carouselMoveBy(snum);

var prow = proW*(index+1);//進度條傳參及執行

changeProW(prow);

});

$('.next').click(function(){//後置箭頭點擊事件

// console.log(index);//能獲得當前正確的索引值

++index;

var snum = sitemW * index;//輪播圖傳參及執行

carouselMoveBy(snum);

var prow = proW*(index+1);//進度條傳參及執行

changeProW(prow);

});

function carouselMoveBy(slidenum){//輪播動做

$('.index-slider ul').animate({//實際上只需移動ul的left的值就能夠作到輪播動效

left:'-'+slidenum+'px'

},700);

}

//進度條對應動效代碼

function changeProW(proWnum){

$('.progress').width(proWnum);

}

});

html代碼:

<div class="index-slider">

<div class="slider-content has-dots" style="width: 600px; height: 310px; overflow: hidden;">

<!-- 左右箭頭 -->

<a data-arrow="prev" class="unslider-arrow prev" href="javascript:;">

<i class="iconfont arrow">&#xe62c;</i>

</a>

<a data-arrow="next" class="unslider-arrow next" href="javascript:;">

<i class="iconfont arrow">&#xe662;</i>

</a>

<!-- 左右箭頭end -->

<!-- 輪播圖列表 -->

<ul>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slider-img" src="images/thumb_600_310_20160606021545887.jpg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160624051723654.jpg" alt=""/>

<span class="slider-title">

<em>6.27融資清單：美信金融完成數千萬元Pre-A輪融資；劉備修車網完成2000萬元天使輪融資</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160625013726713.jpg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160625043741958.jpg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160625083924910.jpg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160625091638145.jpeg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160625093912983.jpg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160625124016753.jpg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

<li class="slider-item">

<a href="javascript:void(0)" target="_blank">

<img class="slide-img" src="images/thumb_600_310_20160626093527215.jpg" alt=""/>

<span class="slider-title">

<em>A輪融資2500萬美圓，付費用戶100萬，復購率43%，分答起碼讓果殼離錢愈來愈近了</em>

</span>

</a>

</li>

</ul>

<!-- 輪播圖列表end -->

<!-- 進度條 -->

<div class="progress"></div>

<!-- 進度條end -->

</div>

<div class="slider-tags clearfix">

<div class="tags-box">

<a style="color:#63bacb;" href="http://www.cyzone.cn/tag/文體消費/" target="blank" class="tag">文體消費<span class="tag-icon"></span>

</a>

<a style="color:#a048ff ;" href="http://www.cyzone.cn/tag/消費升級/" target="blank" class="tag">消費升級<span class="tag-icon"></span>

</a>

<a style="color: #fd8331;" href="http://www.cyzone.cn/tag/智能硬件/" target="blank" class="tag">智能硬件<span class="tag-icon"></span>

</a>

<a style="color:#00c0ff;" href="http://www.cyzone.cn/tag/每日融資/" target="blank" class="tag">每日融資<span class="tag-icon"></span>

</a>

<a style="color:#9933ff;" href="http://www.cyzone.cn/tag/互聯網金融/" target="blank" class="tag">互聯網金融<span class="tag-icon"></span>

</a>

<a style="color:#0099ff;" href="http://www.cyzone.cn/tag/電商/" target="blank" class="tag">電商<span class="tag-icon"></span>

</a>

</div>

<div class="report-btn">

<a target="_blank" href="http://form.cyzone.cn/f/2XavFE">求報道</a>

</div>

</div>

</div>

css代碼：

//輪播圖區域

.index-slider{

margin-bottom:10px;

box-shadow: 2px 2px 1px #e7e7e7;

width: 600px;

height: 362px;

}

.slider-content{

.rel();

width: 600px;

height: 310px;

overflow: hidden;

}

.slider-content>ul{

.rel();

z-index: 1;

width: 900%;

height: 310px;

overflow: hidden;

}

.slider-item{

width: 600px;

height: 310px;

overflow: hidden;

.rel();

.fl();

.d-b();

}

.slider-img{

width:600px;

.d-b();

}

.slider-title{

bottom: 0;

color: #fff;

font-size: 20px;

font-weight: bold!important;

left: 0;

line-height: 28px;

max-height: 56px;

padding: 15px;

position: absolute;

width: 570px;

.yahei;

em{

font-weight: bold;

}

}

//輪播圖——左右箭頭圖標

 

@font-face {font-family: "iconfont";

src: url('../css/font/arrow/iconfont.eot?t=1467100122'); /* IE9*/

src: url('../css/font/arrow/iconfont.eot?t=1467100122#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../css/font/arrow/iconfont.woff?t=1467100122') format('woff'), /* chrome, firefox */

url('../css/font/arrow/iconfont.ttf?t=1467100122') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('../css/font/arrow/iconfont.svg?t=1467100122#iconfont') format('svg'); /* iOS 4.1- */

}

 

.icon-iconfontjiantou3:before { content: "\e62c"; }

.icon-jiantouyou:before { content: "\e662"; }

.arrow{

.font-s(42px);

color:#fff;

margin-left: -10px;

}

.unslider-arrow {

height: 54px;

margin-top: -44px;

overflow: hidden;

padding: 12px;

position: absolute;

top: 50%;

transition: all 0.7s ease 0s;

width: 21px;

z-index: 2;

// background: transparent;//這個樣式單獨拎出去用js來控制，默認就是透明，因此就有了下面的單獨樣式.backcolor

opacity: 0.3;

}

.unslider-arrow.prev {

left: 20px;

}

.unslider-arrow.next {

right: 20px;

}

.backcolor{

background: #000;

}

//進度條

.progress{

background: #f60 none repeat scroll 0 0;

bottom: 0;

left: 0;

min-height: 3px;

overflow: hidden;

position: absolute;

width: 11.11%;

z-index: 2;

}