轮播图html怎么实现(简单自动轮播图html代码)

图片轮播的实现：HTML+css+ JavaScript

用到的技术：HTML+CSS+ JavaScript；

操作步骤：

1. 首先制作一个html页面，代码如下

<body

<div id=play

<ul

<li id=playBg</li

<li id=playText</li

<li id=playNum<a1</a<a2</a<a3</a<a4</a<a5</a<a6</a</li

<li id=playShow

<a href=# target=_blank<img src=images/01.jpg alt=澳大利亚：体验蓝山风光，感受澳洲风情</a

<a href=# target=_blank<img src=images/02.jpg alt=九月抄底旅游，马上行动</a

<a href=# target=_blank<img src=images/03.jpg alt=港澳旅游：超值特价，奢华享受</a

<a href=# target=_blank<img src=images/04.jpg alt=炎炎夏日哪里去，途牛带你海滨游</a

<a href=# target=_blank<img src=images/05.jpg alt=定途牛旅游线路，优惠购买缤纷乐相册</a

<a href=# target=_blank<img src=images/03.jpg alt=三亚自助游</a

</li

</ul

</div

</body

2.用CSS做好背景和图片，

#play{width:500px;height:230px; border:#ccc 1px solid;}

#playBg{margin-top:200px;z-index:1;filter:alpha(opacity=70);opacity:0.7;width:500px;position:absolute;height:30px;background:#000;}

#playText{margin-top:200px;z-index:2;padding-left:10px;font-size:14px;font-weight:bold;width:340px;color:#fff;line-height:30px; overflow:hidden;position:absolute;cursor:pointer;}

#playNum{margin:205px 5px 0 350px;z-index:3;width:145px; text-align:right;position:absolute;height:25px;}

#playNum a{margin:0 2px;width:20px;height:20px;font-size:14px; font-weight:bold;line-height:20px;cursor:pointer;color:#000;padding:0 5px;background:#D7D6D7;text-align:center}

#playShow img{width:500px;height:230px;}

</style

common.css内容如下：

body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;}

li{list-style:none;}

img{border:none;}

u{text-decoration:none;}

em{font-style:normal;}

a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}

body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;}

.box{margin:0 auto;text-align:left;width:920px;}

.clear{clear:both;}

3.用js实现点击切换轮播效果：

var t = n = 0, count = $(#playShow a).size();

$(function(){

$(#playShow a:not(:first-child)).hide();

$(#playText).html($(#playShow a:first-child).find(img).attr(‘alt’));

$(#playNum a:first).css({background:#FFD116,’color’:’#A8471C’});

$(#playText).click(function(){window.open($(#playShow a:first-child).attr(‘href’), _blank)});

$(#playNum a).click(function() {

var i = $(this).text() – 1;

n = i;

if (i = count) return;

$(#playText).html($(#playShow a).eq(i).find(img).attr(‘alt’));

$(#playText).unbind().click(function(){window.open($(#playShow a).eq(i).attr(‘href’), _blank)})

$(#playShow a).filter(:visible).hide().parent().children().eq(i).fadeIn(1200);

$(this).css({background:#FFD116,’color’:’#A8471C’}).siblings().css({background:#D7D6D7,’color’:’#000′});

});

t = setInterval(showAuto(), 5000);

$(#play).hover(function(){clearInterval(t)}, function(){t = setInterval(showAuto(), 5000);});

})

function showAuto()

{

n = n = (count – 1) ? 0 : ++n;

$(#playNum a).eq(n).trigger(‘click’);

}

</script

石家庄康诺网络科技有限公司

2017/7/11

轮播图html怎么实现(简单自动轮播图html代码)

相关推荐

发表回复