您的位置：首页 > 其它

jq实现图片轮播:圆形焦点+左右控制+自动轮播

2014-10-02 00:26 597 查看

来源：http://www.ido321.com/862.html

html代码：

[code] <!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>JQ图片轮播</title>

<!-- css -->

<link rel="stylesheet" type="text/css" href="style.css">

<!-- js -->

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="style.js">

</script>

</head>

<body>

<div id="ad">

<ul>

<li>

<a href="#" title="位置1"><img src="ad.png"></a>

</li>

   <li>

<a href="#" title="位置2"><img src="1.jpg"></a>

</li>

<li>

<a href="#" title="位置3"><img src="2.jpg"></a>

</li>

<li>

<a href="#" title="位置4"><img src="3.jpg"></a>

</li>

</ul>

</div>

<div class="slideshortcut">

<a id="SlidePrev" class="prev"><</a>

<a id="SlideNext" class="next">></a>

</div>

<div class="jiaodiandiv">

<ul>

<li id="selectli"><span>1</span></li>

<li><span>2</span></li>

<li><span>3</span></li>

<li><span>4</span></li>

</ul>

</div>

</body>

</html>

[/code]

css代码

[code] #ad

width: 1350px;

height: 370px;

overflow: hidden;

margin-left:-5px;

position: relative;

#ad ul

list-style: none;

position: absolute;

margin-left: -40px;

#ad ul li

float: left;

width: 1350px;

height: 370px;

position: relative;

.slideshortcut a

color: #000000;

text-decoration: none;

background-color: #fff;

display: block;

position: absolute;

z-index: 500;

top: 150px;

width: 50px;

height: 50px;

border: 1px solid red;

font-size: 40px;

line-height: 40px;

text-align: center;

opacity: 0;

.slideshortcut a:hover

color: #000000;

text-decoration: none;

.prev

left: 150px;

.next

left: 1200px;

.jiaodiandiv

position: absolute;

z-index: 200;

top: 320px;

left: 42%

.jiaodiandiv ul

list-style: none;

.jiaodiandiv ul li

width: 30px;

height: 30px;

margin-left: 10px;

float: left;

border: 1px solid #B7B7B7;

background-color: #B7B7B7;

border-radius:15px;

text-align: center;

#selectli

background-color: #FF4400;

.jiaodiandiv li:hover

cursor: pointer;

.jiaodiandiv span

font-size: 20px;

line-height: 30px;

[/code]

js代码：

[code] $(document).ready(function()

/*轮播*/

var index = 0;

var jdlis = $('.jiaodiandiv li'); /*焦点li元素集合*/

var timer;

var liWidth = $('#ad').width();

var len = $("#ad ul li").length;

//左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度

$("#ad ul").css("width",liWidth * (len));

//上一张按钮

     $("#SlidePrev").click(function(){

clearInterval(timer);

index -= 1;

     if(index == -1){index = len - 1;}

showPic(index);

});

//下一张按钮

     $("#SlideNext").click(function(){

clearInterval(timer);

index += 1;

     if(index == len){index = 0;}

showPic(index);

});

//轮播

$('#ad').hover(

function()

  clearInterval(timer); /*停止动画*/

$('.slideshortcut a').show().css('opacity','0.4');

},

function()

$('.slideshortcut a').hide();

         timer=setInterval(function(){

    showPic(index);

index++;

         if(index == len){index = 0;}

},2000);

}).trigger("mouseleave");

/*显示index图片*/

function showPic(index){

var nowLeft = -index*liWidth;

jdlis.eq(index).css('backgroundColor','#FF4400');

jdlis.not(jdlis.eq(index)).css('backgroundColor','#B7B7B7');

$("#ad ul").stop(true,false).animate({"left":nowLeft},300);

/*$('#loginimg').hide().fadeIn(1000);*/

$('.slideshortcut a').mouseover(function()

$('.slideshortcut a').show();

});

$('.prev').mouseover(

function()

$(this).css({opacity:'0.95',cursor:'pointer'});

});

$('.next').mouseover(

function()

$(this).css({opacity:'0.95',cursor:'pointer'});

});

/*点击焦点区的div显示对应图*/

jdlis.click(

function(){

  clearInterval(timer);

index = jdlis.index(this);

  showPic(index);

});

});

[/code]

打包下载：http://download.csdn.net/detail/u011043843/7994017

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航