JQuery悬停控制图片轮播——代码简单

jquery实现的鼠标悬停图片自动轮播效果,当把鼠标悬停到图片时,图像就会不断循环播放,速度非常快,效果非常逼真,就和在放武侠片一样,使用了jquery实现,下面小编给大家分析jq悬停控制图片轮播,请看小面的效果图。

在线预览             源码下载


具体实现的代码如下:

<!-- 轮播广告 -->

<div id="banner_tabs" class="flexslider">

<ul class="slides">

<li>

<a title="" target="_blank" href="#">

<img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png">

</a>

</li>

<li>

<a title="" href="#">

<img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png">

</a>

</li>

<li>

<a title="" href="#">

<img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png">

</a>

</li>

</ul>

<ul class="flex-direction-nav">

<li><a class="flex-prev" href="javascript:;">Previous</a></li>

<li><a class="flex-next" href="javascript:;">Next</a></li>

</ul>

<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">

<li><a>1</a></li>

<li><a>2</a></li>

<li><a>2</a></li>

</ol>

</div>

<script src="js/jquery-1.10.2.min.js"></script>

<script src="js/slider.js"></script>

<script type="text/javascript">

$(function () {

var bannerSlider = new Slider($('#banner_tabs'), {

time: 5000,

delay: 400,

event: 'hover',

auto: true,

mode: 'fade',

controller: $('#bannerCtrl'),

activeControllerCls: 'active'

});

$('#banner_tabs .flex-prev').click(function () {

bannerSlider.prev()

});

$('#banner_tabs .flex-next').click(function () {

bannerSlider.next()

});

})

</script>

css代码:

 

.flexslider {

margin: 0px auto 20px;

position: relative;

width: 100%;

height: 482px;

overflow: hidden;

zoom: 1;

}

.flexslider .slides li {

width: 100%;

height: 100%;

}

.flex-direction-nav a {

width: 70px;

height: 70px;

line-height: 99em;

overflow: hidden;

margin: -35px 0 0;

display: block;

background: url(images/ad_ctr.png) no-repeat;

position: absolute;

top: 50%;

z-index: 10;

cursor: pointer;

opacity: 0;

filter: alpha(opacity=0);

-webkit-transition: all .3s ease;

border-radius: 35px;

}

.flex-direction-nav .flex-next {

background-position: 0 -70px;

right: 0;

}

.flex-direction-nav .flex-prev {

left: 0;

}

.flexslider:hover .flex-next {

opacity: 0.8;

filter: alpha(opacity=25);

}

.flexslider:hover .flex-prev {

opacity: 0.8;

filter: alpha(opacity=25);

}

.flexslider:hover .flex-next:hover,

.flexslider:hover .flex-prev:hover {

opacity: 1;

filter: alpha(opacity=50);

}

.flex-control-nav {

width: 100%;

position: absolute;

bottom: 10px;

text-align: center;

}

.flex-control-nav li {

margin: 0 2px;

display: inline-block;

zoom: 1;

*display: inline;

}

.flex-control-paging li a {

background: url(images/dot.png) no-repeat 0 -16px;

display: block;

height: 16px;

overflow: hidden;

text-indent: -99em;

width: 16px;

cursor: pointer;

}

.flex-control-paging li a.flex-active,

.flex-control-paging li.active a {

background-position: 0 0;

}

.flexslider .slides a img {

width: 100%;

height: 482px;

display: block;

}

以上代码就是本文使用jq实现悬停控制图片轮播的内容,希望大家喜欢。

以上是 JQuery悬停控制图片轮播——代码简单 的全部内容, 来源链接: utcz.com/z/315109.html

回到顶部