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

html代码：

<!-- css -->

<!-- js -->

1:

</script>

css代码

#ad

1350px;

370px;

hidden;

-5px;

relative;

ul

none;

absolute;

-40px;

li

left;

1350px;

370px;

relative;

.slideshortcut a

#000000;

none;

#fff;

block;

absolute;

500;

150px;

50px;

50px;

1px solid red;

40px;

40px;

center;

     opacity: 0;

.slideshortcut a:hover

#000000;

none;

.prev

150px;

.next

1200px;

.jiaodiandiv

absolute;

200;

320px;

left: 42%

ul

none;

li

30px;

30px;

10px;

left;

1px solid #B7B7B7;

#B7B7B7;

15px;

center;

 #selectli

#FF4400;

li:hover

pointer;

span

20px;

30px;

js代码：

function()

/*轮播*/

var index = 0;

/*焦点li元素集合*/

var timer;

'#ad').width();

).length;

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

,liWidth * (len));

11:

//上一张按钮

function() {

     clearInterval(timer);

     index -= 1;

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

     showPic(index);

});

19:

//下一张按钮

function() {

     clearInterval(timer);

     index += 1;

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

     showPic(index);

});

//轮播

'#ad').hover(

function()

/*停止动画*/

'0.4');

},

function()

'.slideshortcut a').hide();

function() {

         showPic(index);

         index++;

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

       },2000);

);

/*显示index图片*/

function showPic(index){

var nowLeft = -index*liWidth;

'#FF4400');

'#B7B7B7');

:nowLeft},300);

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

function()

'.slideshortcut a').show();

});

'.prev').mouseover(

function()

'pointer'});

});

'.next').mouseover(

function()

'pointer'});

});

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

     jdlis.click(

function(){

       clearInterval(timer);

this);

       showPic(index);

});

});