基于jquery实现轮播图自动轮播，不用插件

html部分:

	

		1
		2
		3
		4
	
 

简单来说就是第一步创建一个盒子，用来装索要展示的轮播图。一共四张，display:none表示先隐藏该元素。下面的pptNum是随轮播图跳动的小圆点，也可以不写。本案例中小圆点在轮播图下方，若要在轮播图里面，需更改下结构，截图如下。

CSS：
(1)为最外层大盒子设置样式，其次是轮播的图片设置样式。还有下面跳动的小圆点，代码如下。
text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边
/* 大盒子样式 */
.item_Rotationchart{
height: 700px;
width: 550px;
margin:0 auto;
border: 1px solid salmon;
background: orange;
}

.item-lun {
position: relative;
}
/* 轮播图图片样式*/
.sitePhoto {
width: 85%;
height: 600px;
display: block;
padding-top: 15px;
margin: 0 auto;
}
/* 小圆点样式*/
.pptNum {
height: 13px;
right: 35.5%;
bottom: 2%;
line-height: 14px;
position: absolute;
}
.pptNum span {
background: rgb(0, 0, 0);
width: 12px;
height: 12px;
text-align: center;
color: rgb(255, 255, 255);
margin-right: 10px;
border-radius: 50%;
float: right;
display: block;
/* 光标呈现为指示链接的指针（一只手） */
cursor: pointer;
font-size: 12px;
text-indent: -999px;
}
.pptNum .normal {
background: #FFFFFF;
}

.pptNum .cur {
background: #73fbf7;
}
JS部分
//自动轮播
(function($) {
$.fn.extend({
“ppting”: function(t) {
var num = 4; //共多少张要轮播的
var $this = $(this),
i = 0,
$pics = $(’#showSafeImgId’),
autoChange = function() {
var $currentPic = $pics.find(‘a:eq(’ + (i + 1 === num ? 0 : i + 1) + ‘)’);
$currentPic.css({
display: ‘block’
}).siblings(‘a’).css({
display: ‘none’
});
$pics.find(’.pptNum>span:contains(’ + (i + 2 > num ? num - i : i + 2) + ‘)’).attr(‘class’, ‘cur’).siblings(‘span’).attr(‘class’, ‘normal’);
i = i + 1 === num ? 0 : i + 1;
},
st = setInterval(autoChange, t || 2000);
$this.hover(function() {
clearInterval(st);
}, function() {
st = setInterval(autoChange, t || 2000)
});
KaTeX parse error: Expected '}', got 'EOF' at end of input: … i = parseInt((this).text(), 10) - 2;
autoChange();
});
}
});
}(jQuery));
$(’.ppt’).ppting(2000);
//通过js改变背景图颜色
function changecolor(){
var elm = document.getElementsByClassName(“item_Rotationchart”);
console.log(elm);
// num.elm=“background :green;”
// elm.setAttribute(‘style’,‘background:red’);
elm[0].style.background=‘red’;
}changecolor();
那我们来看最终的实现效果吧

好的吧，大概就是这样的实现过程。