自动轮播js轮播图简单实用！！！

来源：互联网发布：office mac 破解威锋编辑：程序博客网时间：2024/06/04 18:57

这篇文章主要介绍了js图片自动轮播代码，利用图片width显示位置来播放图片和... 需要的朋友可以参考下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css" /><link rel="stylesheet" href="css/index.css" />    <script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/index.js"></script></head><body><div class="content"><div class="sliderFrist"><ul><li><a href=""><img src="images/index.jpg" alt=""></a></li><li><a href=""><img src="images/index1.jpg" alt=""></a></li><li><a href=""><img src="images/index2.jpg" alt=""></a></li></ul></div><div class="sliderLast"><ul><li class="active"></li><li></li><li></li></ul></div></div></body></html>

* { padding:0;margin: 0;list-style:none;}.sliderFrist {width:1440px;height:366px;overflow: hidden;margin: 10px auto;}.sliderFrist ul {width:4320px;position: relative;}.sliderFrist ul li {float: left;}.sliderLast {width:500px;height:50px;}.sliderLast ul {}.sliderLast ul li {width:65px;height:8px;background-color: #a8a8a8;position: relative;display: inline-block;top:-40px;left:510px;margin-right:20px;}.sliderLast .active {background-color: #000;}

$(function(){var sliderLast = $(".sliderLast ul li");var sliderFrist=$(".sliderFrist ul li");var  sliderFristUl= $(".sliderFrist ul");var slderWidth=sliderFrist.eq(0).width();//用来计数//siblings（）消除被选元素的同胞元素var count=0;var time=null;sliderLast.on('click',function(){$(this).addClass('active').siblings().removeClass('active');var index =$(this).index();count=index;sliderFristUl.animate({"left":-count*slderWidth});})time =setInterval(function(){count++;if(count>sliderLast.length-1){count=0;}// trigger()触发某个事件sliderLast.eq(count).trigger('click');},2000)})

阅读全文

1 0

自动轮播js轮播图 简单实用！！！

自动轮播js轮播图简单实用！！！