亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)

 更新時(shí)間：2022年01月25日 10:17:04   作者：丁七歲  
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

效果：

代碼：

<!DOCTYPE html>
<html lang="ch">
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>實(shí)現(xiàn)一組圖片的循環(huán)滾動(dòng)</title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? }
? ? ? ? ? ? div{
? ? ? ? ? ? ? ? width: 1066px;/*2張圖片的總寬度*/
? ? ? ? ? ? ? ? height: 300px;
? ? ? ? ? ? ? ? background-color: #000000;
? ? ? ? ? ? ? ? margin: 120px auto;
? ? ? ? ? ? ? ? overflow: hidden;/*超出的隱藏*/
? ? ? ? ? ? ? ? border: 1px solid #00ff37;
? ? ? ? ? ? }
? ? ? ? ? ? ul{
? ? ? ? ? ? ? ? width: 3198px; /*6張圖片的總寬度 放在一行*/
? ? ? ? ? ? ? ? height: 300px;
? ? ? ? ? ? ? ? list-style: none;
? ? ? ? ? ? ? ? background-color: #000000;
? ? ? ? ? ? }
? ? ? ? ? ? ul>li {
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function () {
? ? ? ? ? ? ? ? //編寫(xiě)一個(gè)可以讓圖片自動(dòng)循環(huán)滾動(dòng)的函數(shù)(弄一個(gè)定時(shí)器，回調(diào)函數(shù)里設(shè)置它的marginLeft)
? ? ? ? ? ? ? ? var timer
? ? ? ? ? ? ? ? var offset = 0 //待會(huì)用這個(gè)變量設(shè)置它的marginLeft (js代碼可以不寫(xiě)分號(hào)的，我是懶得寫(xiě)了)
? ? ? ? ? ? ? ? function autoRun(){
? ? ? ? ? ? ? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? ? ? ? ? ? ? offset += -10 //這是marginLeft
? ? ? ? ? ? ? ? ? ? ? ? if(offset <= -2132){
? ? ? ? ? ? ? ? ? ? ? ? ? ? //滾動(dòng)了四張圖片 接著滾動(dòng)
? ? ? ? ? ? ? ? ? ? ? ? ? ? offset = 0
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? $("ul").css({
? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft:offset
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? },131.4)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? autoRun()//滾動(dòng)起來(lái)
? ? ? ? ? ? ? ? //監(jiān)聽(tīng)li的移入 移出事件
? ? ? ? ? ? ? ? $("li").hover(function () {
? ? ? ? ? ? ? ? ? ? //鼠標(biāo)指針?lè)派厦?不讓ta滾動(dòng)(停掉這個(gè)定時(shí)器)
? ? ? ? ? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? ? ? ? ? //鼠標(biāo)指針沒(méi)有放上面的圖片 給他們一個(gè)黑色的背景 這樣顯得選中的這個(gè)亮
? ? ? ? ? ? ? ? ? ? $(this).siblings().fadeTo(120,0.33)
? ? ? ? ? ? ? ? ? ? //當(dāng)前的這個(gè)圖片亮
? ? ? ? ? ? ? ? ? ? $(this).fadeTo(120,1)
? ? ? ? ? ? ? ? },function () {
? ? ? ? ? ? ? ? ? ? autoRun() //滾動(dòng)
? ? ? ? ? ? ? ? ? ? $("li").fadeTo(120,1) //1-->全亮
? ? ? ? ? ? ? ? })


? ? ? ? ? ? })
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <div>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <img src="img/111.jpg">
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <img src="img/222.jpg">
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <img src="img/333.jpg">
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <img src="img/444.jpg">
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <img src="img/111.jpg">
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <img src="img/222.jpg">
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論