基于jQuery实现滚动切换效果

仿锋利的Jquery案例做的一个滚动切换效果，供大家参考，具体内容如下

效果如下图:

前台HTML代码如下:

  
  
  
  
  


  

    

      
热播电视剧
      

        

          
●
          
●
          
●
        
      
      

        
          
        
          
      
    
    

      

        

          

            

              
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
          

            

              
            
            
        
      
    
  

RollControl.css代码如下:

body {
  margin: 0px;
  padding: 0px;
}

#view_menu {
  width: 600px;
  height: 30px;
  line-height: 30px;
  cursor: default;
}

#view_menu_title {
  float: left;
  font-family: 'Microsoft YaHei';
  width: 150px;
  text-align: center;
}

#view_menu_trends {
  float: left;
  line-height: 30px;
  color: #99CC99;
  font-size: 10px;
}

.currentTrends {
  color: #009933;
}

#view_menu_trends ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#view_menu_trends ul li {
  text-align: center;
  float: left;
  width: 15px;
}

#view_menu_control {
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
}

#view_menu_control img {
  width: 25px;
  height: 25px;
  line-height: 30px;
  cursor: pointer;
}

#view_content {
  width: 548px;
  height: 178px;
  position: relative;
  overflow: hidden;
  border: 1px solid #CCCCCC;
}

#view_content_fixed {
  position: absolute;
  width: 2500px;
}

#view_content_fixed img {
  cursor: pointer;
}

#view_content ul {
  margin: 0px;
  position: absolute;
  padding: 0px;
}

#view_content ul li {
  margin: 0px;
  padding: 0px;
  float: left;
  padding: 8px;
  list-style: none;
  display: inline;
}

.view_content_fixed下的SPAN标签是为了加标题的

效果图如下:

还有两个地方没有细化，第一个就是

这个动态点点击的时候也可以切换页面，第二个

左右切换按钮,可以添加按压效果，点击的时候取深色图片。

好了，大体的效果就这样，细节自己去玩吧，希望自己能坚持写下去，从小案例到大案例，好好学习！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。