jQuery實現(xiàn)一組圖片循環(huán)滾動

更新時間：2022年01月25日 10:17:04 作者：丁七歲

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)一組圖片循環(huán)滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果：

代碼：

<!DOCTYPE html>
<html lang="ch">
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>實現(xiàn)一組圖片的循環(huán)滾動</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 () {
? ? ? ? ? ? ? ? //編寫一個可以讓圖片自動循環(huán)滾動的函數(shù)(弄一個定時器，回調(diào)函數(shù)里設置它的marginLeft)
? ? ? ? ? ? ? ? var timer
? ? ? ? ? ? ? ? var offset = 0 //待會用這個變量設置它的marginLeft (js代碼可以不寫分號的，我是懶得寫了)
? ? ? ? ? ? ? ? function autoRun(){
? ? ? ? ? ? ? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? ? ? ? ? ? ? offset += -10 //這是marginLeft
? ? ? ? ? ? ? ? ? ? ? ? if(offset <= -2132){
? ? ? ? ? ? ? ? ? ? ? ? ? ? //滾動了四張圖片 接著滾動
? ? ? ? ? ? ? ? ? ? ? ? ? ? offset = 0
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? $("ul").css({
? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft:offset
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? },131.4)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? autoRun()//滾動起來
? ? ? ? ? ? ? ? //監(jiān)聽li的移入 移出事件
? ? ? ? ? ? ? ? $("li").hover(function () {
? ? ? ? ? ? ? ? ? ? //鼠標指針放上面 不讓ta滾動(停掉這個定時器)
? ? ? ? ? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? ? ? ? ? //鼠標指針沒有放上面的圖片 給他們一個黑色的背景 這樣顯得選中的這個亮
? ? ? ? ? ? ? ? ? ? $(this).siblings().fadeTo(120,0.33)
? ? ? ? ? ? ? ? ? ? //當前的這個圖片亮
? ? ? ? ? ? ? ? ? ? $(this).fadeTo(120,1)
? ? ? ? ? ? ? ? },function () {
? ? ? ? ? ? ? ? ? ? autoRun() //滾動
? ? ? ? ? ? ? ? ? ? $("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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: