较完整的轮播图特效

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;

}