<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
?????*{
?????margin: 0 ?auto;
?????padding: 0;
?????list-style: none; //去圆点
?????}
?????.one {
?????width: 1200px;
?????height:350px;
?????margin: 0 auto;
?????overflow: hidden; //设定好的宽度多余的进行隐藏
?????}
?????.one ul{
?????width: 3600px;
???????position: relative;
?????}
?????.one ul li{
?????float: left; //图片浮动
?????}
?????.two ul li { //轮播条的样式设置
?????width: 50px;
?????height: 5px;
???????background-color: red;
???????display: inline-block; //向行内样式一样显示
???????position: relative;
???????left: 800px;
???????top: -30px;
?????}
?????.two .a {
?????background-color: #565656;
?????}
</style>
</head>
<body>
<div class="all">
????????<div class="one">
?????????????<ul>
?????????????????<li><img src="images/index_02.png" ></li>
?????????????????<li><img src="images/index_03.png" ></li>
?????????????????<li><img src="images/index_04.png" ></li>
?????????????</ul>
????????</div>
????????<div class="two">
?????????????<ul>
????????????????<li class="a"></li>
????????????????<li></li>
????????????????<li></li>
?????????????</ul>
????????</div>
</div>
<script type="text/javascript">
$(function(){
?????var oneul = $(‘.one ul‘); ?????//声明一个变量找到图片的ul
?????var oneulli = $(‘.one ul li‘); //声明一个变量找到图片的ul li
?????var twoulli = $(‘.two ul li‘); //声明一个变量找到轮播按钮 ul li
?????var Awidth = oneulli.eq(0).width(); //声明一个变量找到声明图片的(ul li)=oneulli的那个变量 ?从0开始eq(0) ?宽度width()
?????var count=0; ?????//用来计数
?????var time=null; ???//用来计时间
?????twoulli.on(‘click‘,function(){
?????$(this).addClass(‘a‘).siblings().removeClass(‘a‘); ?//addClass()添加 siblings()同胞元素 removeClass()移除
?????count=$(this).index();
?????oneul.animate({"left":-count*Awidth}); ??//四张图片依次向左滑动 ???
?????})
?????time=setInterval(lun,2000);
?????function lun(){ ??//lun 调用上面命名
?????count++; ?????????//js运算符 %= 取模 就是去得它的余数 18
?????count%=twoulli.length;
?????twoulli.eq(count).trigger(‘click‘);
?}
})
</script>
</body>
</html>
html+css+js ??实现自动滑动轮播图
原文地址：http://www.cnblogs.com/tangtangsimida/p/7570068.html