前端新手自己寫的，練習一下基本功，也是留下的第一次記錄
創(chuàng)新互聯(lián)建站主打移動網站、成都網站制作、成都做網站、外貿營銷網站建設、網站改版、網絡推廣、網站維護、國際域名空間、等互聯(lián)網信息服務，為各行業(yè)提供服務。在技術實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務，根據網站的內容與功能再決定采用什么樣的設計。最后，要實現(xiàn)符合網站需求的內容、功能與設計，我們還會規(guī)劃穩(wěn)定安全的技術方案做保障。
html部分
div class="cm-banner">
css部分
重慶分公司
重慶分公司
*{
margin: 0;
padding: 0;
}
.cm-banner {
width: 100%;
height: 300px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.cm-banner-in {
width: 1100px;
height: 300px;
position: absolute;
top: 0;
left: 50%;
margin-left: -550px;
}
#cm_banner_list li{
display: none;
position: absolute;
top: 0;
left: 0;
}
.cm-banner-num {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
z-index: 2; /*如果沒有在這里設置層次小圓點的點擊效果無法觸發(fā)*/
}
.cm-banner-num li{
width: 10px;
margin: 10px 3px;
height: 10px;
background-color: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
opacity: 0.7;
}
.cm-banner-num .active {
background-color: #3982de;
}
.cm-banner-arrow {
position: absolute;
top: 50%;
margin-top: -22px;
opacity: 0.5;
display: none;
}
#cm_prev {
left: 0;
}
#cm_next {
right: 0;
}js部分
$(function(){
//鼠標移入顯示箭頭按鈕
$('.cm-banner').hover(function(){
$('.cm-banner-arrow').show();
clearInterval(cm_timer);
},function(){
$('.cm-banner-arrow').hide();
cm_timer = setInterval(function(){
i++;
if(i > cm_length - 1){
i = 0;
}
$('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
cm_toggle(i);
},2500);
});
//鼠標移入箭頭按鈕高亮
$('.cm-banner-arrow').hover(function(){
$(this).css('opacity','1');
},function(){
$(this).css('opacity','0.5');
});
//初始化必要變量
var i = 0;
var cm_length = $('#cm_banner_list li').length;
var cm_toggle = function(point){
$('#cm_banner_num li').eq(point).addClass('active').siblings().removeClass('active');
};
//動態(tài)添加小圓點
for(j = 0;j < cm_length;j++){
$('#cm_banner_num').append('');
}
//給第一個小圓點添加樣式
$('#cm_banner_num li').first().addClass('active');
//給第一張圖片添加樣式
$('#cm_banner_list li').first().css('display','block');
//鼠標點擊左箭頭切換
$('#cm_prev').click(function(){
i--;
if(i < 0){
i = cm_length - 1;
}
$('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
cm_toggle(i);
});
//鼠標點擊右箭頭切換
$('#cm_next').click(function(){
i++;
if(i > cm_length - 1){
i = 0;
}
$('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
cm_toggle(i);
});
//鼠標點擊圓點切換
$('#cm_banner_num li').click(function(){
var cm_index = $(this).index();
$('#cm_banner_list li').eq(cm_index).fadeIn(800).siblings().fadeOut(800);
i = cm_index;
cm_toggle(cm_index);
});
//自動播放
cm_timer = setInterval(function(){
i++;
if(i > cm_length - 1){
i = 0;
}
$('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
cm_toggle(i);
},2500);
});以上這篇jQuery制作全屏寬度固定高度輪播圖(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。
