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

深藏阁楼爱情的钟 2022-04-12 21:08 708阅读 0赞

html部分:

![Image 1][]  
![Image 1][]  
![Image 1][]  
![Image 1][]

<div class="pptNum">
    		<span class="normal" idex='1'>1</span>
    		<span class="normal">2</span>
    		<span class="normal">3</span>
    		<span class="cur">4</span>
    	</div> 
    </div>
    简单来说就是第一步创建一个盒子，用来装索要展示的轮播图。一共四张，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();  
那我们来看最终的实现效果吧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B1YmlhbzQ5MzY_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B1YmlhbzQ5MzY_size_16_color_FFFFFF_t_70 1]

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

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B1YmlhbzQ5MzY_size_16_color_FFFFFF_t_70]: /images/20220413/92f91c44c1bb47f8bf5ce19988644801.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B1YmlhbzQ5MzY_size_16_color_FFFFFF_t_70 1]: /images/20220413/5c74c09df2f74d55bf7f50218992ba3b.png