廢話不多說了,直接給大家貼代碼了。 ,直接給大家貼代碼了。
無縫輪播圖:
<title>無縫輪播圖</title> <樣式>*{margin:0; padding:0; } ul {list-style:none;}。橫幅{width:600px;高度:300px; border:2px solid #ccc; margin:100px auto; positio; position; sopition; soperion; sperver; vellflow:hidden;}。 100%;文本 - 主體:中心; font-size:0;}。 num li {width:10px;高度:10px;背景:rgba(0,0,0,0,0.5);顯示:block; block-border-radius:100%; display:inline-block; inline-block; margin; margin; margin; margin; margin; margin; margin; margin:0 5px; cursor:cursor:pointer; pointer;} block; blet; clastn; 50px;高度:100px;背景:RGBA(0,0,0,0.6);顏色:#fff; font-size:40px; line-height:100px; text-align:text-align:center; center; centr; pointer;}。 absolute;right: 0;top: 50%;margin-top: -50px;}.num .active{background-color: #fff;}</style><script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script></head><body><div><ul><li><a href =“#”> <img src =“ img/1.jpg”> </a> </li> <li> <a href =“ href =”#<img src =“ img/2.jpg”> </a> </li> </li> <li> <li> <li> <li> <a href = a href =“ href =“#”> <img src =“ img/4.jpg”> </a> </li> <li> <a a href =“ href =”#<img src =“ img/5.jpg”> </a> </a> </li> </li> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> // <div> <span> <</span> <span >> </span> </div> </div> </div> <script> $(function(){var i = 0; var timer = null; for(var j = 0; j <$ j = 0; j <$('。 li')。首先()。addclass('active'); //給第一個圓點添加樣式var firstimg = $('。img li')。首先()。下一個按鈕$('。next')。單擊(function(){i ++; if(i == $('。img li')。 //保證無縫輪播,設置,左值}; $('。img')。stop()。動畫({左:-i*600},300); if(i == $('。'。img li')。length-1){//設置小圓點指示$('。num。 li')。eq(0).addClass('active')。siblings()。removeClass('active');} else {$(' (i == -1){i = $('。img li')。length-2; $('。img')。css({左: - ($('。 li')。eq(i).addclass('active')。siblings()。removeClass('active'');})//設置按鈕的顯示和隱藏$('。banner')。hover(function(){$('。btn' li')。mouseover(function(){var _index = $(this).index(); $('。img')。stop()。動畫({左:-_ index*600},150),150); $('。num li')。eq(_index).addClass('active')。siblings()。removeclass('active'');})//定時器自動播放計時器= setInterval(function(function(){i ++; if(i == $(i == $)('。img li') {i = 1; $('。img')。css({左:0});}; $('。img')。stop(' li')。eq(0).addclass('active')。siblings()。removeclass('active');} else {$('。num li')。eq(i).addclass('active')。siblings()。removeClass('active'');}},1000)//鼠標移入,暫停自動播放,移出,移出$('。banner'。banner')。hover(function(function(function(clearInterval)(clearInterval(timer);},function(function),function(function(function),intervalv (i == $('。img li')。長度){i = 1; $('。img')。css({左:0});}; $('。img')。stop()。動畫({left:-i*600},300),300); if(i == img li'。 li')。eq(0).addclass('active')。siblings()。removeclass('active');} else {$('以上代碼是使用js實現的無縫輪播效果,代碼比較簡單,所以沒有給大家註釋,如果有疑問歡迎給我留言。 ,如果有疑問歡迎給我留言。