css3轮播不用jpuery_首页轮播图的制作方法 html+css+js 引入jquery.min.js框架 不需要点击自动轮播 使用的代码工具为 sublime text3...

它是一个比较活的轮播图，不需要点击自动轮播

学习轮播图

*{

margin: 0;

padding: 0;

list-style: none;/*去li圆点*/

}

.pic {

width: 1200px;

height: 350px;

overflow: hidden;/*溢出隐藏*/

margin: 10px auto;/*居中向下10px*/

}

.pic ul {

width: 3600px;

position: relative;/*相对定位*/

}

.pic ul li {

float: left;/*浮动 让它变成一排*/

}

.long {

width: 500px;

height: 50px;

}

.long ul li {

width: 71px;

height: 9px;

background-color: #000;

display: inline-block;

position: relative;

top: -38px;

left: 858px;

margin-right: 20px;

}

.long .action {

background-color: #007ae1;

}

$(function(){

//声明一个变量=找到图片的.pic ul

//声明一个变量=找到图片的pic ul li

//声明一个变量=找到长方条的long ul

var imgUL = $ (".pic ul ");

var imgULli = $(".pic ul li");

var longUI = $ (".long ul li");

var Awidth=imgULli.eq(0).width();

//用来计数

var count=0; //声明变量count=0

var time=null; //声明时间time=null 空

longUI.on('click',function(){ //找到长方条按钮 点击事件

$(this).addClass('action').siblings().removeClass('action');//addClass()

var index =$(this).index();

content=index;

imgUL.animate({"left":-content*Awidth});

})

time = setInterval(function(){ //setInterva()时间毫秒

count++;

if (count>longUI.length-1){

count=0;

}

longUI.eq(count).trigger('click');//选择长方条按钮 trigger()触发某个事件

},2000)

})