圖片輪播的實現：HTML+CSS+ JavaScript

片輪播的實現：HTML+CSS+ JavaScript

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

操作步驟：

1. 首先制作一個html頁面，代碼如下

<body>

<ul>

</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

者：夢里夢中夢

轉發鏈接：https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q

關注，不迷路，每日分享大量前端知識。

代碼運行結果圖

因為平時用vue，寫代碼習慣了，這個輪播圖的代碼是在vue的腳手架里寫的，把它拆解起來，寫在html原理一樣，如果覺得拆解吃力的話，可以參考我的上篇文章vue腳手架的使用，將這個代碼粘貼到helloworld.vue代碼運行就可以了，基本功能實現了，替換成自己的圖片就可以運行了。唯一美中不足的就是輪播圖一開始不是自動播放的，需要鼠標在圖片上劃過一次才能自動播放，如果用原生js代碼寫的話，用windoes.onload和init，建立定時器，然后清除等操作可以實現自動播放，和鼠標放在上面后停止播放功能，遇到的問題就是，vue加載頁面自動開始觸發的定時器寫在mounted中，但是將定時器銷毀，只能寫在鉤子函數befdestroy和destroy中才能銷毀（我感覺是）中間需要鼠標放在圖片上停止定時器實現不了，對vue的生命周期函數理解的還是不夠，如果有更好的實現方式還請評論區留言交流以后還得多多練習。

在線咨詢

上一篇：HTML文檔的訪問端口DOM (Document Object Model)
下一篇：CSS尺寸單位詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

圖片輪播的實現：HTML+CSS+ JavaScript

您的項目需求